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
A few of the classes have no token behind them at all. We ship them because every Mirror app ends up writing them by hand otherwise, and they take every variant like anything else in the sheet.
If you want to add your own, or drop ours entirely, both happen through
utilities.helpers in
mirror.config.ts.
Reading a class name
Generated colour 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 colour 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 colour 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 colour, 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
colour scale out of a Mirror app, so bg-red-500 matches no candidate and
emits no rule. We turn it off because every colour in the palette is already
reachable through the generated families, and a class that went around the
token tree would be a colour no theme could move.
If you need a colour 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>