Using Tailwind CSS in a Next.js project is a popular choice because it provides a utility-first approach to writing CSS, allowing you to apply styles directly in class names, making style writing more concise and intuitive. Tailwind CSS Tutorial: [ Tailwind CSS Official Website: [https://tailwindcss.com/](https://tailwindcss.com/) GitHub Address: [https://github.com/tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss) Tailwind CSS is a powerful CSS framework that makes writing styles more concise and modular through a utility-first approach. Unlike traditional class-based CSS frameworks, Tailwind provides a set of low-level utility classes that can be used directly on HTML elements for quick and flexible custom design. Here are the detailed steps for using Tailwind CSS in a Next.js project. ### 1. Install Tailwind CSS If you are creating a new Next.js project from scratch, you can use create-react-app. If you already have an existing React project, you can skip the project creation step. **Create a new Next.js project:** npx create-next-app@latest my-next-app During creation, it will prompt you whether to install Tailwind CSS. You can choose Yes: ...Would you like to use Tailwind CSS? No / YesWould you like your code inside a `src/` directory? No / YesWould you like to use App Router? (recommended) No / Yes... **Install Tailwind CSS** You can also run the following command in your project directory to install Tailwind CSS and its required dependencies: npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p This will create a tailwind.config.ts file and a postcss.config.mjs file. ### 2. Configure Tailwind CSS In the Tailwind configuration file tailwind.config.ts, add the file paths that will use Tailwind class names. Generally, it is configured by default, so we don't need to modify it: ## Example import type { Config } from "tailwindcss"; export default{ content:[ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}",// Note: added app directory. ], theme:{ extend:{ colors:{ background:"var(--background)", foreground:"var(--foreground)", }, }, }, plugins:[], } satisfies Config; We don't need to modify the postcss.config.mjs file. ### 3. Add Tailwind's Base Styles Add Tailwind CSS directives to your application's global stylesheet. Tailwind will use these directives to inject the styles it generates. In your project, open the app/globals.css file and add the following to include Tailwind's base styles, component styles, and utility styles: /* app/globals.css */@tailwind base;@tailwind components;@tailwind utilities; Import the globals.css stylesheet in the root layout app/layout.tsx to apply styles to every route in the application: ## Example // app/layout.tsx // These styles will apply to every route in the application import'./globals.css' export default function RootLayout({ children, }:{ children: React.ReactNode }){ return( {children} ) } ### 4. Use Tailwind CSS to Write Styles After installing Tailwind CSS and adding global styles, you can use Tailwind's utility classes in your application: ## app/page.tsx file code: // app/page.tsx export default function Home(){ return( ); } Run: npm run dev Then open your browser and navigate to http://localhost:3000. You should see a simple React application styled with Tailwind CSS. !(#) Through the above steps, you have successfully integrated Tailwind CSS into your Next.js project and used it to write styles. Tailwind CSS's utility class names allow you to quickly add styles to your components while keeping the style code concise and modular.