Meta tags:
description= Getting started with UnoCSS;
author= Anthony Fu;
Headings (most frequently used words):
integrations, what, is, unocss, guides, presets, play, examples,
Text of the page (most frequently used words):
source (24), play (21), online (20), vite (15), the (13), #unocss (13), you (13), presets (13), your (9), config (9), for (8), can (8), and (8), preset (8), margin (8), css (7), this (6), svelte (6), num (6), rules (6), div (6), postcss (5), astro (5), examples (5), integrations (5), from (5), defineconfig (5), next (4), page (4), scoped (4), code (4), utilities (4), default (4), export (4), import (4), class (4), file (4), guide (4), extension (4), overview (4), extractor (4), why (3), sveltekit (3), twoslash (3), eslint (3), cli (3), runtime (3), webpack (3), nuxt (3), with (3), mypreset (3), uno (3), variants (3), them (3), example (3), will (3), safelist (3), vue3 (2), pug (2), all (2), interactive (2), docs (2), playground (2), provided (2), few (2), community (2), shortcuts (2), share (2), team (2), hello (2), html (2), have (2), arbitrary (2), like (2), use (2), 1px (2), make (2), flexible (2), rule (2), are (2), zed (2), jetbrains (2), ide (2), plugin (2), lsp (2), support (2), extracting (2), style (2), reset (2), getting (2), started (2), navigation (2), extractors (2), attributify (2), transformers (2), copyright, 2021, present, anthony, released, under, mit, license, pager, last, updated, suggest, changes, solid, react, preact, lit, lightningcss, elm, angular, preprocess, remix, qwik, quasar, nuxt3, marko, run, vue, found, directory, cdn, comes, various, frameworks, tools, try, browser, look, similarly, start, using, right, away, also, find, many, interesting, official, own, padding, name, const, once, made, extract, into, others, create, company, design, system, world, doing, now, again, only, generates, whenever, 100, diff, more, dynamic, changing, first, argument, call, matcher, body, function, regexp, detected, following, generated, add, new, utility, project, since, demand, won, anything, until, codebase, say, component, could, define, custom, providing, local, instant, atomic, engine, that, designed, extensible, core, opinionated, via, what, llm, read, better, optimized, documentation, markdown, format, guides, sidebar, return, top, menu, appearance, contributing, release, notes, v66, tutorial, resources, mdc, jsx, compile, directives, variant, group, rem, tagify, legacy, compat, web, fonts, typography, icons, wind4, wind3, mini, autocomplete, layers, preflights, theme, concepts, main, ctrl, search, skip, content,
Text of the page (random words):
guide skip to content unocss search ctrl k main navigation guide guide getting started why unocss presets style reset config file extracting safelist integrations overview integrations vite nuxt next astro svelte scoped webpack runtime cli postcss eslint twoslash lsp support vs code extension jetbrains ide plugin zed extension examples config config file concepts overview rules variants shortcuts theme extractors preflights safelist layers presets transformers autocomplete presets overview community presets presets mini wind3 wind4 icons attributify typography web fonts legacy compat tagify rem to px transformers variant group directives compile class attributify jsx extractors pug extractor mdc extractor svelte extractor arbitrary variants extractor resources interactive docs playground tutorial team v66 7 5 release notes contributing appearance menu return to top sidebar navigation guides getting started why unocss presets style reset config file extracting safelist integrations overview vite nuxt next astro svelte scoped webpack runtime cli postcss eslint twoslash lsp support vs code extension jetbrains ide plugin zed extension examples config presets on this page are you an llm you can read better optimized documentation at guide md for this page in markdown format what is unocss unocss is the instant atomic css engine that is designed to be flexible and extensible the core is un opinionated and all the css utilities are provided via presets for example you could define your custom css utilities by providing rules in your local config file uno config ts ts import defineconfig from unocss export default defineconfig rules m 1 margin 1px this will add a new css utility m 1 to your project since unocss is on demand it won t do anything until you use it in your codebase so say we have a component like this html div class m 1 hello div m 1 will be detected and the following css will be generated css m 1 margin 1 px to make it more flexible you can make your rule dynamic by changing the first argument on the rule we call it matcher to a regexp and the body to a function for example uno config ts diff export default defineconfig rules m 1 margin 1px m d _ num margin num px by doing this now you can have arbitrary margin utilities like m 1 m 100 or m 52 43 and again unocss only generates them whenever you use them html div class m 1 hello div div class m 7 5 world div css m 1 margin 1 px m 7 5 margin 7 5 px presets once you made a few rules you can extract them into a preset and share it with others for example you can create a preset for your company s design system and share it with your team my preset ts ts import preset from unocss export const mypreset preset name my preset rules m d _ num margin num px p d _ num padding num px variants shortcuts uno config ts ts import defineconfig from unocss import mypreset from my preset export default defineconfig presets mypreset your own preset so similarly we provided a few official presets for you to start using right away and you can also find many interesting community presets play you can try unocss in your browser in the playground or look up utilities from the default presets in the interactive docs integrations unocss comes with integrations for various frameworks tools vite nuxt astro svelte scoped webpack cdn runtime cli postcss eslint twoslash vs code examples source code for all the examples can be found in the examples directory astro source play online astro vue source play online marko run source play online next source play online nuxt3 source play online quasar source play online qwik source remix source play online sveltekit source play online sveltekit preprocess source play online sveltekit scoped source play online vite angular source play online vite elm source vite lightningcss source vite lit source play online vite preact source play online vite pug source play online vite react source play online vite solid source play online vite svelte source play online vite svelte postcss source play online vite vue3 source play online vite vue3 postcss source play online suggest changes to this page last updated pager next page why unocss released under the mit license copyright 2021 present anthony fu
|
