Generate Tailwind CSS

What you can do

You already opened Maya's homepage hero from Widgets and started composing. She pasted that hero from her Tailwind project. The markup still carries rounded-xl and bg-brand-500. The CSS those names had in her project did not come with them. In that project, Tailwind scanned her source at build time and wrote the stylesheet. RuleCMS does not run that build over widget content, so a class sitting on a column has nothing that turns it into a declaration.

Two everyday jobs:

• Compile the class names already on this hero. rounded-xl and the rest of the stock utilities generate from Tailwind's defaults. The canvas and Preview pick up the draft. Publish sends that CSS with the embed.
• Paste her theme so design-system names generate too. bg-brand-500 is not a Tailwind stock colour. Without her tokens it looks exactly like a typo. The paste is what makes it compile the same way it did in her project.

That same path covers a child collection on the hero — generation walks this widget and the collections it contains. It writes class definitions, the tokens those classes actually use, keyframes for stock animate-* utilities, and the @property registrations shadows and rings need.

How Generate Tailwind thinks

Class names travel. CSS does not. Maya can copy the markup into the composer and every rounded-xl is still there. Nothing in that paste is a stylesheet. This action reads the names the widget already uses, optionally takes her design tokens, compiles the pair with Tailwind itself, and writes the result into this widget's CSS catalog.

It writes what CSS exists. It does not rewrite the publish-inclusion flags. Classes she already wrote by hand are kept. Generated utilities are appended after them, so they override — the same order Tailwind uses for its utility layer.

We never run her JavaScript. A pasted tailwind.config.js is read as text. Plugins, require(), and function calls cannot run. That is why a plugin class such as prose never generates — see What we support for the rest of that list.

Here is the case that surprises people. Maya generates without pasting her theme. rounded-xl compiles. bg-brand-500 is skipped. The skipped list is the only place that surfaces. It looks like a typo because, without her token, it is indistinguishable from one. Paste the theme, click Analyze with this theme, then generate again.

A second surprise: she thinks generating linked the widget to her repository. It did not. This is a snapshot. Re-run it when she adds classes or changes the theme.

Generate CSS for Maya's hero

You do this on the widget's CSS Settings page — the same hub that holds Class Definitions and CSS Variables. Picture Maya's homepage hero on the Production Default Widget, with rounded-xl and bg-brand-500 already on the columns.

1. Open the organization → team → project → environment you want to work in. Find the orange Widgets card, View Widgets, then the widget row. Open CSS Settings.
2. If you have unsaved edits on a catalog form, save or discard them first. The button is disabled while a form is dirty so generation cannot overwrite work you have not stored.
3. Click Generate Tailwind CSS. A dialog opens and starts analyzing the widget. Nothing is written until you click Generate.
4. Read the preview counts — classes found, and how many class definitions, CSS variables, keyframes, and CSS properties would be added. The skipped list is the only place a class that produced nothing is reported.
5. Optionally paste her theme into Paste your Tailwind theme or config. If the hero uses her own colour or spacing names, this step is what makes those classes generate. Leaving it blank is valid — generation then uses Tailwind's defaults plus any variables already on this widget. After you paste, click Analyze with this theme so the preview includes those tokens.
6. Click Generate. The button stays disabled while analysis is running, and if the preview would write nothing. The dialog locks while it writes, then shows whether generation succeeded. Click OK on success, then publish the widget. Live embeds do not change until you publish.

That is a safe stop. Composer and Preview already read the draft. The information icon next to the button and the dialog title opens this page in a new tab, so you can keep the dialog open while you read.

What to paste

You do not have to tell us whether the project is Tailwind v3 or v4. Paste either a v4 @theme block or a v3 tailwind.config.js and we detect the format. Leave the box blank if Maya has no custom theme — stock utilities such as rounded-xl still generate.

After you paste, click Analyze with this theme so the preview counts include those tokens. We read the config without running it, so values built from require() cannot be resolved. The full v3 and v4 examples, what we could not read, and what we support live on What we support.

What to read next

This page is the story and the first walkthrough. What compiles, what is skipped, and the paste details live on the page below.

• What we support — What compiles on Maya's hero, what is skipped, silent surprises (class-based dark, group / peer), workarounds, and the v3 versus v4 paste details.
• Class Definitions — Hand-write anything generation cannot store. The next generate keeps names that exist only on this widget.
• CSS Variables — Keep the full token set on the widget so later generates do not need another paste.
• Themes — Host dark-mode strategy when dark: should not follow the operating system.
• Widget chrome — Resets you no longer get from Tailwind Preflight.
• Publishing — Draft versus the snapshot a token fetches.
• Widgets — CSS Settings and the rest of the widget.

How this fits

Generate Tailwind compiles names this widget already uses. It does not replace Class Definitions or CSS Variables — those catalogs are where the result lands, and where you hand-write what generation cannot store. Publishing is how the site gets the snapshot.

Paste her theme. Generate. Publish. When she adds a class or moves a token, generate again.