Meta tags:
description=Compile group of classes into one class (@unocss/transformer-compile-class);
author=Anthony Fu;

Headings (most frequently used words):

compile, class, transformer, presets, transformers, extractors, other, packages, installation, usage, options, tooling, license, eslint,

Text of the page (most frequently used words):
class (20), compile (15), unocss (13), the (10), uno (10), #transformer (8), text (8), extractor (8), presets (7), for (6), div (6), attributify (5), page (5), config (5), transformers (5), this (4), you (4), rem (4), add (4), from (4), import (4), bash (4), overview (4), license (3), jsx (3), directives (3), eslint (3), can (3), qlmcrp (3), 0qw2gr (3), font (3), transformercompileclass (3), group (3), variants (3), svelte (3), extractors (3), 2021 (2), present (2), anthony (2), mit (2), next (2), enforce (2), rules (2), usage (2), there (2), and (2), options (2), left (2), align (2), opacity (2), 113 (2), hover (2), center (2), css (2), html (2), compilation (2), defineconfig (2), bun (2), npm (2), yarn (2), pnpm (2), autocomplete (2), arbitrary (2), mdc (2), pug (2), variant (2), community (2), tagify (2), legacy (2), compat (2), web (2), fonts (2), typography (2), icons (2), wind4 (2), wind3 (2), mini (2), navigation (2), safelist (2), file (2), extension (2), integrations (2), guide (2), copyright, released, under, previous, pager, last, updated, suggest, changes, warn, plugins, json, rule, enforcing, across, whole, project, tooling, trigger, string, prefix, with, refer, details, types, 640, min, width, media, var, 248, rgb, color, 700, weight, line, height, 875, size, will, compiled, bold, red, example, beginning, strings, mark, them, preset, included, package, also, tip, default, export, install, installation, classes, into, one, inspired, windi, ultracakebakery, issue, 948, mode, are, llm, read, better, optimized, documentation, markdown, format, core, inspector, other, packages, sidebar, return, top, menu, appearance, contributing, release, notes, v66, team, tutorial, playground, interactive, docs, resources, layers, preflights, theme, shortcuts, concepts, examples, zed, jetbrains, ide, plugin, code, lsp, support, twoslash, postcss, cli, runtime, webpack, scoped, astro, nuxt, vite, extracting, style, reset, why, getting, started, main, ctrl, search, skip, content,

Text of the page (random words):
compile class transformer 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 overview presets mini wind3 wind4 icons attributify typography web fonts legacy compat tagify rem to px community presets transformers variant group directives compile class attributify jsx extractors pug extractor mdc extractor svelte extractor arbitrary variants extractor other packages inspector core autocomplete on this page are you an llm you can read better optimized documentation at transformers compile class md for this page in markdown format compile class transformer compile group of classes into one class inspired by the compilation mode of windi css and issue 948 by ultracakebakery installation pnpm yarn npm bun bash pnpm add d unocss transformer compile class bash yarn add d unocss transformer compile class bash npm install d unocss transformer compile class bash bun add d unocss transformer compile class uno config ts ts import transformercompileclass from unocss transformer compile class import defineconfig from unocss export default defineconfig transformers transformercompileclass tip this preset is included in the unocss package you can also import it from there ts import transformercompileclass from unocss usage add uno at the beginning of the class strings to mark them for compilation for example html div class uno text center sm text left div class uno text sm font bold hover text red div will be compiled to html div class uno qlmcrp div class uno 0qw2gr div css uno qlmcrp text align center uno 0qw2gr font size 0 875 rem line height 1 25 rem font weight 700 uno 0qw2gr hover un text opacity 1 color rgb 248 113 113 var un text opacity media min width 640 px uno qlmcrp text align left options you can config the trigger string and prefix for compile class with the options refer to the types for details tooling eslint there is an eslint rule for enforcing the class compile transformer across the whole project unocss enforce class compile usage json plugins unocss rules unocss enforce class compile warn license mit license 2021 present anthony fu suggest changes to this page last updated pager previous page directives next page attributify jsx released under the mit license copyright 2021 present anthony fu