How to Add Tailwind CSS 4.0 to a React Vite Project

Introduction

In this tutorial, we will learn how to add Tailwind CSS 4.0 to a React Vite project.

Starting a New React Vite Project

1. Start a new React Vite project.(If you already have a project, you can skip this step)
   • Replace my-react-vite-app with the name of your project.

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

1. Select the React from the template options (with the “up or down” Arrow key on your keyboard) and press Enter.

2. Select the JavaScript from the language options (with the “up or down” Arrow key on your keyboard) and press Enter.
3. Change the directory to the project directory.(the 3 commands are also already written in the terminal after the project is created as shown in the picture below)

Next Commands after vite has set up the project

• based on the image above, the next commands to run are:
  • cd my-react-vite-app to change the directory to the project directory.

cd my-react-vite-app

• npm install to install the dependencies.

npm install

• finally npm run dev to start the development server. BUT before running the command, I will like to add Tailwind CSS 4.0 to the project first.

Adding Tailwind CSS 4.0 to the React Vite Project

Note: The following steps are for adding Tailwind CSS 4.0 to a React Vite project

• They can be found on the official TailwindCSS website

1. Install Tailwind CSS 4.0 and its dependencies.

npm install tailwindcss @tailwindcss/vite

1. Configure TailwindCss in the vite.config.js file.
   • import tailwindcss from @tailwindcss/vite at the top of the file.
   • Add the tailwindcss plugin to the plugins array.

// add this line at the top of the file
import tailwindcss from "@tailwindcss/vite";

// add the tailwindcss plugin to the plugins array
tailwindcss(),

• The vite.config.js file should look like this:

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

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

1. Import the Tailwind CSS styles in the index.css file.

@import "tailwindcss";

1. Write the Tailwind CSS classes in your component e.g in App.jsx

function App() {
  return (
    <>
      <h1 className="text-3xl font-bold underline bg-red-600">Hello world!</h1>
    </>
  );
}

export default App;

1. Start the development server.

npm run dev

• The development server will start and you can see the Tailwind CSS styles applied to your project.
• This is what I see in my browser after running the development server. Do you see the red background color and the underline on the text?

UI with Tailwindcss Styling