Six approaches, each with tradeoffs.

1. Plain CSS / SASS

.button { background: blue; }

import './Button.css';
<button className="button">Click</button>

Pro: zero abstraction; everyone knows it. Con: global namespace — class collisions in big apps.

2. CSS Modules

/* Button.module.css */
.button { background: blue; }

import styles from './Button.module.css';
<button className={styles.button}>Click</button>

Pro: locally scoped class names; co-located with component; no runtime overhead. Con: no dynamic values from props (workaround: data attributes + CSS custom properties).

Default for many production apps.

3. Tailwind / Atomic CSS

<button className="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
  Click
</button>

Pro: no naming, no file switching, design-system tokens enforced, JIT compiler ships only used classes (~10 KB), excellent autocompletion via Tailwind IntelliSense. Con: JSX gets visually dense; cosmetic refactors mean rewriting long strings (clsx helps).

4. CSS-in-JS (styled-components, emotion)

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.$primary ? 'blue' : 'gray'};
  padding: 8px 16px;
`;

<Button $primary>Click</Button>

Pro: dynamic styles via props, JS-authored. Con: runtime cost (style injection on render), SSR complications, bundle bloat, less mature in RSC.

The React team has publicly cooled on runtime CSS-in-JS for new projects.

5. Zero-runtime CSS-in-JS

vanilla-extract, Linaria, Panda, StyleX — write styles in TS/JS, compile to static CSS at build time.

// styles.css.ts (vanilla-extract)
import { style } from '@vanilla-extract/css';

export const button = style({
  background: 'blue',
  padding: '8px 16px',
});

import * as styles from './styles.css';
<button className={styles.button}>Click</button>

Pro: typed styles, build-time extraction, no runtime cost. Con: build tooling, less ergonomic for one-offs than Tailwind.

6. Framework-native (Next.js)

Next.js supports CSS Modules, Tailwind, Sass, and global CSS out of the box. App Router adds CSS in RSC contexts without extra setup.

Recommendation matrix

Theming

Modern recommendation: CSS custom properties.

:root { --primary: #3b82f6; }
[data-theme='dark'] { --primary: #60a5fa; }

<button style={{ background: 'var(--primary)' }}>Click</button>

Switching theme is one DOM attribute change; no JS rerender required.

Class composition utilities

For Tailwind especially:

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

const cn = (...args) => twMerge(clsx(args));

<button className={cn('px-4 py-2', primary && 'bg-blue-500')}>...</button>

Senior framing

Styling choice is downstream of team and project. Tailwind dominates new green-field projects; CSS Modules is the conservative default; CSS-in-JS is fading for runtime reasons; zero-runtime alternatives are gaining. Pick once, document, enforce — fragmentation across the codebase is the real cost.