HTML Clay
  1. HTML Clay
  2. Docs
  3. The app
  4. Tailwind

Tailwind

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

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