How to Install Tailwind CSS in React Vite?

This guide on how to install Tailwind CSS in React Vite aims to guide developers through the complete setup of Tailwind CSS in a React project using Vite, ensuring a seamless development environment that leverages:

• Tailwind’s utility-first CSS framework for rapid UI styling,
• React’s component-based architecture for scalable frontend development, and
• Vite’s modern build tool for lightning-fast development and production builds.

Whether you’re a beginner or an experienced developer, this guide aims to help you:

• Understand the tools involved (Tailwind, React, Vite),
• Set up your project step-by-step without confusion,
• Unlock Tailwind’s potential within your React ecosystem,
• Build and scale responsive, performant interfaces quickly and efficiently.

Prerequisites

Before we begin, make sure you have the following in place:

• Node.js and npm are installed – You can verify by running node -v and npm -v in your terminal. If you don’t have these, download and install Node.js from the official website.
• Basic knowledge of React and CSS – You don’t need to be an expert, but understanding how to create a React app and the basics of CSS will help. Tailwind is essentially CSS under the hood, so knowing basic CSS concepts is useful.

With these prerequisites ready, we can now dive into the setup.

How to Install Tailwind CSS in React Vite?

In this step-by-step tutorial, we’ll learn how to install Tailwind CSS in React Vite. We will use JavaScript (JS) (not TypeScript) for all code examples. By the end, you’ll have Tailwind integrated into your React app, and we’ll also show how to add official Tailwind plugins (like Typography and Forms) to enhance your setup.

Tailwind CSS and Vite make for a powerful combination in modern web development, offering utility-first styling with lightning-fast bundling for an efficient developer experience. Tailwind CSS lets you style your application using small, reusable utility classes directly in your markup, eliminating the need for writing custom CSS for every component.

Vite, on the other hand, is a build tool that provides near-instant startup and hot-reloading, making development snappy and smooth. Combining the two means you can rapidly build and style your React app with minimal configuration.

Now, let’s get started with the detailed tutorial on how to install Tailwind CSS in React Vite.

1st Step: Create a New Vite + React Project

First, we need a new React project set up with Vite. Vite offers a project scaffolding tool that makes this easy:

Run the Vite create command:

• Open your terminal, navigate to the directory where you want your project, and run the following command to scaffold a React app with Vite:

npm create vite@latest my-project -- --template react 

• This will create a new folder my-project With a fresh React app configured for Vite. (If you omit the project name, the tool will prompt you for it. You can also run npm init vite@latest and follow the interactive prompts to choose React and JavaScript as your template options.)

Install dependencies and start the dev server:

• Navigate into the project directory and install the dependencies, then start the development server

cd my-project
npm install
npm run dev

• Vite will install the necessary packages and launch a dev server (by default at localhost:5173). Open this URL in your browser, and you should see the default Vite/React welcome page, confirming the project is set up correctly.

At this point, we have a working React app running with Vite. Next, we’ll add Tailwind CSS to the project.

2nd Step: Install Tailwind CSS and PostCSS Dependencies

Tailwind CSS requires a couple of build tool dependencies to work with your project. We’ll need Tailwind CSS itself, plus PostCSS and Autoprefixer (which Tailwind uses under the hood for processing your CSS). Install these as development dependencies by running:

npm install -D tailwindcss postcss autoprefixer

This single command installs:

• tailwindcss – The Tailwind CSS framework.
• postcss – A CSS processing tool that Tailwind uses to transform your Tailwind classes into actual CSS styles.
• autoprefixer – A PostCSS plugin that automatically adds vendor prefixes (like -webkit- or -moz-) to your CSS, ensuring better browser support.

After running the install command, check your package.json to confirm these are listed under devDependencies (the version numbers may vary). With Tailwind and its peer dependencies installed, we can proceed to initialize Tailwind in our project.

3rd Step: Generate and Configure Tailwind Config Files

Next, we need to generate Tailwind’s configuration files and update them for our React project. Tailwind provides a CLI tool to initialize a default configuration.

Initialize Tailwind config:

• From your project root, run the init command with the PostCSS flag:

npx tailwindcss init -p 

• This creates two config files in your project’s root:
  • tailwind.config.js (or tailwind.config.cjs) – The Tailwind configuration file for customizing Tailwind’s setup.
  • postcss.config.js (or postcss.config.cjs): The PostCSS configuration file.

The -p flag in the command above instructs Tailwind to generate a PostCSS config as well. You should now see these files in your project.

Configure template paths in tailwind.config.js:

