Introduction

Next.js and Tailwind CSS are powerful tools that together enable developers to build fast, scalable, and visually appealing web applications. Next.js offers server-side rendering and routing, while Tailwind CSS provides utility-first styling. This guide walks you through setting up a project using both.

Step 1: Initialize Next.js Project

Start by creating a new Next.js app using the command:

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

Navigate into the project folder:

cd my-next-tailwind-app

Step 2: Install Tailwind CSS

Install Tailwind and its dependencies:

npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind config:

npx tailwindcss init -p

Step 3: Configure Tailwind

Update tailwind.config.js to include your source files:

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

Add Tailwind directives to styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4: Start Building

Run the development server:

npm run dev

Use Tailwind classes directly in your React components to style elements responsively and efficiently.

Conclusion

Combining Next.js with Tailwind CSS streamlines frontend development by providing a robust framework and a flexible styling system. With this setup, you’re ready to build modern, performant web applications.