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

Documentation

Please refer to the documentation.

License

MIT License © 2021-PRESENT Anthony Fu