Meta tags:
description=The instant on-demand Atomic CSS engine;
author=Anthony Fu;

Headings (most frequently used words):

unocss, css, why, guides, integrations, motivations, how, is, different, from, windi, tailwind,

Text of the page (most frequently used words):
css (24), unocss (22), the (20), and (14), with (13), #tailwind (11), presets (10), you (8), from (7), windi (7), page (5), this (5), design (5), plugin (5), attributify (5), are (5), lot (5), for (5), can (5), integrations (5), overview (5), why (5), config (5), started (4), runtime (4), features (4), top (4), example (4), postcss (4), extension (4), extractor (4), next (3), getting (3), support (3), system (3), web (3), fonts (3), tagify (3), shortcuts (3), variant (3), mode (3), icons (3), able (3), while (3), more (3), build (3), different (3), better (3), atomic (3), own (3), guide (3), svelte (3), safelist (3), file (3), anthony (2), goals (2), not (2), make (2), extensible (2), trade (2), inspector (2), cdn (2), groups (2), pure (2), designed (2), really (2), conventions (2), much (2), want (2), implemented (2), community (2), engine (2), class (2), tools (2), have (2), performance (2), inspiration (2), built (2), ground (2), how (2), apples (2), making (2), team (2), read (2), examples (2), zed (2), jetbrains (2), ide (2), code (2), lsp (2), twoslash (2), eslint (2), cli (2), webpack (2), scoped (2), astro (2), nuxt (2), vite (2), extracting (2), style (2), reset (2), navigation (2), variants (2), extractors (2), transformers (2), copyright, 2021, present, released, under, mit, license, previous, pager, last, updated, suggest, changes, due, differing, over, does, configurations, meaning, might, harder, migrate, heavily, customized, project, intended, decision, high, performant, believe, off, worth, thanks, flexibility, provides, experiment, innovative, technical, offs, aside, also, fully, customizable, opinionated, building, custom, tokens, hard, move, away, pretty, anything, full, control, whole, compatible, utilities, within, there, other, interesting, philosophies, awesome, single, preset, isomorphic, collection, first, including, means, flexible, used, places, which, generates, fly, deep, provide, hmr, developer, experience, both, took, since, great, has, been, prior, arts, abstracted, into, elegant, powerful, api, quite, comparison, but, will, try, list, few, differences, most, importantly, extracted, where, all, optional, easy, create, your, combinations, inherits, demand, nature, that, maximum, extensibility, mind, introduce, new, like, etc, valueless, compilation, was, one, members, taken, work, did, longer, actively, maintained, march, 2023, may, consider, spiritual, successor, recommend, blog, post, written, creator, get, understanding, motivation, behind, reimagine, motivations, llm, optimized, documentation, markdown, format, guides, sidebar, return, menu, appearance, contributing, release, notes, v66, tutorial, playground, interactive, docs, resources, arbitrary, mdc, pug, jsx, compile, directives, group, rem, legacy, compat, typography, wind4, wind3, mini, autocomplete, layers, preflights, theme, rules, concepts, main, ctrl, search, skip, content,

Text of the page (random words):
why unocss 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 why md for this page in markdown format why unocss motivations we recommend you to read the blog post reimagine atomic css written by the creator of unocss anthony fu to get a better understanding of the motivation behind unocss how is unocss different from x windi css unocss was started by one of the windi css s team members with a lot of inspiration taken from the work we did in windi css while windi css is no longer actively maintained as of march 2023 you may consider unocss as a spiritual successor of windi css unocss inherits windi css s on demand nature attributify mode shortcuts variant groups compilation mode and a lot more on top of that unocss is built from the ground up with the maximum extensibility and performance in mind making us able to introduce new features like pure css icons valueless attributify tagify web fonts etc most importantly unocss is extracted as an atomic css engine where all the features are optional and making it easy to create your own conventions own design system and own presets with the combinations of the features you want tailwind css both windi css and unocss took a lot of inspiration from tailwind css since unocss is built from the ground up we are able to have a great overview of how atomic css has been designed with prior arts and abstracted into an elegant and powerful api with quite different design goals it s not really an apples to apples comparison with tailwind css but we will try to list a few differences tailwind css is a postcss plugin while unocss is an isomorphic engine with a collection of first class integrations with build tools including a postcss plugin this means unocss can be much more flexible to be used in different places for example cdn runtime which generates css on the fly and have deep integrations with build tools to provide better hmr performance and developer experience for example the inspector technical trade offs aside unocss is also designed to be fully extensible and customizable while tailwind css is more opinionated building a custom design system or design tokens on top of tailwind css can be hard and you can t really move away from the tailwind css s conventions with unocss you can build pretty much anything you want with full control for example we implemented the whole tailwind css compatible utilities within a single preset and there are a lot of awesome community presets implemented with other interesting philosophies thanks to the flexibility unocss provides we are able to experiment with a lot of innovative features on top of it for example pure css icons attributify mode variant groups shortcuts tagify web fonts cdn runtime inspector due to the differing design goals over tailwind css unocss does not support tailwind css s plugin system or configurations meaning it might make it harder to migrate from a heavily customized tailwind css project this is the intended decision to make unocss high performant and extensible and we believe the trade off is worth it suggest changes to this page last updated pager previous page getting started next page presets released under the mit license copyright 2021 present anthony fu