React Tailwind Template

An interactive CLI to scaffold a React + Vite + Tailwind CSS project with your choice of libraries — no manual config required.

Usage

npx create-my-tailwind-react-app

You will be prompted to choose a project name and select the libraries you want included.

What's included

Every project comes with the following out of the box:

• React + Vite (TypeScript)
• Tailwind CSS v4 with tw-animate-css
• cn() utility — a clsx + tailwind-merge helper for conditional class names
• ESLint configured for TypeScript + React

Optional libraries

During setup you will be asked whether to include each of the following:

| Option | Package | |---|---| | Component library | shadcn/ui | | Schema validation | Zod | | Icon library | Lucide React | | Data fetching | TanStack Query | | Routing | TanStack Router |

Project structure

After scaffolding, your project will look like this:

my-project/
├── src/
│   ├── utils/
│   │   └── cn.ts        # clsx + tailwind-merge helper
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css        # Tailwind + animation imports
├── index.html
├── vite.config.ts
├── tsconfig.json
└── package.json

Requirements

• Node.js 18+
• npm 9+

License

ISC