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.cssfor 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
darkvariant that follows Vortex color-mode attributes and excludes nested light scopes. - Added the
nonesemantic spacing token, exposed as--vortex-spacing-none.
Breaking changes
- Renamed
lightModeanddarkModetolightanddarkin custom semantic color definitions. Updatevortex.config.tsand 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.
