Shipping a portfolio with three themes and zero design system library

Tailwind v4, CSS variables, and three carefully picked palettes. Why I skipped shadcn for this one and built primitives by hand.

shipping-with-three-themes

This site has a Light theme, a Dark theme, and a Dev theme — neon green, soft scanlines, an easter egg I'd want to find. All three swap by setting one attribute on <html>. No theming library. No styled-components. No prop-drilling.

Tailwind v4's @theme inline meets a tidy data-theme selector and you get a system that's small enough to read in one sitting.

:root,
[data-theme="dark"] {
  --bg:        #0a0a0b;
  --accent:    #4f6ef7;
}

[data-theme="light"] {
  --bg:        #f0f4ff;
  --accent:    #2547d8;
}

Skipping shadcn was a deliberate choice. The components I needed were small (badge, button, field, modal) and writing them gave me total control over the visual language. shadcn/Radix will earn its keep when the admin CMS lands and I need real comboboxes and dialogs.