@unocss/core

On-Demand CSS Generation

This feature allows you to generate CSS on-demand based on utility classes. The code sample demonstrates how to create a generator and generate CSS for specific utility classes.

import { createGenerator } from '@unocss/core';

const uno = createGenerator();

const { css } = await uno.generate('p-4 m-2 text-center');
console.log(css);

Customizable Presets

This feature allows you to use and customize presets to extend the functionality of the CSS generator. The code sample shows how to use the `presetUno` preset to generate CSS for utility classes.

import { createGenerator, presetUno } from '@unocss/core';

const uno = createGenerator({
  presets: [presetUno()],
});

const { css } = await uno.generate('bg-blue-500 text-white');
console.log(css);

Integration with Frameworks

This feature allows you to integrate @unocss/core with various front-end frameworks like Vite. The code sample demonstrates how to create a Vite plugin that uses @unocss/core to transform code and generate CSS.

import { createGenerator } from '@unocss/core';
import { defineConfig } from 'vite';

const uno = createGenerator();

export default defineConfig({
  plugins: [
    {
      name: 'unocss',
      transform(code) {
        const { css } = uno.generate(code);
        return css;
      },
    },
  ],
});