February - October 2025. Story of one idea.

Idea (February)

Theme as TypeScript object. Tailwind classes inside. AI generates file in 30 seconds - completely different interface.

const darkTheme = {
  colors: {
    background: 'bg-gray-900',
    text: 'text-white',
  },
  button: {
    primary: 'bg-blue-600 hover:bg-blue-700 text-white'
  }
}

Component takes classes from theme:

<button :class="theme.button.primary">

Change theme - whole interface changes. Worked.

Problem 1: HTML Cache

Site is dark. Cached HTML with dark classes. User with light theme opens - sees dark page for a second. Then lightens. Flicker.

Cache contains specific classes. But user's theme might be different.

Problem 2: Tailwind JIT limitations

JIT compiles only classes it sees in code. Dynamically assembled strings - doesn't always pick up. Had to make sure all variants were written somewhere.

Problem 3: Complex styles

For simple components it was enough. For landing with gradients, animations, custom effects - still wrote CSS.

Solution (October)

Switched to CSS variables.

:root {
  --color-bg: #ffffff;
  --color-text: #000000;
}
[data-theme="dark"] {
  --color-bg: #1a1a1a;
  --color-text: #ffffff;
}

Works with cache - HTML is one, colors change via CSS. Works with complex styles.

8 months on a beautiful idea that didn't survive production.