TailwindCSS with React Vite:

1. Create an React with Vite App:

To create the app in the root folder of the repository, run the following command:

npm create vite@latest . -- --template react

1. Install Tailwind CSS:

To install Tailwind CSS, run the following command:

npm install -D tailwindcss postcss autoprefixer

After installing Tailwind CSS, you can proceed with the rest of the setup process.

1. Generate Config of Tailwind:

npx tailwindcss init -p

This command generates two files tailwind.config.js, postcss.config.js

1. Edit tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

1. Add the Tailwind directives to your index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;