Search by 
symfony / ux-css
Typed atomic CSS for Twig, driven by design tokens and validated at compile time
v3.7.0
2026-11-02 14:55 UTC
Requires
- php: >=8.4
- symfony/config: ^7.4|^8.0
- symfony/dependency-injection: ^7.4|^8.0
- symfony/http-kernel: ^7.4|^8.0
- twig/twig: ^3.24|^4.0
Requires (Dev)
- phpbench/phpbench: ^1.7
- phpstan/phpstan: ^2.1.39
- phpunit/phpunit: ^11.1|^12.0
- symfony/asset-mapper: ^7.4|^8.0
- symfony/console: ^7.4|^8.0
- symfony/error-handler: ^7.4.17|^8.1.5
- symfony/framework-bundle: ^7.4|^8.0
- symfony/process: ^7.4|^8.0
- symfony/twig-bundle: ^7.4|^8.0
- symfony/yaml: ^7.4|^8.0
Suggests
None
Provides
None
Conflicts
None
Replaces
None
README
EXPERIMENTAL This bundle is currently experimental and is likely to change, possibly significantly, before its first stable release.
Symfony UX CSS provides a css() Twig function in the spirit of Panda CSS: it turns a hash of style properties into atomic class names, built from your design tokens and validated when templates compile.
Installation
composer require symfony/ux-css
Usage
<div class="{{ css({ p: 'md', color: 'fg', _hover: { color: 'primary' }, md: { p: 'lg' } }) }}">
The attribute becomes class="p_md c_fg hover:c_primary md:p_lg", and the bundle writes the matching rules to var/ux_css/styles.css.