Tailwind CSS

Utility classes, responsive design, dark mode, and custom configuration.

Overview

Tailwind CSS is a utility-first CSS framework for rapid UI development.

Key Concepts

• Utility Classes — Single-purpose CSS classes
• Responsive Design — Mobile-first breakpoints
• Dark Mode — Built-in dark mode support
• Custom Config — Extend theme and plugins
• JIT Mode — Just-in-time CSS generation

Code Examples

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: '#0070f3',
        secondary: '#6c757d'
      }
    }
  }
};

// components/Hero.jsx
export default function Hero() {
  return (
    <div className="bg-gradient-to-r from-primary to-secondary text-white py-20">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl md:text-6xl font-bold mb-4">
          Welcome to Our Store
        </h1>
        <p className="text-xl mb-8 opacity-90">
          Find the best products at great prices
        </p>
        <button className="bg-white text-primary px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
          Shop Now
        </button>
      </div>
    </div>
  );
}

// Dark mode
function Card({ title, content }) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-lg">
      <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
        {title}
      </h3>
      <p className="text-gray-600 dark:text-gray-300">{content}</p>
    </div>
  );
}

Practice

Build a responsive landing page with Tailwind CSS and dark mode support.