# 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: '[Colour](/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, starting with `scrollbar-none`.
        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

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.

::docs-table
---
columns:
  - label: Class
rows:
  - items:
      - label: scrollbar-none
        description: 'Hides the scrollbar while the element keeps scrolling. Sets `scrollbar-width: none` plus the WebKit pseudo-element.'
---
::

If you want to add your own, or drop ours entirely, both happen through
`utilities.helpers` in
[`mirror.config.ts`](/utilities/extending#helpers).

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

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

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