@unocss/vite

What is @unocss/vite?

@unocss/vite is a utility-first CSS framework that integrates with Vite, a build tool for modern web projects. It provides a highly customizable and performant way to handle CSS in your Vite projects, leveraging the power of utility classes and on-demand generation.

What are @unocss/vite's main functionalities?

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' }],
      ],
    }),
  ],
});

Other packages similar to @unocss/vite

tailwindcss

Tailwind CSS is another utility-first CSS framework that provides a wide range of utility classes out of the box. Unlike Unocss, Tailwind CSS requires a configuration file and a build step to generate the final CSS.

windicss

Windi CSS is a next-generation utility-first CSS framework that is similar to Tailwind CSS but offers faster build times and on-demand generation. It is more similar to Unocss in terms of performance and on-demand capabilities.

twind

Twind is a utility-first CSS-in-JS library that provides the benefits of Tailwind CSS without the need for a build step. It generates styles at runtime, making it more flexible but potentially less performant than Unocss.

README

@unocss/vite

The Vite plugin for UnoCSS. Ships with the unocss package.

This plugin does not come with any default presets. You are are building a meta framework on top of UnoCSS, see this file for an example to bind the default presets.