Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes for building responsive and customizable web interfaces by allowing developers to apply styles directly in their HTML markup.

Step 1: Install Tailwind and Dependencies

Run:

npm install -D tailwindcss postcss autoprefixer

Step 2: Initialize Tailwind

Run:

npx tailwindcss init -p

This creates tailwind.config.js and postcss.config.js

If this doesn't work you can try this code to create a file

echo "module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx}'], theme: { extend: {}, }, plugins: [], };" > tailwind.config.js

Step 3: Configure tailwind.config.js

Open tailwind.config.js and update it:

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

Step 4: Add Tailwind to index.css

Open src/index.css and replace everything with:

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

Step 5: Start Vite

npm run dev

Done!!

If this does not work maybe tailwind/cli will work on your project

1. Install Tailwind CSS

Install tailwindcss and @tailwindcss/cli via npm.

Terminal

npm install tailwindcss @tailwindcss/cli

• if yarn

yarn add tailwindcss @tailwindcss/cli

2. Import Tailwind in your CSS

Add the @import "tailwindcss"; import to your main CSS file.

src/index.css

@import "tailwindcss";

3. Start the Tailwind CLI build process

Run the CLI tool to scan your source files for classes and build your CSS.
You should run this in the root folder to work

npx @tailwindcss/cli -i ./src/index.css -o ./src/output.css --watch

Done!!