Scribd
Upload
15 views2 pages

Add Tailwind in React

This document provides a step-by-step guide to adding Tailwind CSS to a Vite + React project. It includes instructions for installing Tailwind and its dependencies, configuring the Tailwind settings, adding Tailwind directives to CSS, importing the CSS into the app, and testing the setup with a sample component. The steps ensure that Tailwind CSS is properly integrated and functional within the React application.

Uploaded by

rohansain.mca
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views2 pages

Add Tailwind in React

This document provides a step-by-step guide to adding Tailwind CSS to a Vite + React project. It includes instructions for installing Tailwind and its dependencies, configuring the Tailwind settings, adding Tailwind directives to CSS, importing the CSS into the app, and testing the setup with a sample component. The steps ensure that Tailwind CSS is properly integrated and functional within the React application.

Uploaded by

rohansain.mca
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Add Tailwind CSS to Vite + React

📁 Make sure you’re inside your project folder:

cd E:/study/code it/web/frontend/react/E-commerce/test-app

🔧 Step 1: Install Tailwind and dependencies

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

This will create:

 [Link]

 [Link]

Step 2: Configure [Link]

Open [Link] and set the content option to scan your files:

/** @type {import('tailwindcss').Config} */

export default {

content: [

"./[Link]",

"./src/**/*.{js,ts,jsx,tsx}",

],

theme: {

extend: {},

},

plugins: [],

🎨 Step 3: Add Tailwind directives to CSS


Open src/[Link] and replace everything with:

@tailwind base;

@tailwind components;

@tailwind utilities;

📥 Step 4: Import the CSS in your app

Make sure src/[Link] includes:

import './[Link]';

Usually it's already there in the default template.

🧪 Step 5: Test Tailwind

Edit src/[Link] like this:

function App() {

return (

<div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-


purple-500 to-pink-500 text-white">

<h1 className="text-4xl font-bold">🚀 Tailwind + React + Vite!</h1>

</div>

);

export default App;

You might also like