# 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.

```css
@import 'tailwindcss';
@import '../../.maas/tailwind.preset.css';
```

## What is generated

::docs-table
---
columns:
  - label: Family
  - label: Classes
rows:
  - items:
      - label: '[Color](/utilities/color)'
        plaintext: true
      - label: '`bg-*`, `text-*`, `border-*` with its four per-side prefixes, and `divide-*`.'
        plaintext: true
  - items:
      - label: '[Typography](/utilities/typography)'
        plaintext: true
      - label: '`type-surface-*` and `type-component-*`, with the `-strong`, `-alt`, `-number` and `-short` modifiers.'
        plaintext: true
  - items:
      - label: '[Radius and shadow](/utilities/radius-and-shadow)'
        plaintext: true
      - label: '`rounded-surface-*`, `rounded-component-*` and `shadow-*`, fed into Tailwind’s own theme keys.'
        plaintext: true
  - items:
      - label: Focus
        plaintext: true
      - label: Two static classes, `focus-ring` and `focus-shadow`.
        plaintext: true
  - items:
      - label: Helpers
        plaintext: true
      - label: Static classes with no token behind them, added through the config.
        plaintext: true
---
::

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`](/utilities/extending#helpers).

## 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.

```css
.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.

```html
<div class="bg-[color-mix(in_oklab,var(--mirror-bg-accent-solid)_40%,transparent)]"></div>
```

## Further reading

- [Color](/utilities/color): backgrounds, foregrounds, borders and dividers.
- [Extending](/utilities/extending): add a family of your own, or narrow one of
  Mirror’s.