✅ Configuring Tailwind CSS with Next.js

1. Create a new Next.js project Run the following command in your terminal:

   npx create-next-app@latest test

2. Select the installation options During setup, you will be prompted with several questions. Choose as follows (adjust based on your needs):

   What is your project named? my-app
   Would you like to use TypeScript? Yes / No   (your preference)
   Which linter would you like to use? ESLint   (recommended)
   Would you like to use Tailwind CSS? Yes       ✅ (required)
   Would you like your code inside a `src/` directory? Yes / No (optional)
   Would you like to use App Router? Yes        (recommended)
   Would you like to use Turbopack? Yes         (recommended)
   Would you like to customize the import alias (`@/*` by default)? No / Yes
   

   ⚡ Important: Select Yes when asked “Would you like to use Tailwind CSS?”

3. Verify Tailwind configuration files Once installation completes, you’ll see these automatically generated files:

   • tailwind.config.js or postcss.config.js or postcss.config.mjs
   • Global CSS file (globals.css or src/app/globals.css depending on folder structure)

   The global CSS file will already include the required Tailwind directives:

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

4. Start your development server Navigate into your project and run:

   cd test
   npm run dev

   Open http://localhost:3000 to see your project running with Tailwind CSS enabled.

5. Test Tailwind Replace content in app/page.js (or pages/index.js if you didn’t use App Router) with:

   export default function Home() {
     return (
       <h1 className="text-3xl font-bold underline text-blue-600">
         Hello, Tailwind + Next.js!
       </h1>
     );
   }

   If you see styled text, Tailwind is working correctly. 🎉

---

6. Using CSS Modules with Tailwind

Tailwind works perfectly with CSS Modules for fine-grained or scoped styles.

1. Create a CSS Module file Example: Home.module.css

   /*Home.module.css*/
    @reference "./globals.css";
   .customBox {
     background-color: #f3f4f6; /* Tailwind gray-100 */
     border-radius: 12px;
     padding: 1.5rem;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   }

2. Import it inside your component Example: app/page.js

   import styles from "./Home.module.css";
   
   export default function Home() {
     return (
       <div className={`${styles.customBox} text-center`}>
         <h1 className="text-2xl font-bold text-indigo-600">
           Tailwind + CSS Modules
         </h1>
         <p className="text-gray-700">
           You can combine utility classes with custom module styles.
         </p>
       </div>
     );
   }

---

Ensure reference global.css file in any module css files