Tailwind CSS

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 utility classes directly in your HTML.

Think of Tailwind like a box of LEGO bricks. Instead of creating custom molds for each piece, you combine standard bricks to build anything you want.

Setting Up Tailwind

Next.js makes it easy to add Tailwind CSS to your project. When creating a new project, you can select Tailwind during setup:

npx create-next-app@latest my-app --tailwind

For existing projects, install Tailwind and its dependencies:

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

This creates a tailwind.config.js file where you can customize your design system.

Using Tailwind Classes

With Tailwind, you build designs by composing utility classes:

export default function Card({ title, description }) {
  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      <h2 className="text-xl font-bold mb-2">{title}</h2>
      <p className="text-gray-600">{description}</p>
      <button className="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
        Learn More
      </button>
    </div>
  );
}

Each class does one thing: bg-white sets the background color, rounded-lg adds border radius, shadow-md adds a box shadow.

Responsive Design

Tailwind makes responsive design straightforward with mobile-first breakpoint prefixes:

export default function Grid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div className="bg-white p-4">Item 1</div>
      <div className="bg-white p-4">Item 2</div>
      <div className="bg-white p-4">Item 3</div>
    </div>
  );
}

On mobile, items stack vertically. On medium screens, they form 2 columns. On large screens, 3 columns. No media queries needed!

Customizing Tailwind

You can customize Tailwind's default theme in tailwind.config.js:

// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#0070f3',
        secondary: '#ff0080',
      },
    },
  },
  plugins: [],
};

This adds your custom colors to Tailwind's utility classes, so you can use bg-primary or text-secondary.