Search by 
symfony / ux-css
Typed atomic CSS for Twig, driven by design tokens and validated at compile time
3.x-dev
2026-11-01 07:58 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
This package is auto-updated.
Last update: 2026-11-01 07:59:11 UTC
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.