Tailwind CSS

🎨 What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs. Instead of writing custom CSS, you compose styles directly in your HTML using pre-built classes.


# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Tailwind is included by default in new Next.js projects

Key Tailwind Features

⚡

Utility Classes

Pre-built classes for every CSS property

<div className="p-4 bg-blue-500">
  Content
</div>

📱

Responsive

Mobile-first responsive design

<div className="text-sm md:text-lg">
  Responsive Text
</div>

🎭

States

Hover, focus, and active states

<button className="hover:bg-blue-700">
  Hover Me
</button>

🌙

Dark Mode

Built-in dark mode support

<div className="bg-white dark:bg-gray-800">
  Content
</div>

🔹 Tailwind Configuration

Configure Tailwind CSS for your Next.js project. The configuration file allows you to customize colors, spacing, fonts, and other design tokens to match your brand.

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        secondary: '#10B981',
      },
    },
  },
  plugins: [],
}

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

🔹 Basic Styling

Apply common styles using Tailwind utility classes. These classes cover padding, margin, colors, typography, and more, eliminating the need to write custom CSS for basic styling.

// components/Card.js
export default function Card() {
  return (
    <div className="p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-2xl font-bold text-gray-800 mb-2">
        Card Title
      </h2>
      <p className="text-gray-600">
        This is a card component styled with Tailwind CSS.
      </p>
    </div>
  )
}

Output:

Card Title

This is a card component styled with Tailwind CSS.

🔹 Responsive Design

Create responsive layouts that adapt to different screen sizes. Tailwind uses mobile-first breakpoints, so styles apply to small screens by default and scale up for larger devices.

// components/ResponsiveGrid.js
export default function ResponsiveGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div className="p-4 bg-blue-100 rounded">Item 1</div>
      <div className="p-4 bg-blue-100 rounded">Item 2</div>
      <div className="p-4 bg-blue-100 rounded">Item 3</div>
    </div>
  )
}

// Breakpoints:
// sm: 640px   (small devices)
// md: 768px   (tablets)
// lg: 1024px  (laptops)
// xl: 1280px  (desktops)
// 2xl: 1536px (large screens)

🔹 Flexbox Layout

Build flexible layouts with Tailwind's flexbox utilities. Flexbox makes it easy to align items, distribute space, and create responsive navigation bars and card layouts.

// components/Navbar.js
export default function Navbar() {
  return (
    <nav className="flex items-center justify-between p-4 bg-gray-800">
      <div className="text-white text-xl font-bold">
        Logo
      </div>
      <div className="flex gap-4">
        <a href="#" className="text-white hover:text-gray-300">Home</a>
        <a href="#" className="text-white hover:text-gray-300">About</a>
        <a href="#" className="text-white hover:text-gray-300">Contact</a>
      </div>
    </nav>
  )
}

🔹 Buttons and Forms

Style interactive elements like buttons and form inputs. Tailwind provides utilities for states like hover, focus, and disabled to create polished user interfaces.

// components/LoginForm.js
export default function LoginForm() {
  return (
    <form className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg">
      <h2 className="text-2xl font-bold mb-4">Login</h2>
      
      <input
        type="email"
        placeholder="Email"
        className="w-full px-4 py-2 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
      
      <input
        type="password"
        placeholder="Password"
        className="w-full px-4 py-2 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
      
      <button
        type="submit"
        className="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
      >
        Sign In
      </button>
    </form>
  )
}

🔹 Dark Mode

Implement dark mode with Tailwind's dark variant. Add the dark: prefix to any utility class to apply styles when dark mode is active in your application.

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media'
  // ... rest of config
}

// components/DarkModeCard.js
export default function DarkModeCard() {
  return (
    <div className="p-6 bg-white dark:bg-gray-800 rounded-lg">
      <h2 className="text-gray-900 dark:text-white text-xl font-bold">
        Dark Mode Card
      </h2>
      <p className="text-gray-600 dark:text-gray-300">
        This card adapts to dark mode automatically.
      </p>
    </div>
  )
}

🔹 Custom Components

Extract repeated patterns into reusable components. While Tailwind encourages utility classes, you can create custom components for complex patterns used throughout your application.

// components/Button.js
export default function Button({ children, variant = 'primary' }) {
  const baseStyles = "px-4 py-2 rounded-lg font-semibold transition-colors"
  
  const variants = {
    primary: "bg-blue-500 text-white hover:bg-blue-600",
    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
    danger: "bg-red-500 text-white hover:bg-red-600"
  }
  
  return (
    <button className={`${baseStyles} ${variants[variant]}`}>
      {children}
    </button>
  )
}

// Usage
<Button variant="primary">Click Me</Button>
<Button variant="danger">Delete</Button>