Using Tailwind CSS Colors with CSS Modules

Why Combine Tailwind with CSS Modules?

CSS Modules scope class names locally while Tailwind provides utility classes globally. You can use both together: Tailwind for colors and spacing, CSS Modules for complex animations or component-specific styles.

Using @apply for Color Tokens

/* Card.module.css */
.card {
  @apply bg-white dark:bg-slate-800 rounded-xl shadow-md;
}
.cardTitle {
  @apply text-slate-900 dark:text-slate-100 text-lg font-semibold;
}
.cardBody {
  @apply text-slate-600 dark:text-slate-300;
}
.cardAccent {
  @apply border-l-4 border-blue-500;
}

Mixing Approaches in Components

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

export function Card({ title, children, accent }) {
  return (
    <div className={`${styles.card} ${accent ? styles.cardAccent : ''} p-6`}>
      <h3 className={styles.cardTitle}>{title}</h3>
      <div className={styles.cardBody}>{children}</div>
    </div>
  );
}

When to Use Each Approach

• Use Tailwind classes directly for one-off color utilities
• Use CSS Modules with @apply when you have complex selectors or pseudo-elements
• Keep color tokens in Tailwind config so both systems share the same palette
• Avoid duplicating color values between CSS Modules and Tailwind config