CPCODELAB
Tailwind CSS

Utility-First vs BEM, CSS Modules, and CSS-in-JS

7 min read

Comparing Approaches

BEM (Block Element Modifier) imposes a naming convention but still requires writing CSS. CSS Modules scope class names automatically but still require a second file. CSS-in-JS libraries like Styled Components co-locate styles but add runtime overhead and require a JavaScript engine to render CSS.

Tailwind's utilities are statically extracted — there is no runtime. At CPCODELAB, for example, the entire site's CSS ships as a single, tiny, pre-built file no matter how many components exist.

When Tailwind Shines

  • Component-based UIs (React, Vue, Svelte, Next.js).
  • Teams that want consistent spacing and color scales.
  • Projects where performance and bundle size matter.
  • Rapid prototyping where visual iteration speed is critical.

Tailwind does not replace CSS knowledge. Understanding the box model, flexbox, and grid still matters — Tailwind just gives you utilities that map to those properties.

Ready to test yourself?
Practice Tailwind CSS— quiz & coding exercises