Overview
What mirror css puts in the generated stylesheet and what Tailwind still owns. Read it to work out where a class name comes from.
Running mirror css writes a single file, .maas/tailwind.preset.css, which
you import after Tailwind itself. Every class in it exists because a token
exists.
@import 'tailwindcss';
@import '../../.maas/tailwind.preset.css';
What is generated
The file also declares a dark: variant that is bound to
[data-color-mode='dark'] rather than to prefers-color-scheme, so a mode the
user picks beats the system preference.
Helpers
Static classes with no token behind them can join the sheet as helpers, and
they take every variant like anything else in it. The stock sheet ships none:
Tailwind mints scrollbar-none, the one class Mirror used to add here,
natively.
If you want to add your own, or drop them entirely, both happen through
utilities.helpers in
mirror.config.ts.
Reading a class name
Generated color classes are built from a prefix, a group, a rung and sometimes a state, in that order.
bg-primary-solid-hover
│ │ │ └── state: default, hover, active
│ │ └──────── rung: solid, muted, subtle, light, inverted
│ └──────────────── group: surface, or an intent
└─────────────────── prefix: the property the family sets
None of those names are listed anywhere in the generator’s config. A group exists because the token tree has a subtree, and a rung exists because that subtree has a leaf, which means adding a color adds a class with no config change.
Each class points at a --mirror-* theme key, which in turn points at the
--app-* custom property the token build wrote. Thanks to that second hop, a
theme can change a color by loading a file.
.bg-primary-solid {
background-color: var(--mirror-bg-primary-solid);
}
What Tailwind still owns
Spacing, sizing, layout, flexbox, grid, positioning, text-left, truncate
and every other Tailwind utility work exactly as they do in any Tailwind
project. We generate color, type, radius, shadow and the focus ring, and touch
nothing else.
Radius and shadow arrive as passthroughs into Tailwind’s native --radius-*
and --shadow-* keys, so per-corner variants, arbitrary values and editor
completion all keep working on them.
What is reset
The generated theme block sets --color-*: initial, which takes Tailwind’s own
color scale out of a Mirror app, so bg-red-500 matches no candidate and
emits no rule. We turn it off because every color in the palette is already
reachable through the generated families, and a class that went around the
token tree would be a color no theme could move.
If you need a color that isn’t in the palette, reach for one of the intent groups first. For a genuine one-off, an arbitrary value still compiles.
<div class="bg-[color-mix(in_oklab,var(--mirror-bg-accent-solid)_40%,transparent)]"></div>