No Build Step
Use CSS variables directly in your HTML without a compilation process.
Excellent DevTool Support
Chrome DevTools support CSS variable exploration for easy debugging.
Familiar Syntax
Straightforward mapping of CSS properties to varwind names.
Example:
<div x-css-vars="pl--3 bg--blue-500">...</div>Equivalent to:
padding-left: var(--3);
background: var(--blue-500);Other Features
- Mix and extend different stylesheets
- Naturally scoped (CSS variables can be specific for the root but overwritten with more specific definitions)
- Easy to convert to component classes when required