November 20, 2025

Themes on CSS variables

November 2025. Tailwind themes killed. What instead?

CSS custom properties. Old technology, works everywhere.

What it looks like

:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-primary: #3b82f6;
  --radius: 8px;
}

[data-theme="dark"] {
  --color-bg: #1a1a1a;
  --color-text: #ffffff;
  --color-primary: #60a5fa;
}

Usage

.card {
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius);
}

Theme changes - variables change - styles update. Without JavaScript.

Why better than Tailwind themes

  • Works with cache. HTML is one, CSS is different.
  • Hover works. No JIT problems.
  • Complex styles possible. Gradients, animations, anything.

Downsides

  • No autocomplete like in TypeScript themes
  • Typos not caught
  • Need to remember variable names

How I live with downsides

CSS file with variables - one. Open it, see what's there.

IDE suggests variables in CSS files. Not as convenient as TS, but tolerable.

Main thing - it works. After 8 months fighting Tailwind themes - already good.

← Back to blog