# Unocss

> Autocomplete can be customized for UnoCSS's intelligent suggestions in playground and the [VS Code extension](/integrations/vscode).

## Pages

- [UnoCSS Documentation](config-autocomplete.md): Autocomplete can be customized for UnoCSS's intelligent suggestions in <a href="/play" target="_blank" rel="noreferre...
- [UnoCSS Documentation](config-extractors.md): Extractors are used to extract the usage of utilities from your source code.
- [Configuring UnoCSS](config-index.md): Configurations are what make UnoCSS powerful.
- [Layers](config-layers.md): The order of CSS will affect their priorities. While the engine will [retain the order of rules](/config/rules#orderi...
- [Preflights](config-preflights.md): You can inject raw CSS as preflights from the configuration. The resolved`theme`is available to customize the CSS.
- [UnoCSS Documentation](config-presets.md): Presets are partial configurations that will be merged into the main configuration.
- [Rules](config-rules.md): Rules define utility classes and the resulting CSS. UnoCSS has many built-in rules but also allows for easily adding ...
- [UnoCSS Documentation](config-safelist.md): Safelist is an important option in UnoCSS configuration that allows you to specify a set of utility classes that shou...
- [Shortcuts](config-shortcuts.md): Shortcuts let you combine multiple rules into a single shorthand, inspired by [Windi CSS's](https://windicss.org/feat...
- [Theme](config-theme.md): UnoCSS also supports the theming system that you might be familiar with in Tailwind CSS / Windi CSS. At the user leve...
- [UnoCSS Documentation](config-transformers.md): Provides a unified interface to transform source code in order to support conventions.
- [Variants](config-variants.md): [Variants](https://windicss.org/utilities/general/variants.html) allow you to apply some variations to your existing ...
- [UnoCSS: The instant on-demand Atomic CSS engine](docs-index.md): layout: home
- [Arbitrary Variants Extractor](extractors-arbitrary-variants.md): A more complex extractor to support arbitrary variants for utilities.
- [MDC Extractor](extractors-mdc.md): Support extracting classes from [MDC (Markdown Components)](https://content.nuxtjs.org/guide/writing/mdc) syntax.
- [Pug Extractor](extractors-pug.md): Support extracting classes from Pug template.
- [Svelte Extractor](extractors-svelte.md): Supports extracting classes from`class:`directive.
- [UnoCSS Documentation](guide-config-file.md): We **highly recommend to use a dedicated`uno.config.ts`file** to configure your UnoCSS, in order to get the best ex...
- [UnoCSS Documentation](guide-extracting.md): UnoCSS works by searching for the utilities usages from your codebase and generate the corresponding CSS on-demand. W...
- [Guide](guide-index.md): UnoCSS is the instant atomic CSS engine, that is designed to be flexible and extensible. The core is un-opinionated a...
- [Packages](guide-packages.md): UnoCSS is a monorepo that contains multiple packages. This page lists all the packages and what's included in`unocss...
- [Presets](guide-presets.md): Presets are the heart of UnoCSS. They let you make your own custom framework in minutes.
- [Style Reset](guide-style-reset.md): UnoCSS does not provide style resetting or preflight by default so not to populate your global CSS and also for maxim...
- [UnoCSS Documentation](guide-why.md): We recommend you to read the blog post [Reimagine Atomic CSS](https://antfu.me/posts/reimagine-atomic-css) written by...
- [UnoCSS Astro Integration](integrations-astro.md): The UnoCSS integration for [Astro](https://astro.build/):`@unocss/astro`. Check the [example](https://github.com/uno...
- [UnoCSS CLI](integrations-cli.md): The command line interface for UnoCSS:`@unocss/cli`.
- [UnoCSS ESLint Config](integrations-eslint.md): ESLint config for UnoCSS:`@unocss/eslint-config`.
- [UnoCSS Documentation](integrations-index.md): UnoCSS comes with integrations for various frameworks / tools:
- [Community JetBrains Plugin for UnoCSS](integrations-jetbrains.md): A community [plugin](https://github.com/re-ovo/unocss-intellij) that provides support for UnoCSS in JetBrains IDEs.
- [UnoCSS Language Server](integrations-lsp.md): UnoCSS Language Server provides IDE-like support for UnoCSS in any editor that supports LSP (Neovim, VS Code, Emacs, ...
- [Next.js](integrations-next.md): Getting Started with UnoCSS and Next.js. Check the [example](https://github.com/unocss/unocss/tree/main/examples/next).
- [UnoCSS Nuxt Module](integrations-nuxt.md): The Nuxt module for UnoCSS.
- [UnoCSS PostCSS Plugin](integrations-postcss.md): PostCSS plugin for UnoCSS. Supports`@apply`,`@screen`and`theme()`directives.
- [UnoCSS CDN Runtime](integrations-runtime.md): UnoCSS runtime provide a CDN build that runs the UnoCSS right in the browser. It will detect the DOM changes and gene...
- [UnoCSS Svelte Scoped](integrations-svelte-scoped.md): Place generated CSS for each Svelte component's utility styles directly into the Svelte component's``block i...
- [UnoCSS Vite Plugin](integrations-vite.md): import { examples } from '../.vitepress/content'
- [UnoCSS VS Code Extension](integrations-vscode.md): - Decoration and tooltip for matched utilities
- [UnoCSS Webpack Plugin](integrations-webpack.md): The webpack plugin for UnoCSS:`@unocss/webpack`. Currently, this plugin only supports the [`global`mode](https://gi...
- [UnoCSS Documentation](main-readme.md): The instant on-demand Atomic CSS engine.
- [Attributify preset](presets-attributify.md): This enables the attributify mode for other presets.
- [UnoCSS Documentation](presets-community.md): We warmly welcome everyone to join and help build the [UnoCSS community](https://github.com/unocss-community). You ca...
- [Icons preset](presets-icons.md): const toggleDark = () => {
- [UnoCSS Documentation](presets-index.md): | Package | Description |
- [Legacy Compat preset](presets-legacy-compat.md): Collections of legacy compatibility utilities.
- [Mini preset](presets-mini.md): The basic preset for UnoCSS, with only the most essential utilities.
- [rem to px preset](presets-rem-to-px.md): Converts rem to px for all utilities.
- [Tagify preset](presets-tagify.md): This enables the tagify mode for other presets.
- [Typography preset](presets-typography.md): Provides a set of prose classes you can use to add typographic defaults to vanilla HTML.
- [Web fonts preset](presets-web-fonts.md): Use web fonts from [Google Fonts](https://fonts.google.com/), [FontShare](https://www.fontshare.com/) by simply provi...
- [Wind3 preset](presets-wind3.md): The Tailwind CSS / Windi CSS compact preset for UnoCSS.
- [Wind4 preset](presets-wind4.md): The Tailwind4 CSS compact preset for UnoCSS. It's compatible with all features of PresetWind3 and enhances it further.
- [Autocomplete utilities](tools-autocomplete.md): Autocomplete utilities for UnoCSS:`@unocss/autocomplete`. This is embedded in the <a href="/play" target="_blank" re...
- [Core](tools-core.md): The core engine of UnoCSS without any presets:`@unocss/core`. It can be used as the engine of your own atomic CSS fr...
- [Inspector](tools-inspector.md): The inspector UI for UnoCSS:`@unocss/inspector`.
- [Attributify JSX transformer](transformers-attributify-jsx.md): Support [valueless attributify](/presets/attributify#valueless-attributify) in JSX/TSX:`@unocss/transformer-attribut...
- [Compile class transformer](transformers-compile-class.md): Compile group of classes into one class. Inspired by the [compilation mode](https://windicss.org/posts/modes.html#com...
- [Directives transformer](transformers-directives.md): UnoCSS transformer for`@apply`,`@screen`and`theme()`directives:`@unocss/transformer-directives`.
- [Variant group transformer](transformers-variant-group.md): Enables the [variant group feature](https://windicss.org/features/variant-groups.html) of Windi CSS for UnoCSS.