Steps to install Tailwind React project with Vite

1. pnpm create vite@latest project-name -- --template react

2. cd my-project

3. pnpm install

4. pnpm install -D tailwindcss postcss autoprefixer

5. npx tailwindcss init -p

6. Add the paths to all of your template files in your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */

export default

{ content: [ "./index.html", "./src/*/*.{js,ts,jsx,tsx}", ],

theme: { extend: {}, }, plugins: [], }

7. Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file:

@tailwind base;

@tailwind components;

@tailwind utilities;

8. Run your build process with:

pnpm dev