To install tailwind CSS with Vite, follow below given steps –
Step 1:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 2:
Place below given code in tailwind.config.js:
/** @type {import(‘tailwindcss’).Config} */
export default {
content: [
“./index.html”,
“./src/**/*.{js,ts,jsx,tsx}”,
],
theme: {
extend: {},
},
plugins: [],
}
Step 3:
Add below given code in index.css –
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 4:
npm run dev
Step 5:
Test CSS –
import React from ‘react’
const App = () => {
return (
<div>
<h1 className=’text-3xl text-red-600′>React Blog</h1>
</div>
)
}
export default App
Tutorial Video: How to install Tailwind CSS with Vite
