Mahek

Integrate Tailwind CSS into your React project with Vite

Mahek Gor's photo
Mahek Gor
·

2 min read

In this blog, we will discuss how you can integrate Tailwind CSS into you React Project with Vite. First if you want to create a react project with vite, follow the below steps in command prompt:

mkdir your_folder_name
cd your_folder_name
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

Now you have your react app and you can make components by creating a components folder inside your src folder and start building you project. Now let's integrate Tailwind CSS into your react project.

First, you need to install Tailwind CSS and configure it in your project:

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

After successfully executing above both commands you should be able to see the following output:

npm install -D tailwindcss postcss autoprefixer

added 82 packages, and audited 377 packages in 58s

128 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npx tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

Now if you look at your folder structure, you will be able to see two new files: postcss.config.js and tailwind.config.js.

Update the tailwind.config.js file to include the paths to your template files.

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

  "files.associations": {
    "*.css": "tailwindcss"
  }
}

Add Tailwind's base, components, and utilities styles to your index.css.

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

Below should be your content for `postcss.config.js`:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

The last step is to include "index.css" file into your main.jsx file:

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

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

That's it ! Now Tailwind css is now integrated with your React Project with Vite. Start Building Components and create your project with Tailwind CSS.
For more information regarding Tailwind CSS you can refer the official documentation https://tailwindcss.com/docs/installation

Tailwind CSSviteReact