Module 7 — Tailwind Theming

5 lessons · Styling · Phlex::UI + KanbanFlow
We introduce CSS design tokens via Tailwind v4’s @theme directive, restyle the entire Phlex::UI library with semantic colour variables, add dark mode, and implement multi-theme support — all without touching a single component file.

Before we start

Right now Phlex::UI components use raw Tailwind palette values:

1
2
3
4

VARIANTS = {
  primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
  danger:  "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
}.freeze

These work, but they’re fragile. Changing the primary colour means hunting through every component file. There’s no single source of truth for the design system. Adding dark mode means duplicating every colour decision.

By the end of this module, Button’s primary variant looks like this:

1
2
3
4

VARIANTS = {
  primary: "bg-primary text-white hover:bg-primary-hover",
  danger:  "bg-danger text-white hover:bg-danger-hover",
}.freeze

Changing the primary colour is a one-line change in application.css. Dark mode is automatic. A second theme is a handful of CSS lines. No component files touched for any of it.