• Open the generated tailwind.config.js file. By default, it will have an empty content array. We need to tell Tailwind which files to scan for class names (this is crucial for Tailwind’s JIT engine to generate the necessary CSS and to purge unused styles in production). Update the content array to include the paths to all your HTML and JS files in the project:

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

• In the above configuration, we include the project’s index.html and all files in src/ (with .js, .jsx, .ts, or .tsx extensions) as sources for Tailwind to scan. Even if you are only using JavaScript, it’s fine to list the .ts and .tsx extensions – it won’t hurt, and it makes the config future-proof. This setup “tells Tailwind to scan your main HTML file and all files under src for Tailwind classes”, ensuring that any utility classes you use in those files will be included in the final CSS.

Check your PostCSS config: Open postcss.config.js.

• It should have been populated for you. Make sure it looks like this:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

• This configures PostCSS to use Tailwind and Autoprefixer as plugins. If, for some reason, your file is empty, you can copy the above into it. This file ensures that when Vite builds your CSS, it will run Tailwind and Autoprefixer on it.

At this stage, Tailwind is set up in the build configuration. Now we need to import Tailwind’s styles into our app’s CSS.

4th Step: Add Tailwind to Your CSS

Tailwind CSS works by injecting its styles (base, components, and utilities) into your project. To include Tailwind’s styles, you have to use special directives in a CSS file. Typically, the Vite React template includes a CSS file (e.g. src/index.css or src/App.css). We will use src/index.css for this purpose (if your project has a different main CSS file, you can use that instead).

Add Tailwind directives:

• Open src/index.css (or create it if it doesn’t exist). At the very top of this file, add the following three lines:

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

• These directives inject Tailwind’s base styles, component classes, and utility classes into your CSS, respectively. In other words:
  • @tailwind base – Imports Tailwind’s base styles (and any base styles from Tailwind plugins).
  • @tailwind components – Imports any pre-built component styles.
  • @tailwind utilities – Imports all the utility classes.

If the file had any existing CSS (like the default styling from Vite’s template), you can remove or comment it out, as Tailwind will be handling most of the styling now. Make sure these lines stay at the top of the file and are not nested in any selectors.

Import the CSS in your app:

• Ensure that your React app is loading this CSS file. In the Vite React template, the main JavaScript entry (likely src/main.jsx) usually already imports index.css. Open src/main.jsx and check for a line like:

import './index.css';

If it’s not there, add it to the top of the file. This import statement brings the Tailwind-enabled CSS into your React app, so Tailwind’s styles will be applied.

Now we have integrated Tailwind’s CSS into our application. The next step is to run the app and verify that Tailwind is working.

5th Step: Run and Verify the Tailwind Setup

With configuration in place, start the development server (if it’s not already running):

npm run dev

Vite will compile your assets, and Tailwind will generate the CSS for any classes it finds in your project’s files. Initially, you might not see any difference in the app’s appearance – that’s because we haven’t used any Tailwind classes in our components yet. Let’s change that to verify everything is working correctly.

Open src/App.jsx (the main React component in the default template). Inside the component’s return statement, replace the content with a simple element that uses Tailwind classes. For example, you can use a heading:

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

