UnoCSS Starter Theme - Variables

CSS variables make it easy to change styles.

Use UnoCSS theme properties in a variable.

https://unocss.dev/integrations/postcss#theme

--page-width: theme(breakpoints.lg);

Use variables in shortcuts.

shortcuts: {
  'container': 'max-w-[var(--page-width)] mx-auto',
},

See also preflights.

https://unocss.dev/config/preflights#preflights

And consider adding theme properties instead and creating rules or variants.

https://unocss.dev/config/theme

https://unocss.dev/config/theme#extendtheme

https://unocss.dev/config/variants

https://unocss.dev/config/rules

Tags