How to integrate Tailwind CSS with Vite

Introduction

In front-end development today, creating visually appealing and responsive web applications is crucial. Tailwind CSS, a utility-first CSS framework, provides a comprehensive set of pre-defined classes that can be easily integrated into your React applications. In this blog post, we'll explore step-by-step how to integrate Tailwind CSS into your React project using Vite, a fast and lightweight development server and build tool.

Step 1: Set up a new React project with Vite

To get started, make sure you have Node.js and npm (Node Package Manager) installed on your machine. To check if you have this installed, in your terminal run node -v or npm -v. If you do have it installed create a new Vite project by running the following command to create a new React project using Vite:

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

Step 2: Install Tailwind CSS dependencies

Next, navigate to your project directory and install the required dependencies. Run the following command to install Tailwind CSS and its PostCSS dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 3: Configure Tailwind CSS

After the installation is complete, navigate to the Tailwind CSS configuration file. In your project directory, go to a file named tailwind.config.js and add the following code:

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

Step 4: Add the Tailwind directives to your CSS

In your project directory, navigate to the ./src/index.css file. Open the file and add the following code:

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

Step 5: Start the development server

Finally, start the development server to see your Tailwind CSS integration in action. Run the following command:

npm run dev

Step 6: Start using Tailwind CSS in your App

Now, you can start building your React components and make use of the powerful utility classes provided by Tailwind CSS.

export default function App() {
  return (
    <h1 className="text-xl text-blue-500 font-bold text-center">
      Hello world!
    </h1>
  )
}

Your browser should update automatically. You can learn more about Tailwind class names here.

Conclusion

Integrating Tailwind CSS into your React application using Vite allows for efficient front-end development. By following the steps outlined in this blog post, you'll be able to set up Tailwind CSS in your React project and leverage its extensive collection of utility classes to create visually appealing and responsive user interfaces. Enjoy exploring the world of Tailwind CSS with Vite and have fun building amazing applications!

You can reach me on Twitter, LinkedIn and GitHub.