@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

Readme

Source

@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

FAQs

What is @unocss/preset-uno?

Is @unocss/preset-uno well maintained?

Last updated on 03 Nov 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install