💨 Using Tailwind CSS in React

Tailwind CSS is a utility-first CSS framework that lets you build custom designs quickly and consistently by applying pre-defined utility classes directly in your markup.

⚙️ 1. Installation (Vite Example)


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

Then configure tailwind.config.js:


// tailwind.config.js
content: ["./index.html", "./src/**/*.{js,jsx}"],
theme: {
  extend: {},
},
plugins: [],

🎨 2. Add Tailwind Directives

In your index.css or App.css, include:


@tailwind base;
@tailwind components;
@tailwind utilities;

🧪 3. Example Usage


function Button() {
  return (
    <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
      Click Me
    </button>
  );
}

🌙 4. Enable Dark Mode

In tailwind.config.js:


darkMode: 'class',

Then toggle a dark class on the <html> or <body> element to switch themes.

✅ 5. Why Tailwind?

No need to name classes or write custom CSS
Responsive design built-in
Great developer experience
Highly customizable via config

← Previous: CSS Modules Next: Styled Components →