React + TypeScript + Vite + Tailwind Template

This project was bootstrapped using react-vite-tailwind, a modern, batteries-included template for new React projects using Vite, Tailwind CSS v4, TanStack Router, Storybook, Vitest, ESLint and Prettier, made made by Tiso Alvarez Puccinelli.

Features

• React 19 + Vite 7 (fast dev server, HMR)
• TypeScript with project references and strict settings
• Tailwind CSS v4 via @tailwindcss/vite
• Routing with TanStack Router v1 (+ Devtools in development)
• Storybook 9 with Docs, A11y, and Vitest addon
• Testing with Vitest (browser mode via Playwright for Storybook tests)
• Linting with ESLint (flat config: TypeScript, React, Hooks, React Refresh, SonarJS, A11y) + Prettier /w TailwindCSS class sorting
• Spell checking with cspell

---

Getting Started

1. Install dependencies

npm install

2. Start the development server

npm run dev

The app will be available at http://localhost:5173/ by default.

---

Available Scripts

• npm run dev: Start Vite dev server
• npm run build: Type-check and build production assets to dist/
• npm run preview: Preview the production build locally
• npm run typecheck: TypeScript type check (no emit)
• npm run lint: Run ESLint
• npm run fix: Format with Prettier and auto-fix ESLint issues
• npm run prettier: Check formatting with Prettier
• npm run spellcheck: Run cspell on src/**/*
• npm run check: Run typecheck, lint, prettier, and spellcheck

Storybook

• npm run storybook: Start Storybook at http://localhost:6006/
• npm run build-storybook: Build static Storybook to storybook-static/
• npm run test-storybook: Run Vitest-powered Storybook tests in the browser (Playwright)

---

Project Structure

.
├─ public/
├─ src/
│  ├─ assets/               # Static assets (images, icons, etc.)
│  ├─ components/           # Reusable UI components
│  ├─ hooks/                # Custom React hooks
│  ├─ lib/                  # Utility functions and shared logic
│  ├─ routes/               # TanStack Router route components
│  ├─ styles/               # Global CSS and styling files
│  ├─ main.tsx              # RouterProvider setup
│  ├─ routeTree.gen.ts      # auto-generated by TanStack Router plugin
│  └─ vite-env.d.ts         # Vite type definitions
├─ .storybook/
│  ├─ main.ts               # Storybook configuration
│  └─ preview.ts            # Global Storybook parameters/styles
├─ index.html               # links src/styles/globals.css
├─ vite.config.ts           # Vite + Tailwind + TanStack Router + Storybook tests
├─ eslint.config.js         # Flat ESLint config
├─ tsconfig*.json           # TS project configs
└─ README.md

---

Styling (Tailwind CSS v4)

• Tailwind is enabled via the official Vite plugin in vite.config.ts.
• The global stylesheet imports Tailwind layers:

/* src/styles/globals.css */
@import "tailwindcss";

• No tailwind.config.* is required for basic usage. Add one only if you need custom theme or plugins.
• Utility class merging: use cn from src/lib/cn.ts.

---

Routing

• TanStack Router is configured via the Vite plugin for code-splitting and route generation.
• Root route: src/routes/__root.tsx
• Router bootstrap: src/main.tsx

---

Storybook

• Start: npm run storybook
• Build: npm run build-storybook → outputs to storybook-static/
• Test: npm run test-storybook runs Storybook tests in a real browser via Playwright

Storybook add-ons: Docs, A11y, and Vitest are preconfigured. A Chromatic config is included; publish if you use Chromatic.

---

Testing

• Unit/interaction tests for stories are run with Vitest + @storybook/addon-vitest using the browser runner.
• Playwright is used under the hood for the browser environment.

Run:

npm run test-storybook

---

Linting, Formatting, and Spell Checking

• ESLint (flat config) with TypeScript, React, Hooks, React Refresh, and SonarJS rules
• Prettier formatting
• cspell for spell checking

Commands:

npm run lint
npm run prettier
npm run fix
npm run spellcheck

---

Build & Deploy

Build a production bundle:

npm run build

The static assets are emitted to dist/. You can deploy the contents of dist/ to any static host (Vercel, Netlify, GitHub Pages, nginx, etc.). No extra configuration is required for Vercel in this template.

To locally verify the production build:

npm run preview

---

License

MIT. See LICENSE for details.