@unocss/preset-uno

What is @unocss/preset-uno?

@unocss/preset-uno is a utility-first CSS framework that provides a comprehensive set of pre-defined classes for rapid UI development. It is part of the UnoCSS ecosystem and offers a wide range of utilities for styling, including layout, typography, colors, and more.

What are @unocss/preset-uno's main functionalities?

Utility Classes

This feature allows you to use pre-defined utility classes to style your HTML elements. In this example, the `p-4` class adds padding, `bg-blue-500` sets the background color, and `text-white` sets the text color.

<div class="p-4 bg-blue-500 text-white">Hello, World!</div>

Responsive Design

UnoCSS provides responsive utility classes that allow you to apply different styles at different breakpoints. In this example, the padding changes based on the screen size: `p-4` for small screens, `md:p-8` for medium screens, and `lg:p-12` for large screens.

<div class="p-4 md:p-8 lg:p-12">Responsive Padding</div>

Custom Themes

You can customize the default theme by defining your own colors, spacing, and other design tokens. This example shows how to configure a custom theme with primary and secondary colors.

import { defineConfig } from 'unocss';
import presetUno from '@unocss/preset-uno';

export default defineConfig({
  presets: [
    presetUno(),
  ],
  theme: {
    colors: {
      primary: '#1da1f2',
      secondary: '#14171a',
    },
  },
});

Other packages similar to @unocss/preset-uno

tailwindcss

Tailwind CSS is a utility-first CSS framework similar to @unocss/preset-uno. It provides a wide range of utility classes for rapid UI development. Tailwind CSS is highly customizable and has a large community and ecosystem.

bootstrap

Bootstrap is a popular CSS framework that provides pre-designed components and utility classes. While it is not strictly utility-first like @unocss/preset-uno, it offers a comprehensive set of tools for building responsive and mobile-first websites.

README

@unocss/preset-uno

The default preset for UnoCSS.

Please note that this preset is more like a playground at the current stage to experiment with the possibility of UnoCSS and also as a reference for making a custom preset. It does NOT follow semver and subjects to changes without further notice. We don't recommend using it on serious works. Use custom rules instead to ensure a stable outcome.

Installation

npm i -D @unocss/preset-uno

import presetUno from '@unocss/preset-uno'

Unocss({
  presets: [
    presetUno({ /* options */ })
  ]
})

Usages

This preset is trying to provide a common superset of the popular utilities-first framework, including Tailwind CSS, Windi CSS, Bootstrap, Tachyons, etc.

For example, both ml-3 (Tailwind), ms-2 (Bootstrap), ma4 (Tachyons), mt-10px (Windi CSS) are valid.

.ma4 { margin: 1rem; }
.ml-3 { margin-left: 0.75rem; }
.ms-2 { margin-inline-start: 0.5rem; }
.mt-10px { margin-top: 10px; }

For more details about the default preset, you can check out our playground and try out. Meanwhile, you can also check out the implementation.

License

MIT License © 2021-PRESENT Anthony Fu