Tailwind on save

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.

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

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 to fail.

Sync and local storage#

The generated tailwindcss/ directory lives inside your served folder (see Files the app writes). The sync engine and file watcher skip tailwindcss/ automatically, so compiled CSS cache files stay local to your computer (see What syncs). For details on building documents with ClayJS, see Make documents that save.