# UnoCSS > Instant On-demand Atomic CSS Engine Customizable · Powerful · Fast · Joyful ## Table of Contents ### Guides - [Guide](https://unocss.dev/guide.md): Getting started with UnoCSS - [Why UnoCSS?](https://unocss.dev/guide/why.md) - [Presets](https://unocss.dev/guide/presets.md): Presets are the heart of UnoCSS. They let you make your own custom framework in minutes. - [Style Reset](https://unocss.dev/guide/style-reset.md): UnoCSS does not provide style resetting or preflight by default for maximum flexibility and does not populate your global CSS. - [Config File](https://unocss.dev/guide/config-file.md) - [Extracting](https://unocss.dev/guide/extracting.md) ### Integrations - [Integrations](https://unocss.dev/integrations.md) - [UnoCSS Vite Plugin](https://unocss.dev/integrations/vite.md): The Vite plugin for UnoCSS (@unocss/vite). - [UnoCSS Nuxt Module](https://unocss.dev/integrations/nuxt.md): Nuxt module for UnoCSS. - [Next.js](https://unocss.dev/integrations/next.md): Getting started with UnoCSS and Next.js. - [UnoCSS Astro Integration](https://unocss.dev/integrations/astro.md): The UnoCSS integration for Astro (@unocss/astro). - [UnoCSS Svelte Scoped](https://unocss.dev/integrations/svelte-scoped.md): Svelte Scoped Vite Plugin and Svelte Preprocessor for UnoCSS. - [UnoCSS Webpack Plugin](https://unocss.dev/integrations/webpack.md): The webpack plugin for UnoCSS (@unocss/webpack). - [UnoCSS CDN Runtime](https://unocss.dev/integrations/runtime.md): CSS-in-JS runtime of UnoCSS (@unocss/runtime). - [UnoCSS CLI](https://unocss.dev/integrations/cli.md): The CLI for UnoCSS (@unocss/cli). - [UnoCSS PostCSS Plugin](https://unocss.dev/integrations/postcss.md) - [UnoCSS ESLint Config](https://unocss.dev/integrations/eslint.md): ESLint config for UnoCSS (@unocss/eslint-config). - [UnoCSS VS Code Extension](https://unocss.dev/integrations/vscode.md): UnoCSS for VS Code. - [Community JetBrains Plugin for UnoCSS](https://unocss.dev/integrations/jetbrains.md) - [UnoCSS Language Server](https://unocss.dev/integrations/lsp.md) - [Community Zed Extension for UnoCSS](https://unocss.dev/integrations/zed.md) ### Guides - [Guide](https://unocss.dev/guide.md): Getting started with UnoCSS - [Why UnoCSS?](https://unocss.dev/guide/why.md) - [Presets](https://unocss.dev/guide/presets.md): Presets are the heart of UnoCSS. They let you make your own custom framework in minutes. - [Style Reset](https://unocss.dev/guide/style-reset.md): UnoCSS does not provide style resetting or preflight by default for maximum flexibility and does not populate your global CSS. - [Config File](https://unocss.dev/guide/config-file.md) - [Extracting](https://unocss.dev/guide/extracting.md) ### Integrations - [Integrations](https://unocss.dev/integrations.md) - [UnoCSS Vite Plugin](https://unocss.dev/integrations/vite.md): The Vite plugin for UnoCSS (@unocss/vite). - [UnoCSS Nuxt Module](https://unocss.dev/integrations/nuxt.md): Nuxt module for UnoCSS. - [Next.js](https://unocss.dev/integrations/next.md): Getting started with UnoCSS and Next.js. - [UnoCSS Astro Integration](https://unocss.dev/integrations/astro.md): The UnoCSS integration for Astro (@unocss/astro). - [UnoCSS Svelte Scoped](https://unocss.dev/integrations/svelte-scoped.md): Svelte Scoped Vite Plugin and Svelte Preprocessor for UnoCSS. - [UnoCSS Webpack Plugin](https://unocss.dev/integrations/webpack.md): The webpack plugin for UnoCSS (@unocss/webpack). - [UnoCSS CDN Runtime](https://unocss.dev/integrations/runtime.md): CSS-in-JS runtime of UnoCSS (@unocss/runtime). - [UnoCSS CLI](https://unocss.dev/integrations/cli.md): The CLI for UnoCSS (@unocss/cli). - [UnoCSS PostCSS Plugin](https://unocss.dev/integrations/postcss.md) - [UnoCSS ESLint Config](https://unocss.dev/integrations/eslint.md): ESLint config for UnoCSS (@unocss/eslint-config). - [UnoCSS VS Code Extension](https://unocss.dev/integrations/vscode.md): UnoCSS for VS Code. - [Community JetBrains Plugin for UnoCSS](https://unocss.dev/integrations/jetbrains.md) - [UnoCSS Language Server](https://unocss.dev/integrations/lsp.md) - [Community Zed Extension for UnoCSS](https://unocss.dev/integrations/zed.md) ### Presets - [Mini preset](https://unocss.dev/presets/mini.md): The minimal preset for UnoCSS (@unocss/preset-mini). - [Wind3 preset](https://unocss.dev/presets/wind3.md): The Tailwind CSS / Windi CSS compact preset for UnoCSS (@unocss/preset-wind3). - [Wind4 preset](https://unocss.dev/presets/wind4.md): The Tailwind4 CSS compact preset for UnoCSS (@unocss/preset-wind4). - [Icons preset](https://unocss.dev/presets/icons.md): Use any icon with Pure CSS for UnoCSS (@unocss/preset-icons). - [Attributify preset](https://unocss.dev/presets/attributify.md): The UnoCSS preset that enables the attributify mode for other presets. - [Typography preset](https://unocss.dev/presets/typography.md): Typography classes for UnoCSS (@unocss/preset-typography). - [Web fonts preset](https://unocss.dev/presets/web-fonts.md): Web fonts support for UnoCSS (@unocss/preset-web-fonts). - [Legacy Compat preset](https://unocss.dev/presets/legacy-compat.md): Collections of legacy compatibility utilities. - [Tagify preset](https://unocss.dev/presets/tagify.md): Tagify Mode for UnoCSS (@unocss/preset-tagify). - [rem to px preset](https://unocss.dev/presets/rem-to-px.md): Converts rem to px for utils (@unocss/preset-rem-to-px). ### Transformers - [Variant group transformer](https://unocss.dev/transformers/variant-group.md): Enables the variant group feature of Windi CSS for UnoCSS (@unocss/transformer-variant-group) - [Directives transformer](https://unocss.dev/transformers/directives.md): UnoCSS transformer for @apply, @screen and theme() directives (@unocss/transformer-directives) - [Compile class transformer](https://unocss.dev/transformers/compile-class.md): Compile group of classes into one class (@unocss/transformer-compile-class) - [Attributify JSX transformer](https://unocss.dev/transformers/attributify-jsx.md): Support valueless attributify in JSX/TSX (@unocss/transformer-attributify-jsx) ### Extractors - [Pug Extractor](https://unocss.dev/extractors/pug.md): Pug extractor for UnoCSS (@unocss/extractor-pug) - [MDC Extractor](https://unocss.dev/extractors/mdc.md): MDC extractor for UnoCSS (@unocss/extractor-mdc) - [Svelte Extractor](https://unocss.dev/extractors/svelte.md) - [Arbitrary Variants Extractor](https://unocss.dev/extractors/arbitrary-variants.md) ### Other Packages - [Inspector](https://unocss.dev/tools/inspector.md): The inspector UI for UnoCSS (@unocss/inspector). - [Core](https://unocss.dev/tools/core.md): The core engine of UnoCSS without any presets. It can be used as the engine of your own atomic CSS framework. - [Autocomplete utilities](https://unocss.dev/tools/autocomplete.md): Autocomplete utilities for UnoCSS (@unocss/autocomplete). ### Presets - [Mini preset](https://unocss.dev/presets/mini.md): The minimal preset for UnoCSS (@unocss/preset-mini). - [Wind3 preset](https://unocss.dev/presets/wind3.md): The Tailwind CSS / Windi CSS compact preset for UnoCSS (@unocss/preset-wind3). - [Wind4 preset](https://unocss.dev/presets/wind4.md): The Tailwind4 CSS compact preset for UnoCSS (@unocss/preset-wind4). - [Icons preset](https://unocss.dev/presets/icons.md): Use any icon with Pure CSS for UnoCSS (@unocss/preset-icons). - [Attributify preset](https://unocss.dev/presets/attributify.md): The UnoCSS preset that enables the attributify mode for other presets. - [Typography preset](https://unocss.dev/presets/typography.md): Typography classes for UnoCSS (@unocss/preset-typography). - [Web fonts preset](https://unocss.dev/presets/web-fonts.md): Web fonts support for UnoCSS (@unocss/preset-web-fonts). - [Legacy Compat preset](https://unocss.dev/presets/legacy-compat.md): Collections of legacy compatibility utilities. - [Tagify preset](https://unocss.dev/presets/tagify.md): Tagify Mode for UnoCSS (@unocss/preset-tagify). - [rem to px preset](https://unocss.dev/presets/rem-to-px.md): Converts rem to px for utils (@unocss/preset-rem-to-px). ### Transformers - [Variant group transformer](https://unocss.dev/transformers/variant-group.md): Enables the variant group feature of Windi CSS for UnoCSS (@unocss/transformer-variant-group) - [Directives transformer](https://unocss.dev/transformers/directives.md): UnoCSS transformer for @apply, @screen and theme() directives (@unocss/transformer-directives) - [Compile class transformer](https://unocss.dev/transformers/compile-class.md): Compile group of classes into one class (@unocss/transformer-compile-class) - [Attributify JSX transformer](https://unocss.dev/transformers/attributify-jsx.md): Support valueless attributify in JSX/TSX (@unocss/transformer-attributify-jsx) ### Extractors - [Pug Extractor](https://unocss.dev/extractors/pug.md): Pug extractor for UnoCSS (@unocss/extractor-pug) - [MDC Extractor](https://unocss.dev/extractors/mdc.md): MDC extractor for UnoCSS (@unocss/extractor-mdc) - [Svelte Extractor](https://unocss.dev/extractors/svelte.md) - [Arbitrary Variants Extractor](https://unocss.dev/extractors/arbitrary-variants.md) ### Other Packages - [Inspector](https://unocss.dev/tools/inspector.md): The inspector UI for UnoCSS (@unocss/inspector). - [Core](https://unocss.dev/tools/core.md): The core engine of UnoCSS without any presets. It can be used as the engine of your own atomic CSS framework. - [Autocomplete utilities](https://unocss.dev/tools/autocomplete.md): Autocomplete utilities for UnoCSS (@unocss/autocomplete). ### Presets - [Mini preset](https://unocss.dev/presets/mini.md): The minimal preset for UnoCSS (@unocss/preset-mini). - [Wind3 preset](https://unocss.dev/presets/wind3.md): The Tailwind CSS / Windi CSS compact preset for UnoCSS (@unocss/preset-wind3). - [Wind4 preset](https://unocss.dev/presets/wind4.md): The Tailwind4 CSS compact preset for UnoCSS (@unocss/preset-wind4). - [Icons preset](https://unocss.dev/presets/icons.md): Use any icon with Pure CSS for UnoCSS (@unocss/preset-icons). - [Attributify preset](https://unocss.dev/presets/attributify.md): The UnoCSS preset that enables the attributify mode for other presets. - [Typography preset](https://unocss.dev/presets/typography.md): Typography classes for UnoCSS (@unocss/preset-typography). - [Web fonts preset](https://unocss.dev/presets/web-fonts.md): Web fonts support for UnoCSS (@unocss/preset-web-fonts). - [Legacy Compat preset](https://unocss.dev/presets/legacy-compat.md): Collections of legacy compatibility utilities. - [Tagify preset](https://unocss.dev/presets/tagify.md): Tagify Mode for UnoCSS (@unocss/preset-tagify). - [rem to px preset](https://unocss.dev/presets/rem-to-px.md): Converts rem to px for utils (@unocss/preset-rem-to-px). ### Transformers - [Variant group transformer](https://unocss.dev/transformers/variant-group.md): Enables the variant group feature of Windi CSS for UnoCSS (@unocss/transformer-variant-group) - [Directives transformer](https://unocss.dev/transformers/directives.md): UnoCSS transformer for @apply, @screen and theme() directives (@unocss/transformer-directives) - [Compile class transformer](https://unocss.dev/transformers/compile-class.md): Compile group of classes into one class (@unocss/transformer-compile-class) - [Attributify JSX transformer](https://unocss.dev/transformers/attributify-jsx.md): Support valueless attributify in JSX/TSX (@unocss/transformer-attributify-jsx) ### Extractors - [Pug Extractor](https://unocss.dev/extractors/pug.md): Pug extractor for UnoCSS (@unocss/extractor-pug) - [MDC Extractor](https://unocss.dev/extractors/mdc.md): MDC extractor for UnoCSS (@unocss/extractor-mdc) - [Svelte Extractor](https://unocss.dev/extractors/svelte.md) - [Arbitrary Variants Extractor](https://unocss.dev/extractors/arbitrary-variants.md) ### Other Packages - [Inspector](https://unocss.dev/tools/inspector.md): The inspector UI for UnoCSS (@unocss/inspector). - [Core](https://unocss.dev/tools/core.md): The core engine of UnoCSS without any presets. It can be used as the engine of your own atomic CSS framework. - [Autocomplete utilities](https://unocss.dev/tools/autocomplete.md): Autocomplete utilities for UnoCSS (@unocss/autocomplete). ### Presets - [Mini preset](https://unocss.dev/presets/mini.md): The minimal preset for UnoCSS (@unocss/preset-mini). - [Wind3 preset](https://unocss.dev/presets/wind3.md): The Tailwind CSS / Windi CSS compact preset for UnoCSS (@unocss/preset-wind3). - [Wind4 preset](https://unocss.dev/presets/wind4.md): The Tailwind4 CSS compact preset for UnoCSS (@unocss/preset-wind4). - [Icons preset](https://unocss.dev/presets/icons.md): Use any icon with Pure CSS for UnoCSS (@unocss/preset-icons). - [Attributify preset](https://unocss.dev/presets/attributify.md): The UnoCSS preset that enables the attributify mode for other presets. - [Typography preset](https://unocss.dev/presets/typography.md): Typography classes for UnoCSS (@unocss/preset-typography). - [Web fonts preset](https://unocss.dev/presets/web-fonts.md): Web fonts support for UnoCSS (@unocss/preset-web-fonts). - [Legacy Compat preset](https://unocss.dev/presets/legacy-compat.md): Collections of legacy compatibility utilities. - [Tagify preset](https://unocss.dev/presets/tagify.md): Tagify Mode for UnoCSS (@unocss/preset-tagify). - [rem to px preset](https://unocss.dev/presets/rem-to-px.md): Converts rem to px for utils (@unocss/preset-rem-to-px). ### Transformers - [Variant group transformer](https://unocss.dev/transformers/variant-group.md): Enables the variant group feature of Windi CSS for UnoCSS (@unocss/transformer-variant-group) - [Directives transformer](https://unocss.dev/transformers/directives.md): UnoCSS transformer for @apply, @screen and theme() directives (@unocss/transformer-directives) - [Compile class transformer](https://unocss.dev/transformers/compile-class.md): Compile group of classes into one class (@unocss/transformer-compile-class) - [Attributify JSX transformer](https://unocss.dev/transformers/attributify-jsx.md): Support valueless attributify in JSX/TSX (@unocss/transformer-attributify-jsx) ### Extractors - [Pug Extractor](https://unocss.dev/extractors/pug.md): Pug extractor for UnoCSS (@unocss/extractor-pug) - [MDC Extractor](https://unocss.dev/extractors/mdc.md): MDC extractor for UnoCSS (@unocss/extractor-mdc) - [Svelte Extractor](https://unocss.dev/extractors/svelte.md) - [Arbitrary Variants Extractor](https://unocss.dev/extractors/arbitrary-variants.md) ### Other Packages - [Inspector](https://unocss.dev/tools/inspector.md): The inspector UI for UnoCSS (@unocss/inspector). - [Core](https://unocss.dev/tools/core.md): The core engine of UnoCSS without any presets. It can be used as the engine of your own atomic CSS framework. - [Autocomplete utilities](https://unocss.dev/tools/autocomplete.md): Autocomplete utilities for UnoCSS (@unocss/autocomplete). ### Config - [Configuring UnoCSS](https://unocss.dev/config.md): Configurations are what make UnoCSS powerful. - [Rules](https://unocss.dev/config/rules.md): Writing custom rules for UnoCSS is super easy. - [Variants](https://unocss.dev/config/variants.md): Variants allow you to apply some variations to your existing rules. - [Shortcuts](https://unocss.dev/config/shortcuts.md): The shortcuts functionality that UnoCSS provides is similar to Windi CSS's one. - [Theme](https://unocss.dev/config/theme.md): UnoCSS also supports the theming system that you might be familiar with in Tailwind CSS / Windi CSS. - [Extractors](https://unocss.dev/config/extractors.md) - [Preflights](https://unocss.dev/config/preflights.md): You can inject raw CSS as preflights from the configuration. The resolved theme is available to customize the CSS. - [Safelist](https://unocss.dev/config/safelist.md) - [Layers](https://unocss.dev/config/layers.md): UnoCSS allows you to define the layers as you want. - [Presets](https://unocss.dev/config/presets.md) - [Transformers](https://unocss.dev/config/transformers.md) - [Autocomplete](https://unocss.dev/config/autocomplete.md) ### Other - [Community](https://unocss.dev/presets/community.md) - [Official Packages](https://unocss.dev/presets.md) - [Packages](https://unocss.dev/guide/packages.md): UnoCSS Packages: available packages and what's included and enabled in unocss.