# Tailwind on save

> Compile Tailwind CSS v4 stylesheets automatically on save from the classes in your document.

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

A document that links a `/tailwindcss/<name>.css` stylesheet gets that CSS file compiled automatically on save from the classes used in the document. You do not need a separate build step or external Node.js watcher.

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

## How compilation works

Hyperclay Local compiles stylesheets using Tailwind v4 with `@tailwindcss/typography` and `@tailwindcss/forms` (using the `class` strategy for forms). Compilation runs from dependencies bundled inside the app and never makes network requests (see [Offline behavior and privacy](https://hyperclaylocal.com/docs/offline/)).

Both a relative href and a fully qualified `https://any.host/tailwindcss/<name>.css` URL are recognized. When a link carries a domain prefix, Hyperclay Local preserves that domain prefix when rewriting the link.

## Folder scoping and on-demand builds

When a document saves, Hyperclay Local rescopes the stylesheet link to the document's own folder:

- A top-level `post.html` compiles to `tailwindcss/post.css` on disk and links `/tailwindcss/post.css`.
- A nested `blog/post.html` rewrites its link to `/tailwindcss/blog/post.css` and compiles to `tailwindcss/blog/post.css` on disk.

Because each stylesheet path mirrors the document's folder path, two documents with the same filename in different folders never collide.

If the browser requests a `/tailwindcss/...` stylesheet that is not on disk yet, the server compiles it on the spot. Compilation failures are logged to the error log and never cause [saving](https://hyperclaylocal.com/docs/saving/) to fail.

## Sync and local storage

The generated `tailwindcss/` directory lives inside your served folder (see [Files the app writes](https://hyperclaylocal.com/docs/files/)). The sync engine and file watcher skip `tailwindcss/` automatically, so compiled CSS cache files stay local to your computer (see [What syncs](https://hyperclaylocal.com/docs/what-syncs/)). For details on building documents with [ClayJS](https://clayjs.com/docs/), see [Make documents that save](https://hyperclaylocal.com/docs/making-malleable-documents/).