Part 12: Styling Strategies: CSS Modules, Tailwind & Styled Components

Styling React applications has evolved significantly over the past decade. Let's compare the most prominent approaches used in modern production environments.

1. CSS Modules (Scoped CSS)

CSS Modules automatically generate unique class names at build time, preventing class name collisions across your application.

Button.module.css:

.button {
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.primary {
  background-color: #2563eb;
  color: white;
}

Button.jsx:

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

export default function Button({ children, isPrimary }) {
  return (
    <button className={`${styles.button} ${isPrimary ? styles.primary : ''}`}>
      {children}
    </button>
  );
}

Generated HTML in browser: <button class="Button_button__a8f2 Button_primary__3d9x">

2. Tailwind CSS (Utility-First)

Tailwind CSS provides low-level utility classes directly in your JSX, enabling rapid development without writing custom CSS files:

export default function MetricCard({ title, value, change }) {
  return (
    <div className="p-6 bg-white dark:bg-gray-800 rounded-xl shadow-md border border-gray-100 flex flex-col gap-2">
      <span className="text-sm font-medium text-gray-500">{title}</span>
      <span className="text-3xl font-extrabold text-gray-900 dark:text-white">{value}</span>
      <span className={`text-sm font-semibold ${change >= 0 ? 'text-green-600' : 'text-red-500'}`}>
        {change >= 0 ? `+${change}%` : `${change}%`} vs last month
      </span>
    </div>
  );
}

3. CSS-in-JS (Styled-Components / Emotion)

Allows writing pure CSS with JavaScript interpolation directly attached to components:

import styled from 'styled-components';

const StyledCard = styled.div`
  background: ${props => props.$dark ? '#1e293b' : '#ffffff'};
  color: ${props => props.$dark ? '#f8fafc' : '#0f172a'};
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
`;

Key Takeaways

• CSS Modules: Ideal for traditional CSS syntax with zero name collision risk.
• Tailwind CSS: Most popular modern solution for fast, design-system-aligned development.
• CSS-in-JS: Powerful for dynamic, prop-driven themes.

In Part 13, we will learn Lifting State Up to coordinate shared state between components!