1<!DOCTYPE html> 2<html lang="en-US" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>Presets</title> 7 <meta name="description" content="Presets are the heart of UnoCSS. They let you make your own custom framework in minutes."> 8 <meta name="generator" content="VitePress v2.0.0-alpha.20"> 9 10 <link rel="preload stylesheet" href="/assets/style.Ng0q8Eez.css" as="style"> 11 <link rel="preload stylesheet" href="/assets/vp-icons.0c24ff17.css" as="style"> 12
12<script type="module" src="/assets/chunks/metadata.b52a9f99.js"></script>
12 13
13<script type="module" src="/assets/app.CxX7OAlo.js"></script>
13 14 <link rel="preload" href="/assets/inter-roman-latin.q5rAVC0E.woff2" as="font" type="font/woff2" crossorigin=""> 15 <link rel="modulepreload" href="/assets/chunks/framework.GGfqtSwG.js"> 16 <link rel="modulepreload" href="/assets/chunks/theme.DSatvBTn.js"> 17 <link rel="modulepreload" href="/assets/guide_presets.md.BLKlARwH.lean.js"> 18 <link rel="icon" href="/favicon.svg" type="image/svg+xml"> 19 <link rel="alternate icon" href="/favicon.ico" type="image/png" sizes="16x16"> 20 <meta name="author" content="Anthony Fu"> 21 <meta property="og:type" content="website"> 22 <meta name="og:title" content="UnoCSS"> 23 <meta name="og:description" content="The instant on-demand Atomic CSS engine"> 24 <meta property="og:image" content="https://unocss.dev/og.png#1"> 25 <meta name="twitter:title" content="UnoCSS"> 26 <meta name="twitter:card" content="summary_large_image"> 27 <meta name="twitter:image" content="https://unocss.dev/og.png#1"> 28 <meta name="twitter:site" content="@antfu7"> 29 <meta name="twitter:url" content="https://unocss.dev/"> 30 <link rel="search" type="application/opensearchdescription+xml" href="/search.xml" title="UnoCSS"> 31
31<script id="check-dark-mode">(()=>{let e=localStorage.getItem(`vitepress-theme-appearance`)||`auto`,t=window.matchMedia(`(prefers-color-scheme: dark)`).matches;(!e||e===`auto`?t:e===`dark`)&&document.documentElement.classList.add(`dark`)})();</script>
31 32
32<script id="check-mac-os">document.documentElement.classList.toggle(`mac`,/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
32 33 <link href="/guide/presets.md" rel="alternate" type="text/markdown"> 34 <link href="/llms.txt" rel="describedby"> 35 </head> 36 <body> 37 <div id="app"><div class="Layout" data-v-8af3c850><!--[--><!--]--><!--[--><span tabindex="-1" data-v-10a61f80></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-10a61f80>Skip to content</a><!--]--><!----><header class="VPNav" data-v-8af3c850 data-v-1d2c7988><div class="VPNavBar has-sidebar top" data-v-1d2c7988 data-v-4368b3b4><div class="wrapper" data-v-4368b3b4><div class="container" data-v-4368b3b4><div class="title" data-v-4368b3b4><div class="VPNavBarTitle has-sidebar" data-v-4368b3b4 data-v-434c7330><a class="title" href="/" title="UnoCSS" data-v-434c7330><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.svg" alt data-v-9d323cfd><!--]--><span data-v-434c7330>UnoCSS</span><!--[--><!--]--></a></div></div><div class="content" data-v-4368b3b4><div class="content-body" data-v-4368b3b4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-4368b3b4 data-v-733f58dc><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-733f58dc data-v-a7c3ce61><span class="vpi-search" aria-hidden="true" data-v-a7c3ce61></span><span class="text" data-v-a7c3ce61>Search</span><span class="keys" aria-hidden="true" data-v-a7c3ce61><kbd class="key-mod" data-v-a7c3ce61></kbd><kbd class="key-k" data-v-a7c3ce61></kbd></span></button><!----><!--]--></div><nav aria-label="Main Navigation" class="VPNavMenu VPNavBarMenu menu" data-v-4368b3b4 data-v-fea233a5><ul class="list" data-v-fea233a5><!--[--><li class="" data-v-fea233a5><div class="VPFlyout VPNavMenuGroup VPNavBarMenuGroup active" data-v-fea233a5 data-v-43b5c269 data-v-fec5f71f><button type="button" class="button" aria-expanded="false" aria-controls="v-1" data-v-fec5f71f><span class="text" data-v-fec5f71f><!----><span data-v-fec5f71f>Guide</span><span class="vpi-chevron-down text-icon" aria-hidden="true" data-v-fec5f71f></span></span></button><div class="menu" id="v-1" data-v-fec5f71f><div class="VPMenu" data-v-fec5f71f data-v-6abf4b94><ul class="items" data-v-6abf4b94><!--[--><!--[--><li class="VPMenuGroup" data-v-6abf4b94 data-v-cf372d3a><p class="title" data-v-cf372d3a>Guide</p><ul class="" data-v-cf372d3a><!--[--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/guide/" data-v-d48a588d><!--[--><span data-v-d48a588d>Getting Started</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/guide/why" data-v-d48a588d><!--[--><span data-v-d48a588d>Why UnoCSS?</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link active" href="/guide/presets" aria-current="page" data-v-d48a588d><!--[--><span data-v-d48a588d>Presets</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/guide/style-reset" data-v-d48a588d><!--[--><span data-v-d48a588d>Style reset</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/guide/config-file" data-v-d48a588d><!--[--><span data-v-d48a588d>Config file</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/guide/extracting" data-v-d48a588d><!--[--><span data-v-d48a588d>Extracting & Safelist</span><!--]--></a></li><!--]--><!--]--></ul></li><!--]--><!--]--></ul><!--[--><!--]--></div></div></div></li><li class="" data-v-fea233a5><div class="VPFlyout VPNavMenuGroup VPNavBarMenuGroup" data-v-fea233a5 data-v-43b5c269 data-v-fec5f71f><button type="button" class="button" aria-expanded="false" aria-controls="v-3" data-v-fec5f71f><span class="text" data-v-fec5f71f><!----><span data-v-fec5f71f>Integrations</span><span class="vpi-chevron-down text-icon" aria-hidden="true" data-v-fec5f71f></span></span></button><div class="menu" id="v-3" data-v-fec5f71f><div class="VPMenu" data-v-fec5f71f data-v-6abf4b94><ul class="items" data-v-6abf4b94><!--[--><!--[--><li class="VPMenuLink" data-v-6abf4b94 data-v-d48a588d><a class="VPLink link" href="/integrations/" data-v-d48a588d><!--[--><span data-v-d48a588d>Overview</span><!--]--></a></li>
37<!--]--><!--[--><li class="VPMenuGroup" data-v-6abf4b94 data-v-cf372d3a><p class="title" data-v-cf372d3a>Integrations</p><ul class="" data-v-cf372d3a><!--[--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/vite" data-v-d48a588d><!--[--><span data-v-d48a588d>Vite</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/nuxt" data-v-d48a588d><!--[--><span data-v-d48a588d>Nuxt</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/next" data-v-d48a588d><!--[--><span data-v-d48a588d>Next</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/astro" data-v-d48a588d><!--[--><span data-v-d48a588d>Astro</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/svelte-scoped" data-v-d48a588d><!--[--><span data-v-d48a588d>Svelte Scoped</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/webpack" data-v-d48a588d><!--[--><span data-v-d48a588d>Webpack</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/rollup" data-v-d48a588d><!--[--><span data-v-d48a588d>Rollup and Rolldown</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/runtime" data-v-d48a588d><!--[--><span data-v-d48a588d>Runtime</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/cli" data-v-d48a588d><!--[--><span data-v-d48a588d>CLI</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/postcss" data-v-d48a588d><!--[--><span data-v-d48a588d>PostCSS</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/eslint" data-v-d48a588d><!--[--><span data-v-d48a588d>ESLint</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/twoslash" data-v-d48a588d><!--[--><span data-v-d48a588d>Twoslash</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/lsp" data-v-d48a588d><!--[--><span data-v-d48a588d>LSP Support</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/vscode" data-v-d48a588d><!--[--><span data-v-d48a588d>VS Code Extension</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/jetbrains" data-v-d48a588d><!--[--><span data-v-d48a588d>JetBrains IDE Plugin</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/integrations/zed" data-v-d48a588d><!--[--><span data-v-d48a588d>Zed Extension</span><!--]--></a></li><!--]--><!--]--></ul></li><!--]--><!--[--><li class="VPMenuLink" data-v-6abf4b94 data-v-d48a588d><a class="VPLink link" href="/integrations/#examples" data-v-d48a588d><!--[--><span data-v-d48a588d>Examples</span><!--]--></a></li><!--]--><!--]--></ul><!--[--><!--]--></div></div></div></li><li class="" data-v-fea233a5><div class="VPFlyout VPNavMenuGroup VPNavBarMenuGroup" data-v-fea233a5 data-v-43b5c269 data-v-fec5f71f><button type="button" class="button" aria-expanded="false" aria-controls="v-5" data-v-fec5f71f><span class="text" data-v-fec5f71f><!----><span data-v-fec5f71f>Config</span><span class="vpi-chevron-down text-icon" aria-hidden="true" data-v-fec5f71f></span></span></button><div class="menu" id="v-5" data-v-fec5f71f><div class="VPMenu" data-v-fec5f71f data-v-6abf4b94><ul class="items" data-v-6abf4b94><!--[--><!--[--><li class="VPMenuLink" data-v-6abf4b94 data-v-d48a588d><a class="VPLink link" href="/guide/config-file" data-v-d48a588d><!--[--><span data-v-d48a588d>Config File</span><!--]--></a></li>
37<!--]--><!--[--><li class="VPMenuGroup" data-v-6abf4b94 data-v-cf372d3a><p class="title" data-v-cf372d3a>Concepts</p><ul class="" data-v-cf372d3a><!--[--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/config/" data-v-d48a588d><!--[--><span data-v-d48a588d>Overview</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/config/rules" data-v-d48a588d><!--[--><span data-v-d48a588d>Rules</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/config/variants" data-v-d48a588d><!--[--><span data-v-d48a588d>Variants</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/config/shortcuts" data-v-d48a588d><!--[--><span data-v-d48a588d>Shortcuts</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/config/theme" data-v-d48a588d><!--[--><span data-v-d48a588d>Theme</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/config/extractors" data-v-d48a588d><!--[--><span data-v-d48a588d>Extractors</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/config/preflights" data-v-d48a588d><!--[--><span data-v-d48a588d>Preflights</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/config/safelist" data-v-d48a588d><!--[--><span data-v-d48a588d>Safelist</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/config/layers" data-v-d48a588d><!--[--><span data-v-d48a588d>Layers</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/config/presets" data-v-d48a588d><!--[--><span data-v-d48a588d>Presets</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/config/transformers" data-v-d48a588d><!--[--><span data-v-d48a588d>Transformers</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/config/processors" data-v-d48a588d><!--[--><span data-v-d48a588d>Processors</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/config/autocomplete" data-v-d48a588d><!--[--><span data-v-d48a588d>AutoComplete</span><!--]--></a></li><!--]--><!--]--></ul></li><!--]--><!--]--></ul><!--[--><!--]--></div></div></div></li><li class="" data-v-fea233a5><div class="VPFlyout VPNavMenuGroup VPNavBarMenuGroup" data-v-fea233a5 data-v-43b5c269 data-v-fec5f71f><button type="button" class="button" aria-expanded="false" aria-controls="v-7" data-v-fec5f71f><span class="text" data-v-fec5f71f><!----><span data-v-fec5f71f>Presets</span><span class="vpi-chevron-down text-icon" aria-hidden="true" data-v-fec5f71f></span></span></button><div class="menu" id="v-7" data-v-fec5f71f><div class="VPMenu" data-v-fec5f71f data-v-6abf4b94><ul class="items" data-v-6abf4b94><!--[--><!--[--><li class="VPMenuLink" data-v-6abf4b94 data-v-d48a588d><a class="VPLink link" href="/presets/" data-v-d48a588d><!--[--><span data-v-d48a588d>Overview</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-6abf4b94 data-v-d48a588d><a class="VPLink link vp-external-link-icon" href="https://github.com/unocss-community" target="_blank" rel="noreferrer" data-v-d48a588d><!--[--><span data-v-d48a588d>Community Presets</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuGroup" data-v-6abf4b94 data-v-cf372d3a><p class="title" data-v-cf372d3a>Presets</p><ul class="" data-v-cf372d3a><!--[--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/presets/mini" data-v-d48a588d><!--[--><span data-v-d48a588d>Mini</span><!--]--></a></li>
37<!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/presets/wind3" data-v-d48a588d><!--[--><span data-v-d48a588d>Wind3</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/presets/wind4" data-v-d48a588d><!--[--><span data-v-d48a588d>Wind4</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/presets/icons" data-v-d48a588d><!--[--><span data-v-d48a588d>Icons</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/presets/attributify" data-v-d48a588d><!--[--><span data-v-d48a588d>Attributify</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/presets/typography" data-v-d48a588d><!--[--><span data-v-d48a588d>Typography</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/presets/web-fonts" data-v-d48a588d><!--[--><span data-v-d48a588d>Web fonts</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/presets/legacy-compat" data-v-d48a588d><!--[--><span data-v-d48a588d>Legacy Compat</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/presets/tagify" data-v-d48a588d><!--[--><span data-v-d48a588d>Tagify</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/presets/rem-to-px" data-v-d48a588d><!--[--><span data-v-d48a588d>Rem to px</span><!--]--></a></li><!--]--><!--]--></ul></li><!--]--><!--[--><li class="VPMenuGroup" data-v-6abf4b94 data-v-cf372d3a><p class="title" data-v-cf372d3a>Transformers</p><ul class="" data-v-cf372d3a><!--[--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/transformers/variant-group" data-v-d48a588d><!--[--><span data-v-d48a588d>Variant Group</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/transformers/directives" data-v-d48a588d><!--[--><span data-v-d48a588d>Directives</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/transformers/compile-class" data-v-d48a588d><!--[--><span data-v-d48a588d>Compile Class</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/transformers/attributify-jsx" data-v-d48a588d><!--[--><span data-v-d48a588d>Attributify JSX</span><!--]--></a></li><!--]--><!--]--></ul></li><!--]--><!--[--><li class="VPMenuGroup" data-v-6abf4b94 data-v-cf372d3a><p class="title" data-v-cf372d3a>Extractors</p><ul class="" data-v-cf372d3a><!--[--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/extractors/pug" data-v-d48a588d><!--[--><span data-v-d48a588d>Pug Extractor</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/extractors/mdc" data-v-d48a588d><!--[--><span data-v-d48a588d>MDC Extractor</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/extractors/svelte" data-v-d48a588d><!--[--><span data-v-d48a588d>Svelte Extractor</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/extractors/arbitrary-variants" data-v-d48a588d><!--[--><span data-v-d48a588d>Arbitrary Variants Extractor</span><!--]--></a></li><!--]--><!--]--></ul></li><!--]--><!--[--><li class="VPMenuGroup" data-v-6abf4b94 data-v-cf372d3a><p class="title" data-v-cf372d3a>Processors</p><ul class="" data-v-cf372d3a><!--[--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/processors/lightningcss" data-v-d48a588d><!--[--><span data-v-d48a588d>Lightning CSS</span><!--]--></a></li>
37<!--]--><!--]--></ul></li><!--]--><!--]--></ul><!--[--><!--]--></div></div></div></li><li class="" data-v-fea233a5><div class="VPFlyout VPNavMenuGroup VPNavBarMenuGroup" data-v-fea233a5 data-v-43b5c269 data-v-fec5f71f><button type="button" class="button" aria-expanded="false" aria-controls="v-9" data-v-fec5f71f><span class="text" data-v-fec5f71f><!----><span data-v-fec5f71f>Resources</span><span class="vpi-chevron-down text-icon" aria-hidden="true" data-v-fec5f71f></span></span></button><div class="menu" id="v-9" data-v-fec5f71f><div class="VPMenu" data-v-fec5f71f data-v-6abf4b94><ul class="items" data-v-6abf4b94><!--[--><!--[--><li class="VPMenuLink" data-v-6abf4b94 data-v-d48a588d><a class="VPLink link vp-external-link-icon" href="/interactive/" target="_blank" rel="noreferrer" data-v-d48a588d><!--[--><span data-v-d48a588d>Interactive Docs</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-6abf4b94 data-v-d48a588d><a class="VPLink link vp-external-link-icon" href="/play/" target="_blank" rel="noreferrer" data-v-d48a588d><!--[--><span data-v-d48a588d>Playground</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-6abf4b94 data-v-d48a588d><a class="VPLink link vp-external-link-icon" href="https://tutorial.unocss.dev/" target="_blank" rel="noreferrer" data-v-d48a588d><!--[--><span data-v-d48a588d>Tutorial</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuGroup" data-v-6abf4b94 data-v-cf372d3a><!----><ul class="" data-v-cf372d3a><!--[--><!--[--><li class="VPMenuLink" data-v-cf372d3a data-v-d48a588d><a class="VPLink link" href="/team" data-v-d48a588d><!--[--><span data-v-d48a588d>Team</span><!--]--></a></li><!--]--><!--]--></ul></li><!--]--><!--]--></ul><!--[--><!--]--></div></div></div></li><li class="" data-v-fea233a5><div class="VPFlyout VPNavMenuGroup VPNavBarMenuGroup" data-v-fea233a5 data-v-43b5c269 data-v-fec5f71f><button type="button" class="button" aria-expanded="false" aria-controls="v-11" data-v-fec5f71f><span class="text" data-v-fec5f71f><!----><span data-v-fec5f71f>v66.10.5</span><span class="vpi-chevron-down text-icon" aria-hidden="true" data-v-fec5f71f></span></span></button><div class="menu" id="v-11" data-v-fec5f71f><div class="VPMenu" data-v-fec5f71f data-v-6abf4b94><ul class="items" data-v-6abf4b94><!--[--><!--[--><li class="VPMenuLink" data-v-6abf4b94 data-v-d48a588d><a class="VPLink link vp-external-link-icon" href="https://github.com/unocss/unocss/releases" target="_blank" rel="noreferrer" data-v-d48a588d><!--[--><span data-v-d48a588d>Release Notes</span><!--]--></a></li><!--]--><!--[--><li class="VPMenuLink" data-v-6abf4b94 data-v-d48a588d><a class="VPLink link vp-external-link-icon" href="https://github.com/unocss/unocss/blob/main/.github/CONTRIBUTING.md" target="_blank" rel="noreferrer" data-v-d48a588d><!--[--><span data-v-d48a588d>Contributing</span><!--]--></a></li><!--]--><!--[--><!----><!--]--><!--]--></ul><!--[--><!--]--></div></div></div></li><!--]--></ul></nav><!----><div class="VPNavAppearance VPNavBarAppearance appearance" data-v-4368b3b4 data-v-5d385e21><!----><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-label="Appearance" aria-checked="false" data-v-5d385e21 data-v-a6445aaf data-v-2073e0a0><span class="check" data-v-2073e0a0><span class="icon" data-v-2073e0a0><!--[--><span class="vpi-sun sun" aria-hidden="true" data-v-a6445aaf></span><span class="vpi-moon moon" aria-hidden="true" data-v-a6445aaf></span><!--]--></span></span></button></div><ul class="VPSocialLinks VPNavSocialLinks VPNavBarSocialLinks social-links" data-v-4368b3b4 data-v-e89b3cb2 data-v-1fca6a22><!--[--><li data-v-1fca6a22><a class="VPSocialLink no-icon" href="https://bsky.app/profile/unocss.dev" aria-label="bluesky" target="_blank" rel="me noopener" data-v-1fca6a22 data-v-6a20043f><span class="vpi-simple-icons-bluesky" data-v-6a20043f data-v-3f2dd75e></span></a></li><li data-v-1fca6a22><a class="VPSocialLink no-icon" href="https://github.com/unocss/unocss" aria-label="github" target="_blank" rel="me noopener" data-v-1fca6a22 data-v-6a20043f><span class="vpi-simple-icons-github" data-v-6a20043f data-v-3f2dd75e></span></a></li><li data-v-1fca6a22><a class="VPSocialLink no-icon" href="https://chat.antfu.me" aria-label="discord" target="_blank" rel="me noopener" data-v-1fca6a22 data-v-6a20043f><span class="vpi-simple-icons-discord" data-v-6a20043f data-v-3f2dd75e></span></a></li>
37<!--]--></ul><!----><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="Menu" aria-expanded="false" data-v-4368b3b4 data-v-612da7ff><span class="container" aria-hidden="true" data-v-612da7ff><span class="top" data-v-612da7ff></span><span class="middle" data-v-612da7ff></span><span class="bottom" data-v-612da7ff></span></span></button></div></div></div></div><div class="divider" data-v-4368b3b4><div class="divider-line" data-v-4368b3b4></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-8af3c850 data-v-6ba62dcf><div class="container" data-v-6ba62dcf><button type="button" class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-6ba62dcf><span class="vpi-align-left menu-icon" aria-hidden="true" data-v-6ba62dcf></span><span class="menu-text" data-v-6ba62dcf>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-allow-mismatch="style" data-v-6ba62dcf data-v-789bf0f5><button type="button" data-v-789bf0f5>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-8af3c850 data-v-806af97d><div class="curtain" data-v-806af97d></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-806af97d><span class="visually-hidden" id="sidebar-aria-label" data-v-806af97d> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-a9f409db><section class="VPSidebarItem level-0 has-active" data-v-a9f409db data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><h2 class="text" data-v-829dffcc>Guides</h2><!----></div><ul class="items" data-v-829dffcc><li data-v-829dffcc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/guide/" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Getting Started</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/guide/why" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Why UnoCSS?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/guide/presets" aria-current="page" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Presets</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/guide/style-reset" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Style reset</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/guide/config-file" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Config file</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/guide/extracting" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Extracting & Safelist</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-a9f409db><section class="VPSidebarItem level-0" data-v-a9f409db data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><h2 class="text" data-v-829dffcc>Integrations</h2><!----></div><ul class="items" data-v-829dffcc><li data-v-829dffcc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Overview</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/vite" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Vite</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/nuxt" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Nuxt</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/next" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Next</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/astro" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Astro</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/svelte-scoped" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Svelte Scoped</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/webpack" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Webpack</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/rollup" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Rollup and Rolldown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/runtime" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Runtime</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/cli" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>CLI</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/postcss" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>PostCSS</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/eslint" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>ESLint</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/twoslash" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Twoslash</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/lsp" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>LSP Support</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/vscode" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>VS Code Extension</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/jetbrains" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>JetBrains IDE Plugin</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/zed" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Zed Extension</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/integrations/#examples" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Examples</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-a9f409db><div class="VPSidebarItem level-0" data-v-a9f409db data-v-829dffcc><!----><ul class="items" data-v-829dffcc><li data-v-829dffcc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/config/" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Config</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-829dffcc><div class="item" data-v-829dffcc><div class="indicator" data-v-829dffcc></div><a class="VPLink link link" href="/presets/" data-v-829dffcc><!--[--><p class="text" data-v-829dffcc>Presets</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></div></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-8af3c850 data-v-a8878bd4><div class="VPDoc has-sidebar has-aside" data-v-a8878bd4 data-v-30519567><!--[--><!--]--><div class="container" data-v-30519567><div class="aside" data-v-30519567><div class="aside-curtain" data-v-30519567></div><div class="aside-container" data-v-30519567><div class="aside-content" data-v-30519567><div class="VPDocAside" data-v-30519567 data-v-f12e4673><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-f12e4673 data-v-a4823923><div class="content" data-v-a4823923><div class="outline-marker" data-v-a4823923></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a4823923>On this page</div><ul class="VPDocOutlineItem root" data-v-a4823923 data-v-5164d638><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-f12e4673></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-30519567><div class="content-container" data-v-30519567><!--[--><!--]--><main class="main" data-v-30519567><div style="position:relative;" class="vp-doc _guide_presets" data-v-30519567><div>
37<h1 id="presets" tabindex="-1">Presets <a class="header-anchor" href="#presets" aria-label="Permalink to âPresetsâ">â</a></h1><p>Presets are the heart of UnoCSS. They let you make your own custom framework in minutes.</p><h2 id="using-presets" tabindex="-1">Using presets <a class="header-anchor" href="#using-presets" aria-label="Permalink to âUsing presetsâ">â</a></h2><p>To set presets to your project:</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title="uno.config.ts">uno.config.ts</span></div><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes vitesse-light vitesse-dark twoslash lsp" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"><div class="v-popper v-popper--theme-twoslash v-popper--theme-dropdown twoslash-hover"><!--[--><span>defineConfig</span><!--]--><div id="popper_599artct_q7j971" data-allow-mismatch class="v-popper__popper v-popper--theme-twoslash v-popper--theme-dropdown shiki twoslash-floating vp-copy-ignore v-popper__popper--hidden v-popper__popper--hide-to" style="position:fixed;transform:translate3d(0px,0px,0);" aria-hidden="false" tabindex="0" data-popper-placement><div class="v-popper__backdrop"></div><div class="v-popper__wrapper" style=""><div class="v-popper__inner"></div><div class="v-popper__arrow-container" style="left:0px;top:0px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div></div></span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"><div class="v-popper v-popper--theme-twoslash v-popper--theme-dropdown twoslash-hover"><!--[--><span>presetAttributify</span><!--]--><div id="popper_ijmvqlrn_q7j971" data-allow-mismatch class="v-popper__popper v-popper--theme-twoslash v-popper--theme-dropdown shiki twoslash-floating vp-copy-ignore v-popper__popper--hidden v-popper__popper--hide-to" style="position:fixed;transform:translate3d(0px,0px,0);" aria-hidden="false" tabindex="0" data-popper-placement><div class="v-popper__backdrop"></div><div class="v-popper__wrapper" style=""><div class="v-popper__inner"></div><div class="v-popper__arrow-container" style="left:0px;top:0px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div></div></span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"><div class="v-popper v-popper--theme-twoslash v-popper--theme-dropdown twoslash-hover"><!--[--><span>presetWind3</span><!--]--><div id="popper_36jodg6q_q7j971" data-allow-mismatch class="v-popper__popper v-popper--theme-twoslash v-popper--theme-dropdown shiki twoslash-floating vp-copy-ignore v-popper__popper--hidden v-popper__popper--hide-to" style="position:fixed;transform:translate3d(0px,0px,0);" aria-hidden="false" tabindex="0" data-popper-placement><div class="v-popper__backdrop"></div><div class="v-popper__wrapper" style=""><div class="v-popper__inner"></div><div class="v-popper__arrow-container" style="left:0px;top:0px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div></div></span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">unocss</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span></span> 38<span class="line"></span> 39<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"><div class="v-popper v-popper--theme-twoslash v-popper--theme-dropdown twoslash-hover"><!--[--><span>defineConfig</span><!--]--><div id="popper_3r2vd1m9_q7j972" data-allow-mismatch class="v-popper__popper v-popper--theme-twoslash v-popper--theme-dropdown shiki twoslash-floating vp-copy-ignore v-popper__popper--hidden v-popper__popper--hide-to" style="position:fixed;transform:translate3d(0px,0px,0);" aria-hidden="false" tabindex="0" data-popper-placement><div class="v-popper__backdrop"></div><div class="v-popper__wrapper" style=""><div class="v-popper__inner"></div><div class="v-popper__arrow-container" style="left:0px;top:0px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div></div></span><span style="--shiki-light:#999999;--shiki-dark:#666666;">
39({</span></span> 40<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> </span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"><div class="v-popper v-popper--theme-twoslash v-popper--theme-dropdown twoslash-hover"><!--[--><span>presets</span><!--]--><div id="popper_01dcm2z3_q7j972" data-allow-mismatch class="v-popper__popper v-popper--theme-twoslash v-popper--theme-dropdown shiki twoslash-floating vp-copy-ignore v-popper__popper--hidden v-popper__popper--hide-to" style="position:fixed;transform:translate3d(0px,0px,0);" aria-hidden="false" tabindex="0" data-popper-placement><div class="v-popper__backdrop"></div><div class="v-popper__wrapper" style=""><div class="v-popper__inner"></div><div class="v-popper__arrow-container" style="left:0px;top:0px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div></div></span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: [</span></span> 41<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"><div class="v-popper v-popper--theme-twoslash v-popper--theme-dropdown twoslash-hover"><!--[--><span>presetAttributify</span><!--]--><div id="popper_5fcrehke_q7j972" data-allow-mismatch class="v-popper__popper v-popper--theme-twoslash v-popper--theme-dropdown shiki twoslash-floating vp-copy-ignore v-popper__popper--hidden v-popper__popper--hide-to" style="position:fixed;transform:translate3d(0px,0px,0);" aria-hidden="false" tabindex="0" data-popper-placement><div class="v-popper__backdrop"></div><div class="v-popper__wrapper" style=""><div class="v-popper__inner"></div><div class="v-popper__arrow-container" style="left:0px;top:0px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div></div></span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({ </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">/* preset options */</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">}),</span></span> 42<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"><div class="v-popper v-popper--theme-twoslash v-popper--theme-dropdown twoslash-hover"><!--[--><span>presetWind3</span><!--]--><div id="popper_6uph8jfu_q7j972" data-allow-mismatch class="v-popper__popper v-popper--theme-twoslash v-popper--theme-dropdown shiki twoslash-floating vp-copy-ignore v-popper__popper--hidden v-popper__popper--hide-to" style="position:fixed;transform:translate3d(0px,0px,0);" aria-hidden="false" tabindex="0" data-popper-placement><div class="v-popper__backdrop"></div><div class="v-popper__wrapper" style=""><div class="v-popper__inner"></div><div class="v-popper__arrow-container" style="left:0px;top:0px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div></div></span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(),</span></span> 43<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // ...custom presets</span></span> 44<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ],</span></span> 45<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div></div><p>When the <code>presets</code> option is specified, the default preset will be ignored.</p><p>To disable the default preset, you can set <code>presets</code> to an empty array:</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title="uno.config.ts">uno.config.ts</span></div><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes vitesse-light vitesse-dark twoslash lsp" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">
45import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"><div class="v-popper v-popper--theme-twoslash v-popper--theme-dropdown twoslash-hover"><!--[--><span>defineConfig</span><!--]--><div id="popper_45q19hx1_q7j972" data-allow-mismatch class="v-popper__popper v-popper--theme-twoslash v-popper--theme-dropdown shiki twoslash-floating vp-copy-ignore v-popper__popper--hidden v-popper__popper--hide-to" style="position:fixed;transform:translate3d(0px,0px,0);" aria-hidden="false" tabindex="0" data-popper-placement><div class="v-popper__backdrop"></div><div class="v-popper__wrapper" style=""><div class="v-popper__inner"></div><div class="v-popper__arrow-container" style="left:0px;top:0px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div></div></span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">unocss</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span></span> 46<span class="line"></span> 47<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"><div class="v-popper v-popper--theme-twoslash v-popper--theme-dropdown twoslash-hover"><!--[--><span>defineConfig</span><!--]--><div id="popper_d8gt5l80_q7j972" data-allow-mismatch class="v-popper__popper v-popper--theme-twoslash v-popper--theme-dropdown shiki twoslash-floating vp-copy-ignore v-popper__popper--hidden v-popper__popper--hide-to" style="position:fixed;transform:translate3d(0px,0px,0);" aria-hidden="false" tabindex="0" data-popper-placement><div class="v-popper__backdrop"></div><div class="v-popper__wrapper" style=""><div class="v-popper__inner"></div><div class="v-popper__arrow-container" style="left:0px;top:0px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div></div></span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span> 48<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> </span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"><div class="v-popper v-popper--theme-twoslash v-popper--theme-dropdown twoslash-hover"><!--[--><span>presets</span><!--]--><div id="popper_jlfmpka0_q7j973" data-allow-mismatch class="v-popper__popper v-popper--theme-twoslash v-popper--theme-dropdown shiki twoslash-floating vp-copy-ignore v-popper__popper--hidden v-popper__popper--hide-to" style="position:fixed;transform:translate3d(0px,0px,0);" aria-hidden="false" tabindex="0" data-popper-placement><div class="v-popper__backdrop"></div><div class="v-popper__wrapper" style=""><div class="v-popper__inner"></div><div class="v-popper__arrow-container" style="left:0px;top:0px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div></div></span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: [], </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// disable default preset</span></span> 49<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> </span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"><div class="v-popper v-popper--theme-twoslash v-popper--theme-dropdown twoslash-hover"><!--[--><span>rules</span><!--]--><div id="popper_lc88slnc_q7j973" data-allow-mismatch class="v-popper__popper v-popper--theme-twoslash v-popper--theme-dropdown shiki twoslash-floating vp-copy-ignore v-popper__popper--hidden v-popper__popper--hide-to" style="position:fixed;transform:translate3d(0px,0px,0);" aria-hidden="false" tabindex="0" data-popper-placement><div class="v-popper__backdrop"></div><div class="v-popper__wrapper" style=""><div class="v-popper__inner"></div><div class="v-popper__arrow-container" style="left:0px;top:0px;"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div></div></span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: [</span></span> 50<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // your custom rules</span></span> 51<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ],</span></span> 52<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div></div><p>You can check <a href="/presets/">official presets</a> and <a href="/presets/community">community presets</a> for more.</p><h2 id="creating-presets" tabindex="-1">Creating presets <a class="header-anchor" href="#creating-presets" aria-label="Permalink to âCreating presetsâ">â</a></h2><p>To see how you can create your own custom preset, see <a href="/config/presets">Config: presets</a>.</p></div></div></main><footer class="VPDocFooter" data-v-30519567 data-v-006ec42a><!--[--><!--]--><div class="edit-info" data-v-006ec42a><div class="edit-link" data-v-006ec42a><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/unocss/unocss/edit/main/docs/guide/presets.md" target="_blank" rel="noreferrer" data-v-006ec42a><!--[--><span class="vpi-square-pen edit-link-icon" data-v-006ec42a></span> Suggest changes to this page<!--]--></a></div><div class="last-updated" data-v-006ec42a><p class="VPLastUpdated" data-v-006ec42a data-v-82e0b600>Last updated: <time datetime="2026-02-25T10:01:48.000Z" data-v-82e0b600></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-006ec42a><span class="visually-hidden" id="doc-footer-aria-label" data-v-006ec42a>Pager</span><div class="pager" data-v-006ec42a><a class="VPLink link pager-link prev" href="/guide/why" data-v-006ec42a><!--[--><span class="desc" data-v-006ec42a>Previous page</span><span class="title" data-v-006ec42a>Why UnoCSS?</span><!--]--></a></div><div class="pager" data-v-006ec42a><a class="VPLink link pager-link next" href="/guide/style-reset" data-v-006ec42a><!--[--><span class="desc" data-v-006ec42a>Next page</span><span class="title" data-v-006ec42a>Style reset</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-8af3c850 data-v-89622c5b><div class="container" data-v-89622c5b><p class="message" data-v-89622c5b>Released under the MIT License.</p><p class="copyright" data-v-89622c5b>Copyright © 2021-PRESENT Anthony Fu</p></div></footer><!--[--><!--]--></div></div> 53 54 55 </body> 56</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.