Installation

Step-by-step guide to install Tailwind CSS, clsx, and set up utilities in your Next.js project

1. Install Tailwind CSS v4

Install Tailwind CSS, @tailwindcss/postcss, and their peer dependencies:

npm install tailwindcss @tailwindcss/postcss postcss

2. Configure PostCSS Plugins

Create a postcss.config.mjs file in the root of your project and add the @tailwindcss/postcss plugin:

// postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

3. Import Tailwind CSS

Add an import to your global CSS file (e.g., ./src/app/globals.css) to include Tailwind CSS:

@import "tailwindcss";

4. Install clsx

Install the clsx library to easily handle conditional class names:

npm install clsx

5. Create a utilities file

Create a file named utils.ts inside the lib folder with the following content:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

References:

• Official Tailwind CSS guide for Next.js