How to use Tailwind CSS with Next.js

Tailwind CSS is a utility-first CSS framework that's perfect for rapid UI development.

Installation

The easiest way to install Tailwind with a Next.js project is by following the official guide.

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

How it Works

Instead of writing custom CSS classes, you apply pre-existing utility classes directly in your HTML.

For example, to create a centered button with padding and a blue background:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

This approach makes styling fast and keeps your CSS from growing out of control.