@unocss/vite

Utility-First CSS

This feature allows you to use utility-first CSS classes in your project. The code sample shows how to integrate Unocss with a Vite project.

import { defineConfig } from 'vite';
import Unocss from '@unocss/vite';

export default defineConfig({
  plugins: [
    Unocss(),
  ],
});

On-Demand Generation

Unocss generates CSS on-demand, meaning only the styles you use in your HTML or JavaScript are included in the final build. The code sample demonstrates how to configure Unocss with a preset for on-demand generation.

import { defineConfig } from 'vite';
import Unocss from '@unocss/vite';

export default defineConfig({
  plugins: [
    Unocss({
      presets: [
        require('@unocss/preset-uno'),
      ],
    }),
  ],
});

Customizable

Unocss is highly customizable, allowing you to define your own utility classes and rules. The code sample shows how to add custom rules for margin and padding.

import { defineConfig } from 'vite';
import Unocss from '@unocss/vite';

export default defineConfig({
  plugins: [
    Unocss({
      rules: [
        ['m-1', { margin: '0.25rem' }],
        ['p-1', { padding: '0.25rem' }],
      ],
    }),
  ],
});