How to setup os Next.js with Tailwind CSS

To set up Next.js with Tailwind CSS, follow these steps:

Step 1: Create a New Next.js Project

If you haven't already created a Next.js project, you can create one using create-next-app.

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

Step 2: Install Tailwind CSS

Inside your Next.js project, install Tailwind CSS along with its required dependencies.

npm install -D tailwindcss postcss autoprefixer

Step 3: Initialize Tailwind CSS

Initialize Tailwind CSS by generating the tailwind.config.js and postcss.config.js files.

npx tailwindcss init -p

This will create tailwind.config.js and postcss.config.js files in the root of your project.

Step 4: Configure tailwind.config.js

Replace the content of tailwind.config.js with the following configuration to enable Tailwind in the relevant files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 5: Add Tailwind CSS to Your CSS Files

In your project, open or create the ./styles/globals.css file and add the following lines to import Tailwind's base, components, and utilities:

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

Step 6: Run the Development Server

Now, start the development server to see Tailwind CSS in action:

npm run dev

Your Next.js project should now be set up with Tailwind CSS. You can use Tailwind utility classes in your components to style them.

Example Usage

Here's an example of using Tailwind CSS in a Next.js page (pages/index.js):

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">
        Welcome to Next.js with Tailwind CSS!
      </h1>
    </div>
  );
}

With this setup, you can now start building your Next.js application using Tailwind's utility-first CSS framework!