Skip to main content
Back to changelog

Tailwind utilities from theme tokens

vortex-themes v0.5.0: Tailwind utilities from theme tokens

Use Vortex tokens as Tailwind CSS 4 utilities, with scoped dark mode support and simpler semantic color keys.

New features

  • Added tailwind.css for the bundled themes and Astra override, with token-based color, spacing, sizing, radius, shadow, breakpoint, typography, and motion utilities; see Tailwind CSS setup.
  • Added a Tailwind dark variant that follows Vortex color-mode attributes and excludes nested light scopes.
  • Added the none semantic spacing token, exposed as --vortex-spacing-none.

Breaking changes

  • Renamed lightMode and darkMode to light and dark in custom semantic color definitions. Update vortex.config.ts and regenerate theme files.
Before → After
// Before
foregroundPrimaryDefault: {
  lightMode: "brandPrimary600",
  darkMode: "brandPrimary300",
},

// After
foregroundPrimaryDefault: {
  light: "brandPrimary600",
  dark: "brandPrimary300",
},
  • Replaced Tailwind's default theme namespaces and previous generated utility names with Vortex token utilities. Update classes that rely on those names, or explicitly restore the Tailwind theme values your app needs; see Load your theme.