@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.

Documentation

Please refer to the documentation.

License

MIT License © 2021-PRESENT Anthony Fu