How to setup tailwind CSS with vite

Prerequisites:

• Node.js and npm installed on your machine

Step 1: Set Up Your Project
Open your terminal and execute the following commands:

# Create a new Vite project with React template
$ npm create vite@latest my-project -- --template react
$ cd my-project

Step 2: Install Tailwind CSS and PostCSS
Next, install Tailwind CSS, PostCSS, and Autoprefixer as development dependencies:

$ npm install -D tailwindcss postcss autoprefixer

Step 3: Initialize Tailwind CSS
Generate the Tailwind CSS configuration file and initialize it:

$ npx tailwindcss init -p

Step 4: Configure Tailwind
Open the tailwind.config.js file and modify it as follows:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 5: Create Your Styles
In the src directory, create a new file named index.css. Add the following content to it:

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

Step 6: Style Your React Component
In the src directory, open the App.jsx file and update its contents as follows:

import React from 'react';

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

Step 7: Run Your Development Server
Start the development server to see your app in action:

$ npm run dev

Open your browser and navigate to http://localhost:3000. You should see the "Hello world!" text styled according to the Tailwind CSS classes you applied.

PostCSS

PostCSS is used in your project to enhance and optimize your CSS. It enables you to:

1. Apply modern CSS features and proposals.
2. Automatically add vendor prefixes using Autoprefixer.
3. Optimize and minimize your CSS for better performance.
4. Use a modular, plugin-based approach for customized transformations.
5. Ensure cross-browser compatibility for your styles.