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

Headings (most frequently used words):

screen, postcss, plugin, guides, integrations, install, usage, unocss, apply, theme, breakpoint, variant, support, lt, at,

Text of the page (most frequently used words):
grid (46), unocss (27), css (18), apply (13), screen (13), #postcss (12), minmax (10), repeat (10), template (10), columns (10), cols (10), width (9), you (9), config (8), media (8), presets (8), will (7), theme (7), the (5), page (5), this (5), min (5), layer (5), plugin (5), max (4), and (4), transformed (4), can (4), style (4), svelte (4), bash (4), integrations (4), extension (4), overview (4), extractor (4), eslint (3), next (3), cli (3), blue (3), use (3), display (3), variants (3), support (3), from (3), rem (3), preflights (3), want (3), all (3), include (3), layers (3), default (3), astro (3), add (3), code (3), safelist (3), file (3), changes (2), background (2), color (2), btn (2), 500 (2), your (2), 639 (2), 320 (2), also (2), supports (2), variant (2), directive (2), breakpoints (2), font (2), center (2), text (2), margin (2), top (2), custom (2), div (2), are (2), generated (2), presetwind3 (2), jsx (2), content (2), defineconfig (2), export (2), import (2), bun (2), install (2), npm (2), yarn (2), pnpm (2), for (2), directives (2), examples (2), zed (2), jetbrains (2), ide (2), lsp (2), twoslash (2), runtime (2), webpack (2), scoped (2), nuxt (2), vite (2), extracting (2), reset (2), why (2), getting (2), started (2), navigation (2), extractors (2), attributify (2), transformers (2), guide (2), copyright, 2021, present, anthony, released, under, mit, license, previous, pager, last, updated, suggest, 3b82f6, compiled, colors, function, access, values, using, dot, notation, 1536, 1535, 1280, xxl, 319, breakpoint, 640, allows, create, queries, that, reference, name, comes, weight, align, bottom, medium, other, exclude, specific, matter, whether, they, previously, included, not, useful, multiple, files, only, unused, injected, here, fallback, always, recommended, inject, each, individually, rule, placeholder, replaced, usage, html, tsx, vue, marko, filesystem, uno, plugins, mjs, package, experimental, state, right, now, doesn, follow, semver, may, introduce, breaking, patch, versions, warning, source, llm, read, better, optimized, documentation, markdown, format, guides, sidebar, return, menu, appearance, contributing, release, notes, v66, team, tutorial, playground, interactive, docs, resources, arbitrary, mdc, pug, compile, class, group, tagify, legacy, compat, web, fonts, typography, icons, wind4, wind3, mini, community, autocomplete, shortcuts, rules, concepts, main, ctrl, search, skip,

Text of the page (random words):
unocss postcss plugin 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 integrations postcss md for this page in markdown format postcss plugin postcss plugin for unocss supports apply screen and theme directives source code warning this package is in an experimental state right now it doesn t follow semver and may introduce breaking changes in patch versions install pnpm yarn npm bun bash pnpm add d unocss unocss postcss bash yarn add d unocss unocss postcss bash npm install d unocss unocss postcss bash bun add d unocss unocss postcss postcss config mjs ts import unocss from unocss postcss export default plugins unocss uno config ts ts import defineconfig presetwind3 from unocss export default defineconfig content filesystem html js ts jsx tsx vue svelte astro marko presets presetwind3 style css css unocss usage unocss unocss at rule is a placeholder it will be replaced by the generated css you can also inject each layer individually style css css unocss preflights unocss default fallback layer it s always recommended to include only unused layers will be injected here unocss if you want to include all layers no matter whether they are previously included or not you can use unocss all this is useful if you want to include generated css in multiple files css unocss all or if you want to exclude a specific layer you can use the unocss layer directive css unocss preflights other layer apply css custom div apply text center my 0 font medium will be transformed to css custom div margin top 0 rem margin bottom 0 rem text align center font weight 500 screen the screen directive allows you to create media queries that reference your breakpoints by name comes from theme breakpoints css grid apply grid grid cols 2 screen xs grid apply grid cols 1 screen sm grid apply grid cols 3 will be transformed to css grid display grid grid template columns repeat 2 minmax 0 1 fr media min width 320 px grid grid template columns repeat 1 minmax 0 1 fr media min width 640 px grid grid template columns repeat 3 minmax 0 1 fr breakpoint variant support screen also supports lt at variants screen lt css grid apply grid grid cols 2 screen lt xs grid apply grid cols 1 screen lt sm grid apply grid cols 3 will be transformed to css grid display grid grid template columns repeat 2 minmax 0 1 fr media max width 319 9 px grid grid template columns repeat 1 minmax 0 1 fr media max width 639 9 px grid grid template columns repeat 3 minmax 0 1 fr screen at css grid apply grid grid cols 2 screen at xs grid apply grid cols 1 screen at xl grid apply grid cols 3 screen at xxl grid apply grid cols 4 will be transformed to css grid display grid grid template columns repeat 2 minmax 0 1 fr media min width 320 px and max width 639 9 px grid grid template columns repeat 1 minmax 0 1 fr media min width 1280 px and max width 1535 9 px grid grid template columns repeat 3 minmax 0 1 fr media min width 1536 px grid grid template columns repeat 4 minmax 0 1 fr theme use the theme function to access your theme config values using dot notation css btn blue background color theme colors blue 500 will be compiled to css btn blue background color 3b82f6 suggest changes to this page last updated pager previous page cli next page eslint released under the mit license copyright 2021 present anthony fu