Using Unocss with Vue and Sass: Installation, Configuration, and Personal Insights

Preface

This article mainly discusses the usage of Unocss and the author's personal impressions after using it.

Unocss Download and Usage

Install Unocss via npm or yarn:

npm i unocss
or
yarn add unocss

For better IDE support, create a dedicated configuration file (e.g., uno.config.ts ) at the project root and import it in vite.config.ts :

// uno.config.ts
import { defineConfig } from "unocss";
export default defineConfig({
  // ...Unocss options
});

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import UnoCss from "unocss/vite";
export default defineConfig({
  plugins: [vue(), UnoCss()],
});

After configuring uno.config.ts , you can write atomic styles directly in your markup.

Unocss Configuration

Unocss offers many configuration options, but most projects only need a few key sections:

Common Rules

rules: [
  // static rule
  ['m-1', { margin: '0.25rem' }],
  // dynamic rule using regex
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
];

Presets

You can use built‑in presets or create custom ones. The most common preset is presetUno , which includes Tailwind, Windi, Bootstrap, and Tachyons utilities.

// uno.config.ts
import { defineConfig, presetUno } from 'unocss';
export default defineConfig({
  presets: [presetUno()],
});

Other useful presets include presetAttributify (attribute‑style syntax), presetIcons (icon utilities), presetWebFonts (font loading), and presetRemToPx (convert rem to px).

Transformers

Transformers modify source code to enable additional features such as variant groups, directives, and attribute‑style JSX.

import { defineConfig, transformerVariantGroup, transformerDirectives } from 'unocss';
export default defineConfig({
  transformers: [transformerVariantGroup(), transformerDirectives()],
});

Common Pitfalls and Plugins

When using the attribute preset, special characters like % , [] , or # cannot appear directly in attribute values; instead, use quoted values (e.g., bg="#333" ). Install the VS Code Unocss extension to get inline style highlighting and autocomplete.

Personal Feelings

Unocss feels faster than Tailwind for many use‑cases once you are familiar with it.

The configuration is straightforward and plug‑and‑play.

There is a learning curve, especially for teammates unfamiliar with atomic CSS.

Too many ways to write the same style can lead to inconsistency.

For Vue templates, keeping the number of atomic classes low (< 5) maintains readability.

Atomic utilities do not significantly affect bundle size; the main weight comes from component libraries.

Conclusion

Atomic CSS frameworks like Unocss are a modern trend and can be useful, but they are not mandatory. Traditional CSS preprocessors (Sass, Less) and component‑based styling still have strong use cases, especially in larger teams or projects where maintainability outweighs the convenience of atomic utilities.