Skip to content

UnoCSS

UnoCSS generates CSS for short class names called utilities. Presets supply sets of rules, and a project can add its own.

Visit UnoCSS

What do you add to an existing build?

For a Vite app, install UnoCSS, add its Vite plugin, configure the preset you want and import the generated stylesheet. Use the guide for your own build tool if it differs. A preset supplies rules that turn class names into CSS.

Try one small layout before changing the rest of the app. Set the spacing or color values you want to share in the theme configuration.

Why can a status style disappear in the built app?

In a build setup that scans code, the generator needs to see a complete class name. If your code puts the name together from pieces only after the app runs, the generator can miss it. Write a fixed set of complete names or use the documented safelist to include specific classes.

Check both status states in the build you will ship. The CSS controls how the status looks. Your app still decides what state applies and what words to show. UnoCSS is MIT-licensed.

Can you plan two states before touching your app?

Sketch an invoice with Paid and Awaiting payment states. Use no code or real data.

  1. Write each complete name
    Draw one utility choice beside each state. Mark the shared spacing and where its value would come from.
  2. Check the output
    Mark both states for review in the built page. Keep the words visible if styling is missing.