How to Install Tailwind CSS with Next.js

You can install Tailwind CSS with Next.js by following these instructions:

Step 1: Create a Next.js app

If you haven't already, use the following command to start a new Next.js project:

npx create-next-app@latest my-nextjs-project

This will create a new project in the same directory called my-nextjs-project for Next.js.

Step 2: Install Tailwind CSS

Run the following command to open the project folder:

cd my-next-project

Next, use the following command to install Tailwind CSS and its dependencies:

npm install tailwindcss postcss autoprefixer

Step 3: Configure Tailwind CSS

Next, you have to create a configuration file for Tailwind CSS. To create the default configuration file, execute the following command:

npx tailwindcss init

It will create a tailwind.config.js file in the root directory of your project.

Step 4: Configure PostCSS

PostCSS is used by Next.js to handle CSS files. To use Tailwind CSS, PostCSS configuration is required.

If it doesn't already exist, create a postcss.config.js file in the root directory of your project. Add the following code to the file:

module.exports = {
  plugins: [
    'tailwindcss',
    'postcss-preset-env',
  ],
}

Step 5: Import Tailwind CSS

Open the styles/globals.css file in your project and add the following line at the top to import Tailwind CSS:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Step 6: Start Next.js development server

Finally, execute the following command to launch the Next.js development server:

npm run dev

Tailwind CSS classes are now available for use in Next.js projects. For your components and stylesheets, you can add classes directly.

For Example:

import React from "react";
import Link from "next/link";

export const myComponent = () => {
  return (
    <div className="relative">
      <div className="px-6 flex justify-between items-center gap-6 flex-wrap">
        <Link
          href="/"
          className="group mx-2 flex items-center font-bold  text-black"
        >
          &copy; 2024 Techstackkit. All rights reserved
        </Link>
      </div>
    </div>
  );
};

Techstackkit