Setting up Tailwind CSS in React Vite Project

Tailwind CSS is a utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-built, utility-based classes, enabling rapid and efficient design and styling of web interfaces.

Step 1 - Create a React Vite Project

First, create a new Vite project with the React template using the following command:

npx create-vite my-react-tailwind --template react
cd my-react-tailwind

Step 2 - Install Tailwind css and dependencies

Install Tailwind CSS and its dependencies (PostCSS and Autoprefixer) using npm:

npm install tailwindcss postcss autoprefixer

Step 3 - Initialize tailwind CSS

Run the Tailwind CSS initialization command to create the necessary configuration files:

npx tailwindcss init -p

This will create a tailwind.config.js file and a postcss.config.js file.

Step 4 - Configure postcsss.config.js

Open the postcss.config.js file and ensure it includes the tailwindcss and autoprefixer plugins:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Step 5 - Configuring tailwind.config.js file

Customize Tailwind CSS settings by modifying the tailwind.config.js file according to your requirements.

Step 6 - Import Tailwind CSS in your CSS or Javascript

Import Tailwind CSS in your styles or JavaScript file to make the styles available:

// src/main.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Step 7 - setting up content attribute in tailwind.config.js

In the given Tailwind CSS configuration, the content property specifies the files that Tailwind CSS should analyze and generate styles for. Let's break down the content part:

content: ["./src/**/*.{js,jsx,ts,tsx}"],

The content property is an array that contains a single glob pattern: "./src/**/*.{js,jsx,ts,tsx}". This pattern is used to match files in the src directory and its subdirectories based on certain file extensions: .js, .jsx.ts, and .tsx.

Here's what the glob pattern ./src/**/*.{js,jsx,ts,tsx} means:

./src: This specifies the root directory for searching files.
/**/: This matches any number of subdirectories recursively.
.{js,jsx,ts,tsx}: This matches any file with extensions .js, .jsx, .ts, or .tsx.

So, the content property instructs Tailwind CSS to process and generate styles for all JavaScript and TypeScript files (*.js, *.jsx, *.ts, *.tsx) found in the src directory and its subdirectories.

Step 8 - Import the CSS into your React app

// src/main.jsx (or main.js)
import React from 'react';
import ReactDOM from 'react-dom';
import './main.css';
import App from './App';

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

Step 9 - Start the development server

The final and most important to start the react project and import some tailwind classes so that you can confirm tailwind CSS is working fine

npm run dev

Step 10 - Importing tailwind component

Import the given code or you can use some tailwind classes which you can see from the tailwind docs. Paste this snippet to the app.js file in React project

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="https://play-lh.googleusercontent.com/9AZOTXU_CpreTFAXUPAmJNkm8VGCb1C90fjJ9pHGcVmpGMDSTq3cUbaQJdBT9Tdp9A" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>

Here is the code Repo link check it out Github

Jayant Verma's Blog