Styling a Next.js App with Tailwind

In modern applications, styling is an essential part of building user interfaces. In this course, you already worked with Tailwind CSS, and Next.js integrates with it seamlessly.

When you create a Next.js project with Tailwind enabled, everything is already configured. You can start styling your components immediately using utility classes.

Using Tailwind in a Page

You can apply Tailwind classes directly in your components:

export default function Page() {
  return (
    <div className="p-6 bg-gray-100 min-h-screen">
      <h1 className="text-2xl font-bold text-blue-600">
        Welcome to Next.js
      </h1>
      <p className="mt-4 text-gray-700">
        This page is styled using Tailwind CSS.
      </p>
    </div>
  );
}

How It Works

Tailwind provides utility classes that control layout, spacing, colors, and typography. Instead of writing custom CSS, you compose styles directly in your markup.

This keeps styles close to your components and makes development faster.

Styling Reusable Components

You can also style reusable components:

export default function Button({ children }) {
  return (
    <button className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
      {children}
    </button>
  );
}

This button can be reused across your app with consistent styling.

Why Tailwind Works Well with Next.js

Tailwind fits naturally into the component-based approach of Next.js. You can style each component independently while keeping the overall design consistent.

It also helps avoid large CSS files and reduces the need for complex styling setups.