Add Tailwind CSS to React with Vite

Tailwind CSS is a utility-first CSS framework that enables rapid UI development by providing a set of utility classes. Vite is a next-generation frontend tooling that offers a faster and leaner development experience for modern web projects. Integrating Tailwind CSS with a React project using Vite allows you to leverage the best of both worlds. This article will guide you through the process.

Setting Up a New Vite Project

First, let's set up a new React project using Vite.

Step 1: Create a New Vite Project

Open your terminal and run the following command to create a new Vite project:

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

Navigate to the project directory:

cd my-vite-react-app

Step 2: Install Dependencies

Install the necessary dependencies:

npm install

Installing Tailwind CSS

Next, let's install Tailwind CSS and set it up within our Vite project.

Step 1: Install Tailwind CSS

Run the following command to install Tailwind CSS and its peer dependencies:

npm install -D tailwindcss postcss autoprefixer

Step 2: Initialize Tailwind CSS

Initialize Tailwind CSS by creating the required configuration files:

npx tailwindcss init -p

This will create a tailwind.config.js and a postcss.config.js file in your project.

Step 3: Configure Tailwind CSS

Configure Tailwind to remove unused styles in production by specifying the paths to all of your template files in the tailwind.config.js file:

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

Step 4: Add Tailwind Directives

Add the Tailwind directives to your CSS file. Create a src/index.css file and include the following:

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Import the CSS File

Ensure that the index.css file is imported in your src/main.jsx file:

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Using Tailwind CSS in Your React Components

With Tailwind CSS set up, you can now start using its utility classes in your React components. Here’s an example of how to use Tailwind CSS in a simple React component.

Step 1: Create a Component

Create a new component file, src/components/HelloWorld.jsx, and add the following code:

// src/components/HelloWorld.jsx
import React from 'react';

const HelloWorld = () => {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-500">Hello, World!</h1>
    </div>
  );
};

export default HelloWorld;

Step 2: Use the Component in Your App

Modify src/App.jsx to include the new HelloWorld component:

// src/App.jsx
import React from 'react';
import HelloWorld from './components/HelloWorld';

function App() {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;

Running the Project

Now, let's run the project to see Tailwind CSS in action.

Step 1: Start the Development Server

In the project directory, run:

npm run dev

Step 2: View Your Application

Open your browser and navigate to the URL provided in the terminal (typically http://localhost:5173). You should see your "Hello, World!" message styled with Tailwind CSS.

Conclusion

Integrating Tailwind CSS with a React project using Vite is straightforward and enhances your development workflow. Tailwind's utility-first approach combined with Vite's fast build times and hot module replacement creates a powerful setup for building modern web applications. With these tools, you can quickly prototype and build responsive, aesthetically pleasing user interfaces.

Annuar