Installing Tailwind with Vite

Adding Tailwind to a Vite project is a standard 3-step process. If you already have your React app running from our previous Vite Setup guide, you are ready to go!

Step 1: Install via Terminal

Open your terminal in your project's root folder and run these two commands. This installs Tailwind and its "helpers" (PostCSS and Autoprefixer) which make sure your CSS works on all browsers.

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

What just happened?

Two new files appeared in your folder:

1. tailwind.config.js: The "Brain" of your styles.
2. postcss.config.js: The "Translator" that helps browsers understand Tailwind.

Step 2: Configure Your Paths

We need to tell Tailwind which files it should look at to find your CSS classes. Open tailwind.config.js and update the content section:

tailwind.config.js

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

Step 3: Add the Directives

Now, we need to inject Tailwind's "DNA" into your CSS.

1. Open your src/index.css file.
2. Delete everything inside it.
3. Paste these three "Directives" at the very top:

src/index.css

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

The "Hello Tailwind" Test

Let's make sure everything is working. Open your App.jsx and replace the code with this:

App.jsx

function App() {
  return (
    <div className="flex h-screen items-center justify-center bg-blue-100">
      <h1 className="text-4xl font-bold text-blue-600 underline">
        Tailwind is Working!
      </h1>
    </div>
  )
}

export default App

Check your browser:

• Is the background light blue? (bg-blue-100)
• Is the text large and bold? (text-4xl font-bold)
• Is everything centered? (flex justify-center)

If yes, congratulations! You just styled a page without writing a single line of traditional CSS.

Try it Yourself!

Live Editor

function App() {
  return (
    <div className="flex h-screen items-center justify-center bg-blue-100">
      <h1 className="text-4xl font-bold text-blue-600 underline">
        Tailwind is Working!
      </h1>
    </div>
  )
}

Result

Loading...

Summary Checklist

• I installed the 3 core packages via NPM.
• I initialized the config files.
• I pointed Tailwind to my src folder.
• I added the @tailwind directives to my CSS file.

Extension Recommendation

If you use VS Code, search for the extension "Tailwind CSS IntelliSense". It will give you "Autocomplete" suggestions as you type, so you don't have to memorize every class name!