Install Tailwind CSS with Vite using React in 2 minutes

Looking for a fast and easy way to install Tailwind CSS with Vite in your React project?

In this article, we'll see how to get started with Tailwind CSS with Vite in just 2 minutes using both NPM and Yarn.

Step 1: Create a new React project

Open your terminal and run the following command:

npm create vite@latest tailwind-project -- --template react

Or If you're using Yarn,

yarn create vite tailwind-project --template react

Step 2: Install Tailwind CSS and its dependencies

Navigate to the project directory and install Tailwind CSS and its dependencies using NPM:

npm install -D tailwindcss postcss autoprefixer

or Yarn,

yarn add -D tailwindcss postcss autoprefixer

Step 3: Generate the Configuration Files

This following command will generate two configuration files, tailwind.config.js andpostcss.config.js. These are used to configure and customize your project's settings.

npx tailwindcss init -p

with Yarn,

yarn tailwindcss init -p

Step 4: Configure your source paths

Next, go to tailwind.config.js file and replace the code with the following:

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

Step 5: Add Tailwind Directives to your CSS

Open your ./src/index.css file, remove the default styling and replace the code with:

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

Tailwind CSS is now installed..!!

Step 6: Start using Tailwind

Let's check if everything is working. Go to app.jsx and try adding Tailwind classes to HTML elements in your project. For example,

import React from 'react'

function App() {
  return (
      <div className='h-screen flex justify-center items-center'>
          <h1 className='text-yellow-400 text-5xl font-extrabold'>Tailwind is Awesome!</h1>
      </div>
  )
}

export default App

Step 7: Start Your Vite Server

In your terminal, run the command:

npm run dev

or,

yarn run dev

And we have successfully executed the code.

Let's checkout the outcome:

Indeed it is. 😉

Conclusion

There you go! Now you know how to install Tailwind CSS with Vite in a React project.

React, Vite, and Tailwind together offer a powerful combination for building high-performing and visually stunning web applications.

Vite's fast development cycle, combined with flexible UI components of React and the customizable styling options of Tailwind makes this trio a match made in heaven.

References

• Tailwindcss

• Freecodecamp

Thank's for taking the time to read this blog. Hope you found it informative and enjoyable!

Do let me know your thoughts and feel free to connect with me on Twitter.

Catch you guys on the next one. Cheers .. ✌️