Install Tailwind CSS with Vite - Tailwind CSS

1. Create your project

   **npm create vite@latest my-project -- --template react
   cd my-project**
   

2. Install Tailwind CSS

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   

3. Configure your template paths in tailwind.config.js File

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

4. Add the Tailwind directives to your CSS to index.css file

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

5. Start your build process

   npm run dev
   

6. Start using Tailwind in your project in App.jsx

   export default function App() {
     return (
       <h1 className="text-3xl text-blue-900 font-bold underline ">
         Hello world!
       </h1>
     )
   }
   

Last Updated : January 27, 2024