What is Tailwind with Next.js?

Tailwindmarkup~5 mins

Tailwind with Next.js

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Tailwind helps you style websites quickly using ready-made classes. Next.js lets you build fast React websites easily. Using Tailwind with Next.js means you can make beautiful, fast websites with less work.

You want to build a React website with easy styling.

You want to create responsive designs that look good on phones and computers.

You want to use modern tools that help you build websites faster.

You want to keep your styles organized without writing lots of CSS files.

You want to use server-side rendering for better website speed and SEO.

Syntax

Tailwind

1. Install Tailwind CSS in your Next.js project:
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

2. Configure tailwind.config.js to include your files:
   module.exports = {
     content: ["./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
     theme: {
       extend: {},
     },
     plugins: [],
   }

3. Add Tailwind directives to your global CSS (e.g., styles/globals.css):
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

The content array tells Tailwind where to look for class names to include in the final CSS.

Use Tailwind classes directly in your JSX inside Next.js components for styling.

Examples

This creates a blue box with white text, padding, and rounded corners.

Tailwind

<div className="bg-blue-500 text-white p-4 rounded">Hello Tailwind!</div>

A green button that changes shade when you hover over it.

Tailwind

<button className="hover:bg-green-600 bg-green-500 text-white font-bold py-2 px-4 rounded">Click me</button>

A centered container with a heading and paragraph styled using Tailwind.

Tailwind

<main className="max-w-4xl mx-auto p-6">
  <h1 className="text-3xl font-bold mb-4">Welcome to Next.js with Tailwind</h1>
  <p className="text-gray-700">Build fast and beautiful websites.</p>
</main>

Sample Program

This simple page uses Tailwind classes to center content, style a heading, and a button with hover effect. It shows how Tailwind works inside a Next.js project.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Next.js with Tailwind Example</title>
  <link href="/styles/globals.css" rel="stylesheet" />
</head>
<body>
  <main class="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
    <h1 class="text-4xl font-extrabold text-blue-600 mb-6">Hello from Next.js + Tailwind!</h1>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded">
      Press me
    </button>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Remember to restart your Next.js server after installing Tailwind for changes to take effect.

Use semantic HTML tags like <main> and <button> for better accessibility.

Test your site on different screen sizes to ensure your Tailwind styles respond well.

Summary

Tailwind CSS lets you style your Next.js app quickly with utility classes.

Install Tailwind, configure it, and use its classes inside your React components.

Use semantic HTML and responsive classes for accessible, mobile-friendly sites.