Vite with Tailwind CSS: Setup and Purge Config (2026)

Vite with Tailwind CSS: Setup and Purge Config

Vite’s lightning-fast dev server and build times are a game-changer, but getting Tailwind CSS to play nice, especially with its purging mechanism, can feel like a puzzle.

Here’s how to get them working together smoothly, and crucially, how to configure Tailwind’s purge to only include your actual code.

The Setup

First, let’s spin up a new Vite project. If you don’t have Vite installed globally, you can do it via npm or yarn:

npm create vite@latest my-tailwind-app --template react
# or
yarn create vite my-tailwind-app --template react

Navigate into your new project directory:

cd my-tailwind-app

Now, install Tailwind CSS and its peer dependencies:

npm install -D tailwindcss postcss autoprefixer
# or
yarn add -D tailwindcss postcss autoprefixer

Next, generate Tailwind’s configuration files:

npx tailwindcss init -p

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

Configuring Tailwind

Open tailwind.config.js. This is where we tell Tailwind which files contain our class names so it can purge unused styles during the build. The content array is key here.

For a typical React project with Vite, you’ll want to include your index.html and all your .jsx and .tsx files.

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

• ./index.html: This is essential because Vite uses this file as the entry point, and you might have utility classes directly in your index.html.
• ./src/**/*.{js,ts,jsx,tsx}: This glob pattern tells Tailwind to look for class names in all JavaScript, TypeScript, JSX, and TSX files within the src directory and its subdirectories.

Adding Tailwind to your CSS

You need to tell your main CSS file where to inject Tailwind’s styles. In a Vite project, this is typically src/index.css.

Add the following directives to the top of src/index.css:

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

• @tailwind base;: Injects Tailwind’s base styles, which reset default browser styles and provide a clean slate.
• @tailwind components;: Injects Tailwind’s component classes, which are often used for more complex UI elements.
• @tailwind utilities;: Injects Tailwind’s utility classes, like text-center, bg-blue-500, etc.

Importing your CSS

Finally, make sure your main CSS file is imported into your application’s entry point, usually src/main.jsx (or src/main.tsx):

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css' // <-- Make sure this line is present

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Running the Dev Server

Now you can start the Vite development server:

npm run dev
# or
yarn dev

You should see Vite’s output, indicating the dev server is running. You can now start adding Tailwind classes to your components, and they should be applied.

The Purge Configuration in Action

The magic of Tailwind’s purging happens during the build process (when you run npm run build or yarn build). Vite, using PostCSS and Tailwind’s configuration, will scan all the files specified in your content array. It looks for strings that match Tailwind’s utility class patterns. Any class found in your code is kept; any that isn’t found is stripped out of the final CSS bundle.

This is critical for performance, as it ensures your production CSS file is as small as possible, containing only the styles your application actually uses.

Consider this App.jsx component:

// src/App.jsx
function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600 underline">
        Hello Vite + Tailwind!
      </h1>
    </div>
  )
}

export default App

When you run npm run build, Tailwind will detect min-h-screen, bg-gray-100, flex, items-center, justify-center, text-4xl, font-bold, text-blue-600, and underline. These will be included in your production CSS. If you had a class like text-red-500 in your tailwind.config.js but never used it in your content files, it would be omitted from the final build.

The content array is the single most important part of configuring Tailwind for production. If it’s too broad (e.g., *.html), you might include generated or third-party HTML that pulls in unwanted styles. If it’s too narrow, you’ll miss classes that are used, and they won’t be present in your final CSS. The glob patterns index.html and src/**/*.{js,ts,jsx,tsx} are generally a safe and effective starting point for Vite projects.

If you’re using a framework like Svelte or Vue, you’d adjust the content array accordingly (e.g., src/**/*.{svelte,js,ts} or src/**/*.{vue,js,ts}).

The next step after a successful setup is often optimizing the build process further, perhaps by exploring advanced Tailwind CSS features like custom themes or plugins.