Tailwind CSS with Vite & React

The Modern Way: Tailwind CSS v4 and Vite

You're learning React and Tailwind at a great time. The latest versions have made the setup process much simpler than it used to be. Previously (with Tailwind v3), you had to manually install and configure several tools like postcss and autoprefixer to get everything working.

Now, with Tailwind CSS v4, there's an official plugin for Vite (@tailwindcss/vite) that handles almost all of this complexity for you. This means a faster, cleaner setup with fewer configuration files. We will be using this modern approach.

Step-by-Step Installation Guide

We'll follow a clear, five-step process to integrate Tailwind CSS into a React project. To get a complete overview first, you can read through this excellent and concise guide.

Now, let's execute each of those steps together with detailed explanations. If you prefer a visual walkthrough, the following video covers the same process.

Step 1: Create a New Vite + React Project

First, we need a fresh React project. Open your terminal, navigate to the directory where you store your projects, and run the following command:

npm create vite@latest

Vite will prompt you for a few details:

1. Project name: You can enter . to use the current directory or type a name like react-tailwind-project.
2. Select a framework: Choose React.
3. Select a variant: Choose JavaScript.

Once the project is created, navigate into its directory and install the initial dependencies:

cd react-tailwind-project  # or your chosen project name
npm install

Step 2: Install Tailwind CSS Packages

Next, we'll install Tailwind CSS itself and the official Vite plugin. These are installed as "dev dependencies" (using the -D flag) because they are tools needed for the development process, not for the final production application.

In your terminal, run:

npm install -D tailwindcss @tailwindcss/vite

• tailwindcss: This is the core Tailwind CSS library.
• @tailwindcss/vite: This is the magic plugin that integrates Tailwind into Vite's build process seamlessly. It handles compiling your utility classes into CSS without needing manual PostCSS configuration.

Step 3: Configure Vite to Use the Tailwind Plugin

Now we need to tell Vite to actually use the plugin we just installed. Open your project in your code editor and find the vite.config.js file at the root of your project.

You will modify it to look like this:

Here are the changes you need to make:

1. Import the Tailwind CSS plugin at the top of the file: import tailwindcss from '@tailwindcss/vite'
2. Add tailwindcss() to the plugins array, right after react().

Your final vite.config.js should look like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Step 4: Import Tailwind's Styles

The last configuration step is to tell your application to include Tailwind's stylesheets.

1. Navigate to src/index.css.
2. Delete all the existing boilerplate CSS in that file.
3. Add a single line at the very top:

@import "tailwindcss";

This one line is a directive that the @tailwindcss/vite plugin will find and replace with all the necessary Tailwind styles (base, components, and utilities) during the build process.

You should also clean up any unused imports. For example, in src/App.jsx, you can remove the import './App.css' line if it exists, as we will be styling everything from index.css and with utility classes.

Step 5: Verify Your Installation

Everything should now be configured. Let's start the development server to make sure it works.

In your terminal, run:

npm run dev

Vite will start the server and give you a local URL (usually http://localhost:5173). Open this in your browser. You should see the default Vite + React page, but with the default styling gone (it might look like plain HTML).

To confirm Tailwind is working, let's apply a utility class.

1. Open src/App.jsx.
2. Find the <h1> element.
3. Add a className attribute with some Tailwind classes. For example:

// inside src/App.jsx
function App() {
  return (
    <>
      <h1 className="text-3xl font-bold text-blue-600 underline">
        Hello Vite + React + Tailwind!
      </h1>
      {/* ... rest of the default code */}
    </>
  )
}

Save the file. If you look at your browser, the heading text should now be large, bold, blue, and underlined. If it is, congratulations! You have successfully set up Tailwind CSS.

If the styles don't apply, try stopping the development server (Ctrl + C) and restarting it (npm run dev). Also, double-check that you completed all the steps above, especially the changes to vite.config.js and index.css.

Conclusion

Well done! You have successfully set up a modern React development environment with Vite and Tailwind CSS. This is a powerful and popular stack that will serve you well as you build more complex applications.

Key Takeaways:

• The modern way to install Tailwind CSS in a Vite project uses the @tailwindcss/vite plugin, which simplifies the setup significantly.
• The process involves four main configuration steps:
  1. Install tailwindcss and @tailwindcss/vite as dev dependencies.
  2. Add the tailwindcss plugin to your vite.config.js.
  3. Replace the content of index.css with @import "tailwindcss";.
  4. Verify the setup by applying a utility class and checking the result in the browser.
• This setup eliminates the need for manual PostCSS and autoprefixer configuration for most common use cases.

Next Up:

Now that our project is set up, it's time for the fun part. In the next lesson, we will dive into the core of Tailwind: applying utility classes to style components efficiently. We'll learn how to think in terms of utilities and build a custom component from scratch.