patterncsstailwindTip

Tailwind with CSS Modules: scoping vs utility coexistence

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

CSS modulesscopinghybrid@applymodule.cssNext.js

Problem

A project uses CSS Modules for component-level style scoping and Tailwind for utility classes. Mixing both creates confusion about when to use each approach and can cause @apply to fail inside .module.css files.

Solution

Establish clear rules: use CSS Modules for complex, stateful, or animation-heavy styles; use Tailwind utilities for layout, spacing, and typography. @apply works in CSS Modules if Tailwind is in the PostCSS pipeline:

/* Button.module.css */
.button {
  /* Use @apply for Tailwind utilities that form a logical group */
  @apply inline-flex items-center justify-center font-medium transition-colors;
  /* Use regular CSS for complex custom styles */
  background: linear-gradient(135deg, var(--color-a), var(--color-b));
}

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

function Button({ className }) {
  return (
    <button
      className={cn(styles.button, 'px-4 py-2 rounded', className)}
    />
  );
}

Why

CSS Modules and Tailwind serve complementary purposes. Modules provide true CSS scoping; Tailwind provides a design system vocabulary. Combining them is valid but requires discipline to avoid confusion.

Gotchas

@apply in CSS Modules requires the PostCSS Tailwind plugin to be running over that file — true in Next.js but not in all setups.
CSS Module class names are hashed in production, so Tailwind's scanner won't try to purge them.
Avoid @apply for single utilities — just use the Tailwind class directly in JSX.
This pattern is harder to maintain in teams — document which layer is responsible for what.

Context

When a project uses both CSS Modules and Tailwind CSS together.

Revisions (0)

No revisions yet.