Styling React Components: CSS Modules and Tailwind

In the early days of web development, we managed styles using global CSS files. However, as React applications grow, global styles often lead to "class name collisions" where one style accidentally overrides another. To solve this, modern React development relies on scoped styling. In this lesson, we will explore two of the most popular styling methods: CSS Modules and Tailwind CSS.

The Evolution of Styling in React

When building components, you want your styles to be predictable. If you style a button in a "Login" component, it shouldn't change the appearance of a button in the "Sidebar" component unless you want it to. This is why we moved away from standard CSS to more robust solutions.

[Global CSS] -> [CSS Modules (Scoped)] -> [Utility-First (Tailwind)]
    

1. CSS Modules: Local Scoping by Default

CSS Modules are CSS files where all class names and animation names are scoped locally by default. This is a built-in feature in Next.js and Create React App.

How CSS Modules Work

To use CSS Modules, you simply name your file with the .module.css extension. When you import this file into your React component, it returns an object where the keys are your class names and the values are unique, generated strings.

Example of CSS Modules

Create a file named Button.module.css:

.primaryButton {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}
    

Now, use it in your React component:

import styles from './Button.module.css';

function MyButton() {
  return (
    <button className={styles.primaryButton}>
      Click Me
    </button>
  );
}
    

Result: At runtime, the class name will look something like Button_primaryButton__zX9a1, ensuring it never clashes with other classes.

2. Tailwind CSS: The Utility-First Approach

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS in separate files, you apply pre-defined utility classes directly in your JSX. It is currently the industry standard for rapid UI development in Next.js.

Why Use Tailwind?

• No more jumping between files: You style your components directly in the className attribute.
• Consistency: Tailwind uses a design system (spacing, colors, typography) out of the box.
• Performance: It removes unused CSS during the build process, resulting in tiny CSS bundles.

Example of Tailwind CSS

function Card() {
  return (
    <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
      <div>
        <h3 className="text-xl font-medium text-black">Tailwind Card</h3>
        <p className="text-slate-500">This is styled using utility classes!</p>
      </div>
    </div>
  );
}
    

Choosing the Right Tool

Deciding between CSS Modules and Tailwind depends on your project requirements and team preference.

Decision Flow:
1. Do you prefer writing raw CSS? -> Use CSS Modules.
2. Do you want rapid development? -> Use Tailwind CSS.
3. Are you building a design system? -> Tailwind is highly recommended.
4. Do you have legacy CSS to migrate? -> CSS Modules is easier to adapt.
    

Common Mistakes to Avoid

• Global Pollution: Importing a standard .css file in a component thinking it is scoped. Standard CSS files are always global in React.
• Tailwind Class Bloat: Writing 50+ classes in a single line. Use the @apply directive or break components into smaller pieces to keep code readable.
• Missing Config: Forgetting to include the paths to all your component files in the tailwind.config.js file, which leads to styles not appearing.

Real-World Use Cases

In professional environments, Next.js projects almost exclusively use Tailwind CSS for the main UI because it speeds up the design-to-code process. CSS Modules are often used when a developer needs very specific, complex animations or when integrating third-party CSS libraries that require traditional class selectors.

Interview Notes for Developers

• Question: What is the main benefit of CSS Modules?
• Answer: It provides local scoping, preventing class name collisions in large applications.
• Question: How does Tailwind CSS optimize for production?
• Answer: It uses "PurgeCSS" logic to scan your HTML/JSX and only includes the CSS classes you actually used in the final bundle.
• Question: Can you use both in the same project?
• Answer: Yes, many projects use Tailwind for layout and CSS Modules for specific complex component logic.

Summary

Styling is a critical part of the Mastering React and Next.js journey. While CSS Modules offer a familiar way to write scoped CSS, Tailwind CSS provides a modern, utility-first workflow that is highly efficient for building responsive interfaces. Understanding both will make you a versatile frontend developer. In the next lesson, we will dive deeper into Component State Management to make these styled components interactive.