Install ReactJS
npm create vite@latest my-first-react-app -- --template react
cd my-first-react-app
Install Tailwind
npm install -D tailwindcss@latest @tailwindcss/vite@latest
Add Tailwind CSS to Vite config
import { defineConfig } from 'vite'
import tailwindcss from "@tailwindcss/vite";
import react from '@vitejs/plugin-react'
// <https://vite.dev/config/>
export default defineConfig({
plugins: [
tailwindcss(),
react()
],
})
Add the following at the top of src/index.css
@import "tailwindcss";
To test if it’s working
<div className="bg-blue-500 text-white p-4 rounded-lg">
<h1 className="text-2xl font-bold">Tailwind Test</h1>
<p className="mt-2">If this is blue with white text, Tailwind is working!</p>
</div>
(Optional) Install DaisyUI