UnoCSS CSS Variables Preset ​

Create and manage CSS custom properties (variables) with UnoCSS utility-first approach.

  • npm
  • Downloads
  • License

Features ​

  • 🎨 CSS Variables

    Create and use CSS variables with UnoCSS classes

  • 🌈 Color Integration

    Use color values from your UnoCSS theme

  • 🧩 Complete Integration

    Fully integrated with UnoCSS's theme system

Installation ​

Once you have UnoCSS set up, you can install the unocss-preset-css-var package to start using CSS variables in your UnoCSS utilities.

bash
pnpm add -D unocss-preset-css-var unocss
bash
npm install -D unocss-preset-css-var unocss
bash
yarn add -D unocss-preset-css-var unocss
bash
bun add -D unocss-preset-css-var unocss

Configuration ​

Add the preset to your UnoCSS configuration:

ts
// uno.config.ts
import { defineConfig } from 'unocss'
import { presetCssVar } from 'unocss-preset-css-var'

export default defineConfig({
  presets: [
    // other presets...
    presetCssVar(),
  ],
})

Basic Usage ​

With this preset, you can create and use CSS variables directly in your UnoCSS classes:

html
<!-- Define a CSS variable -->
<div class="var:my-color:blue">
  <!-- Use the CSS variable -->
  <p class="text-$my-color">This text will be blue</p>
</div>

The var: utility creates a CSS variable with the specified name and value. The format is:

var:variable-name:value

Working with Colors ​

The preset supports color values from your UnoCSS theme:

html
<div class="var:primary:blue-500 var:accent:green-300">
  <!-- Use the CSS variables -->
  <button class="bg-$primary text-white">Primary Button</button>
  <button class="bg-$accent text-black">Accent Button</button>
</div>