Udemezue John

Posted on Mar 11

How To Add Tailwind CSS In React JS and Vite

#webdev #programming #javascript #beginners

Introduction

If you're building a React app with Vite and want to style it quickly and efficiently, Tailwind CSS is a great choice.

It lets you write clean and minimal CSS while keeping your design flexible and responsive.

But if you’re new to Tailwind or Vite, setting things up might seem confusing at first.

This guide will walk you through adding Tailwind CSS to a React app created with Vite.

Why Use Tailwind CSS With React and Vite?

1. Faster Development

Tailwind’s utility-first approach means you don’t have to write custom CSS for every component. You apply styles directly in your JSX, making development much faster.

2. Highly Customizable

With Tailwind, you can easily modify colors, spacing, typography, and more by tweaking the configuration file.

3. Optimized for Performance

Tailwind removes unused styles in production, which helps keep your CSS file small and your app fast.

4. Vite Makes Everything Faster

Vite is a modern build tool that’s much faster than traditional tools like Create React App. It gives you instant hot reloads and builds your project quickly.

Setting Up Tailwind CSS in a React + Vite Project

Let’s go step by step and add Tailwind CSS to a new React project created with Vite.

Step 1: Create a New Vite + React Project

First, open a terminal and run:

npm create vite@latest my-tailwind-app --template react

This command:

Creates a new project folder named my-tailwind-app
Sets up Vite with React

Now, navigate into your project:

cd my-tailwind-app

Then install dependencies:

npm install

Step 2: Install Tailwind CSS

Now, install Tailwind and its required dependencies:

npm install -D tailwindcss postcss autoprefixer

After that, generate the Tailwind configuration files:

npx tailwindcss init -p

This creates two files:

tailwind.config.js – where you configure Tailwind
postcss.config.js – required for processing Tailwind styles

Step 3: Configure Tailwind to Work With React

Open tailwind.config.js and update the content array to include all the files where Tailwind classes might be used:

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

This ensures Tailwind scans your JSX and extracts only the styles you use.

Step 4: Add Tailwind’s Base Styles

Next, open src/index.css (or create it if it doesn’t exist) and add the following:

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

This includes Tailwind’s base styles, component classes, and utility classes.

Step 5: Use Tailwind Classes in React

Now, let’s use Tailwind in a React component. Open src/App.jsx and update it:

function App() {
  return (
    <div className="flex flex-col items-center justify-center h-screen bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600">Hello, Tailwind!</h1>
      <p className="mt-4 text-gray-700">Tailwind CSS is working in Vite!</p>
    </div>
  );
}

export default App;

Step 6: Start the Development Server

Run your project to see Tailwind in action:

npm run dev

Your browser should open at http://localhost:5173, showing the styled text.

Additional Tailwind Features

Once Tailwind is working, you can explore:

1. Customizing the Theme

Modify tailwind.config.js to add your own colors, fonts, and spacing.

Example:

theme: {
  extend: {
    colors: {
      primary: '#ff6347',
    },
  },
}

Now, you can use bg-primary for a background color.

2. Using Plugins

Tailwind has official plugins for forms, typography, and animations.

Install them with:

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

Then, enable them in tailwind.config.js:

plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
],

3. Optimizing for Production

Tailwind automatically removes unused styles when you build your project with:

npm run build

FAQs

1. Why use Vite instead of Create React App?

Vite is much faster. It uses ES modules and has near-instant hot reload, making development smoother.

2. Do I need to install Tailwind for every project?

Yes, Tailwind is project-specific, so you need to install it for each new project.

3. How do I use Tailwind in TypeScript projects?

Follow the same setup. If you use TypeScript, make sure your files end in .tsx instead of .jsx.

4. How do I deploy a Vite + Tailwind project?

Run npm run build, then deploy the dist folder using services like Netlify or Vercel.

Further Resources

Conclusion

Adding Tailwind CSS to a React app with Vite is simple and makes styling much easier. You get fast development, a small CSS footprint, and full control over design.

What’s the first project you’re going to build with Tailwind CSS and React?

DEV Community