# Tailwind

> How HTML Clay builds a document's Tailwind stylesheet from the classes it uses, with a compiler that ships inside the app.

Source: https://htmlclay.com/docs/tailwind/

Tailwind stylesheets for a document are built on demand, on your own machine, from the classes that document uses.

## Style a document with Tailwind

Link a stylesheet named `/tailwindcss/<name>.css` and HTML Clay builds it from the classes the document uses, the same way [Hyperclay](https://hyperclay.com) and Hyperclay Local do:

```html
<link rel="stylesheet" href="/tailwindcss/notes.css">
```

The stylesheet comes from the page that asked for it, so a document keeps its styles after a rename or a copy, and HTML Clay never edits the link or anything else in your file. It uses Tailwind v4 with the typography and forms (class mode) plugins and an `ephemeral-<word>:` variant for ClayJS's per-tab `ephemeral` attribute. Tailwind's compiler ships inside HTML Clay and runs on your computer: nothing is downloaded, and nothing leaves the machine. The first stylesheet after a change takes about a second to build; after that it comes from a cache until the document changes.