Tailwind CSS Setup in Next.js

In this tutorial, you will learn how to setup Tailwind CSS in Next.js

What is Taiwind CSS?

Taiwind is the most popular styling CSS. It provides utility classes for fast styling and modern UI.

Step 1: Install Tailwind CSS

First, create a project if you haven’t already.


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

After running the above command, then install Tailwind.


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

Step 2: Configure tailwind.config.js

Now. config the tailwind.config.js


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

Step 3: Add Tailwind to globals.css

Now, you will add Tailwind to globals.css


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

Example Tailwind Component

In this example, you will see how to use Tailwind css into Card component.


export default function Card() {
  return (
    <div className="p-6 shadow-lg rounded-lg bg-white">
      <h2 className="text-xl font-bold">Tailwind Card</h2>
      <p className="text-gray-600">This is a Tailwind CSS example.</p>
    </div>
  );
}

Benefits of Tailwind

1. It is used for Fast development.

2. It is used for Mobile-first styling.

3. It is used for Theme customization.

4. It is used for No CSS file creation required.