Utility-first CSS framework.

• Instead of writing custom CSS, use pre-defined classes in HTML to style elements.
• Highly customizable and doesn’t come with default components, unlike Bootstrap.
• Works perfectly with className in JSX.

Installing Tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# will create tailwind.config.js and postcss.config.js

Include Tailwind in CSS

styles/globals.css

@tailwind base;        /* resets + base styles */
@tailwind components;  /* reusable components */
@tailwind utilities;   /* all utility classes */

Tailwind Config (tailwind.config.js)

• Customize colors, spacing, fonts, breakpoints, and more

export default {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: '#1c64f2',
      },
      spacing: {
        128: '32rem',
      },
    },
  },
  plugins: [],
}

How Tailwind Works

1. Utility-first approach:
   • Every class does one thing: margin, padding, color, font-size, etc.

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind
</div>

<!-- bg-blue-500 → background color -->
<!-- text-white → text color -->
<!-- p-4 → padding -->
<!-- rounded-lg → border-radius -->