Problem Installing TailwindCSS with Vite

Tailwind CSS version 4 is finally here, and it’s packed with incredible updates and optimizations that make it even more exciting to use. If you’re looking to install this latest version in a React project using Vite, you’re in the right place! In this guide, I’ll walk you through the steps to ensure you get everything set up correctly, so you can start building beautiful UIs with Tailwind CSS.

Prerequisites: Setting Up Your Environment

Before diving into the installation process, it’s essential to have a few tools ready. You’ll need:

Node.js: Make sure you have Node.js installed. If you haven’t done it yet, head over to Node.js to download and install it for free.

To check if Node.js is already installed, open your terminal and type:
node -v

Now, create the Vite project by executing the following command:
npm create vite@latest my-react-app -- --template react

This command creates a new folder named my-react-app with a React template. After the project is created, navigate into the newly created folder:
cd my-react-app

Now, you can open this folder in your code editor. If you’re using Visual Studio Code, simply run:
code .

Step 2: Install Tailwind CSS

With your project set up, it’s time to install Tailwind CSS as a Vite plugin. In your terminal, run the following command:
npm install -D tailwindcss

This command installs Tailwind CSS as a development dependency. Once installed, check your package.json file to confirm that Tailwind CSS appears in your dependencies.

Step 3: Configure the Vite plugin

The next step is to add the @tailwindcss/vite plugin to your Vite configuration.
Update your vite.config.ts file as below.

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
 
export default defineConfig({
plugins: [
tailwindcss(),
],
})

Step 4: Import Tailwind CSS in Your Stylesheet

To use Tailwind CSS in your project, you need to include its directives in your CSS file. Open the src/index.css file and add the following line at the top:
@import "tailwindcss";

Step 5: Start the Development Server

Now that everything is set up, it’s time to start your development server. In your terminal, run:
npm run dev

This command will start the Vite development server, and you should see output indicating that your app is running. Open your browser and go to http://localhost:5173 to view your application.

Step 6: Testing Your Tailwind CSS Setup

To confirm that Tailwind CSS is working correctly, you can add some Tailwind classes to your React components. Open the src/App.jsx file and modify < h1 > tag with className text-red-800 and Save the file and check your browser. You should see a red heading that says “Hello, Tailwind CSS!” This means that Tailwind CSS is successfully integrated into your project.

Conclusion

Congratulations! You’ve successfully installed Tailwind CSS version 4 and set it up with a React project using Vite. With its utility-first approach, you can now start building stunning UIs quickly and efficiently.

If you’re interested in exploring more about Tailwind CSS, don’t hesitate to check out the official documentation on Installing Tailwind CSS with Vite – Tailwind CSS. Happy coding!

Also Read:

React Architecture Patterns