How to Use Tailwind CSS in Next.js: Setup and Example

To use Tailwind CSS in Next.js, install Tailwind and its dependencies, then configure tailwind.config.js and include Tailwind directives in your global CSS file. Finally, import the global CSS in _app.js to apply Tailwind styles across your app.

Syntax

Here is the basic setup syntax for integrating Tailwind CSS in a Next.js project:

• npm install -D tailwindcss postcss autoprefixer: Installs Tailwind and its dependencies.
• npx tailwindcss init -p: Creates tailwind.config.js and postcss.config.js.
• Configure tailwind.config.js to specify your content files.
• Create a global CSS file with Tailwind directives: @tailwind base;, @tailwind components;, and @tailwind utilities;.
• Import this CSS file in pages/_app.js to apply styles globally.

bash and javascript

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

// tailwind.config.js
module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// pages/_app.js
import '../styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Example

This example shows a simple Next.js page styled with Tailwind CSS classes for layout and colors.

javascript

// pages/index.js
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600">Welcome to Next.js with Tailwind CSS!</h1>
      <p className="mt-4 text-gray-700">This page uses Tailwind for styling.</p>
      <button className="mt-6 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
        Click Me
      </button>
    </main>
  )
}

Output

A centered page with a large blue heading, a gray paragraph below, and a blue button that darkens on hover.

Common Pitfalls

Common mistakes when using Tailwind in Next.js include:

• Not specifying the correct content paths in tailwind.config.js, causing styles not to apply.
• Forgetting to import the global CSS file in _app.js, so Tailwind styles are missing.
• Using outdated Tailwind versions or missing dependencies.
• Not restarting the development server after installing Tailwind.

javascript

// Wrong: Missing content paths in tailwind.config.js
module.exports = {
  content: [], // empty array means no styles generated
  theme: { extend: {} },
  plugins: [],
}

// Right: Include all relevant files
module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: { extend: {} },
  plugins: [],
}

Quick Reference

Summary tips for using Tailwind in Next.js:

• Always install tailwindcss, postcss, and autoprefixer as dev dependencies.
• Run npx tailwindcss init -p to generate config files.
• Set content in tailwind.config.js to all your JSX/TSX files.
• Import your global CSS with Tailwind directives in _app.js.
• Restart your dev server after setup changes.

Key Takeaways

Install Tailwind CSS and its dependencies before configuring your Next.js project.

Configure the content paths in tailwind.config.js to enable style generation.

Import the global CSS file with Tailwind directives in pages/_app.js for global styles.

Restart the development server after setup to see Tailwind styles applied.

Use Tailwind utility classes directly in your JSX for fast styling.