Presets

Presets are collections of rules, shortcuts, variants, preflights and more. The default preset presetWind3 is a preset that aims to be compatible with other utility-first frameworks like Tailwind CSS.

By creating a preset you can create a new framework or feature inside UnoCSS and if you want to share it you can release it as a package for others to use.

Presets can be loaded using the presets array inside uno.config.js.

import { defineConfig, presetWind3 } from "unocss";

export default defineConfig({
  presets: [presetWind3()],
});

UnoCSS has many presets like presetIcons, presetTypography and presetIcons and there are many community presets as well. They can be found here: official presets and here: community presets

In the next lesson we will create a new preset and use it.