@unocss/core

What is @unocss/core?

@unocss/core is a highly customizable and performant utility-first CSS framework. It allows developers to generate CSS on-demand, providing a flexible and efficient way to style applications. The package is designed to be framework-agnostic and can be integrated with various front-end frameworks.

What are @unocss/core's main functionalities?

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

Other packages similar to @unocss/core

tailwindcss

Tailwind CSS is a utility-first CSS framework similar to @unocss/core. It provides a set of predefined classes to build custom designs directly in your markup. Unlike @unocss/core, Tailwind CSS comes with a larger set of default utilities and a more opinionated configuration.

windicss

Windi CSS is another utility-first CSS framework that aims to be faster and more efficient than Tailwind CSS. It offers on-demand CSS generation similar to @unocss/core but focuses on performance improvements and additional features like variant groups.

twind

Twind is a small, fast utility-first CSS-in-JS library that provides a similar on-demand CSS generation feature as @unocss/core. It is designed to be lightweight and easy to integrate with JavaScript frameworks, offering a more modern approach to utility-first CSS.

README

@unocss/core

The core engine of UnoCSS without any presets. It can be used as the engine of your own atomic CSS framework.

Usage

import { createGenerator } from '@unocss/core'

const generator = createGenerator({ /* user options */ }, { /* default options */ })

const { css } = await generator.generate(code)

License

MIT License © 2021-PRESENT Anthony Fu