CSS Modules in Next.js applications

To use a CSS Module, you name your CSS file with the .module.css extension (e.g., Button.module.css). Then, you import it into your component and access the class names as properties of the imported object.

Let's create a simple example. Imagine we want a special button style that's unique to a particular section of our app and might conflict with Tailwind's button styles if not scoped.

1. Create a new CSS Module file for a hypothetical SpecialButton component in components/styles/SpecialButton.module.css:

   my-task-app/
   └── components/
       ├── Header.tsx
       ├── Footer.tsx
       └── styles/                       <-- NEW DIRECTORY
           └── SpecialButton.module.css  <-- NEW FILE
   

   components/styles/SpecialButton.module.css

   /* components/styles/SpecialButton.module.css */
   .specialButton {
     background-color: #ff4500; /* OrangeRed */
     color: white;
     padding: 10px 20px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-weight: bold;
     transition: background-color 0.3s ease;
   }
   
   .specialButton:hover {
     background-color: #cc3700;
   }
   

2. Create a new component components/SpecialButton.tsx that uses this CSS Module:

   components/SpecialButton.tsx

   // components/SpecialButton.tsx
   // This component demonstrates the use of CSS Modules for scoped styling.
   // It is a Client Component because it will handle a click event.
   
   'use client'; // Mark as a Client Component for interactivity
   
   import styles from './styles/SpecialButton.module.css'; // Import the CSS Module
   
   export default function SpecialButton({ onClick, children }: { onClick: () => void; children: React.ReactNode }) {
     return (
       <button className={styles.specialButton} onClick={onClick}>
         {children}
       </button>
     );
   }
   

3. Use the SpecialButton component in app/page.tsx: Let's temporarily add this button to our homepage to see it in action.

   app/page.tsx (Update this file)

// app/page.tsx
// This file defines the content for the homepage ('/') of the application.
// Updated to include a SpecialButton component using CSS Modules.

import SpecialButton from '../components/SpecialButton'; // Import the SpecialButton

export default function HomePage() {
    const handleButtonClick = () => {
    // In a real app, this might trigger an action or navigate
    console.log("Special button clicked!");
    alert("Special button clicked!"); // Using alert for demonstration (will replace with custom modal later)
    };

    return (
    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-250px)] text-center px-4">
        <h2 className="text-4xl md:text-5xl font-bold text-blue-700 mb-4 animate-fade-in">
        Welcome to My TaskFlow!
        </h2>
        <p className="text-xl text-gray-600 mb-8 max-w-2xl animate-slide-up">
        Your simple solution for organizing tasks and boosting productivity.
        </p>
        <p className="text-md text-gray-500 mb-6">
        Start by managing your daily tasks with ease.
        </p>
        {/* Add the SpecialButton here */}
        <SpecialButton onClick={handleButtonClick}>
        Click Me (CSS Module)
        </SpecialButton>
    </div>
    );
}

Summary

What we've done:

• We've created a CSS Module (.module.css file) with scoped styles.
• We've created a React component that imports and applies these styles.
• We've added the button to the homepage to demonstrate its unique styling, isolated from global styles.

To see CSS Modules in action:

1. Ensure your development server is running (npm run dev).
2. Open http://localhost:3000. You should see the "Click Me (CSS Module)" button with a distinct orange background.
3. Inspect the element in your browser's developer tools. You'll notice that the class name applied to the button is something like SpecialButton_specialButton__xyz123, where xyz123 is a unique hash, confirming that the style is locally scoped.

While CSS Modules are excellent for specific, highly component-scoped styles, for the majority of our Task App's styling, we'll leverage the power of Tailwind CSS.