Here we added a <h1> With Tailwind utility classes: text-3xl (makes the text really large), font-bold (bold text), underline (underlined text), and text-center (centers the text). Once you save this file, your browser (at http://localhost:5173) should live-reload and display a big, bold, underlined heading saying “Hello world!” in the center of the page. If you see that, congratulations – Tailwind CSS is now working in your React app! You’ve effectively verified the setup by seeing Tailwind’s styles applied to an element.

(If you don’t see the styling applied, double-check the previous steps: ensure your files and paths tailwind.config.js are correct, the index.css has the Tailwind directives, and the CSS file is imported into your app. Common mistakes include a missing import or a typo in the content paths.)

6th Step: (Optional) Add Tailwind CSS Plugins (Typography & Forms)

One of the great advantages of Tailwind is its ecosystem of official plugins that add extra utility classes or pre-styled components for common needs. Two popular ones are the Typography and Forms plugins. These can add value if your project involves rich text content or form elements:

• Typography Plugin (@tailwindcss/typography): This plugin provides a set of pre-styled prose classes for beautifully formatted text content (like blog posts, articles, or markdown content). Using these classes, you can style long blocks of content with sensible typography defaults without handcrafting each style.
• Forms Plugin (@tailwindcss/forms): This plugin resets and improves the base styling of form elements (inputs, selects, textareas, checkboxes, etc.) so that they are easier to style with utility classes. It gives form elements a consistent, clean slate appearance across browsers, which you can then customize with Tailwind classes.

If your project would benefit from these, you can integrate them as follows:

Install the plugins via npm:

• In your project directory, run:

npm install -D @tailwindcss/typography @tailwindcss/forms

• This will download the Typography and Forms plugins and add them to your devDependencies.

Enable the plugins in the Tailwind config:

• Open your tailwind.config.js file again. Find the plugins array (which is currently empty in our config) and add the two plugins to the array:

module.exports = {
  // ... rest of config ...
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
}

• By adding these, Tailwind will include the plugins’ styles in addition to the default ones. After adding, your plugins array should list typography and forms (and you can add others in the future if needed).

Use the new utility classes: With the plugins enabled, you can start using their features.

For example:

• To style a block of HTML content with nice typography, wrap it in an element with the class prose (and optionally prose-lg, prose-xl for larger text, etc.) provided by the Typography plugin. This will automatically style headings, paragraphs, lists, quotes, and other elements inside that block with a clean, readable design.
• For forms, the plugin doesn’t require special classes in most cases – it automatically applies a base reset. Your form elements (like <input>, <select>, <textarea>) will now have a normalized style that’s easy to tweak with Tailwind classes. For instance, you can add classes like rounded-md or px-4 py-2 to inputs and trust that there aren’t strange default styles interfering. (If needed, the Forms plugin also provides some classes for additional control, as noted in its documentation.)

These plugins are entirely optional – if you don’t need them, you can skip this step. But they are great additions for many projects: the Typography plugin saves a ton of time when dealing with article or blog content, and the Forms plugin ensures your form elements look consistent and are simple to style with utilities. Both plugins are official and maintained by the Tailwind team, so they work seamlessly with Tailwind’s core.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that lets you style your web applications using predefined utility classes directly in your HTML or JSX. Instead of writing custom CSS, you compose styles by combining small, reusable classes like bg-blue-500, text-center, or p-4.

It encourages a component-friendly design system and eliminates the need for naming CSS classes or managing large stylesheets.

If you’re looking for a Tailwind Components library, then check out our Latest FlyonUI.

Also available in the pro version. It includes

• Tailwind CSS Blocks
• Tailwind Figma Design System
• Tailwind MCP
• Tailwind CSS templates

Check it out now!

What is Vite?

Vite is a fast and modern frontend build tool created by the team behind Vue.js. It offers an instant development server powered by native ES modules and lightning-fast hot module replacement (HMR). For React developers, Vite provides an alternative to Create React App (CRA) with significantly better performance.

It’s optimized for speed, modularity, and smooth DX (developer experience), especially when working with frameworks like React, Vue, and Svelte.

Benefits of Using Tailwind CSS with React + Vite

• Blazing Fast Development – Vite’s instant server start and HMR, paired with Tailwind’s utility classes, speed up the development workflow.
• Component-Friendly Styling – Tailwind pairs perfectly with React’s component-based architecture.
• No More CSS Bloat – Tailwind’s JIT mode generates only the CSS you use, keeping the final bundle size small.
• Consistent Design System – Tailwind encourages design consistency through a centralized config (tailwind.config.js).
• Easier Customization – Extend Tailwind’s default theme or add plugins like Typography and Forms with minimal setup.
• No Context Switching – Style directly in JSX without jumping to separate CSS files.
• Production-Ready Output – Vite builds your project with optimal performance and Tailwind purges unused CSS for production.

Other helpful guides to check:

• How to create a Tailwind marquee effect
• How to Integrate Tailwind with 11ty
• Nextjs 14 Tailwind 4 Config

Conclusion:

In this tutorial on how to install Tailwind CSS in React Vite, we’ve set up a React project with Vite and integrated Tailwind CSS step by step. We started by creating a new Vite React app, then installed Tailwind CSS along with PostCSS and Autoprefixer.

We initialized Tailwind’s config and configured it to scan our React files for classes, added the required @tailwind directives to our CSS, and imported it into our app. Finally, we ran the project to verify that Tailwind was working by applying some utility classes, and we even explored adding official plugins like Typography and Forms to extend Tailwind’s capabilities.

You now have a modern development environment where Tailwind CSS is fully wired up with React and Vite. This setup gives you the best of both worlds: a fast, hot-reloading dev server with Vite, and a utility-first CSS workflow with Tailwind that greatly speeds up styling and keeps your CSS maintainable.

From here, you can start building out your React application’s UI using Tailwind’s utility classes for rapid design, and customize the setup further by adjusting the Tailwind config (for example, adding custom themes or enabling more plugins) as needed.

Happy coding, and enjoy your newly styled React app with Tailwind CSS!