What we support

The rest of the menu

You already generated CSS for Maya's homepage hero on Generate Tailwind CSS. This page is what compiles, what is skipped, the surprises that do not show up in the skipped list, and what to paste for Tailwind v3 versus v4. If a class produced nothing, start here.

Keep that hero in mind. rounded-xl is a stock utility. bg-brand-500 needs her theme. The tables below are the rest of that job — a hex in the class name, a plugin class, a dark: toggle that follows the operating system instead of .dark.

Why some things cannot work

The limits below are architectural, not missing polish. They exist because a widget is a guest on someone else's page, and because RuleCMS cannot run code you paste.

What we support

These compile when the class name is stored on the widget and, for design-system names, when the matching token is available.

Design-system classes such as bg-brand-500 work only when the matching token is on this widget or in the paste. Without that token they look exactly like a typo.

What we do not support

Silent surprises

Most failures appear in the skipped list. These three do not, or they appear in a way that is easy to misread.

Class-based dark mode follows the operating system

Generated dark: classes use @media (prefers-color-scheme: dark). If Maya's project redefined the variant — Tailwind v4 @custom-variant dark (&:where(.dark, .dark *)), or v3 darkMode: 'class' — that redefinition is dropped. The class is generated, the CSS is valid, and nothing is reported as skipped. It just responds to the OS setting instead of a .dark ancestor.

If her site has a dark-mode toggle, check it by hand after you generate. To keep the class-based trigger, add a theme under Themes that sets the tokens under .dark, or rewrite the dark: rules under Class Definitions.

group and peer in the skipped list are expected

They are marker classes. They carry no CSS, so generation reports them as "Not a Tailwind utility." The variants that depend on them — group-hover:flex, peer-checked:hidden — do generate, and they match the literal class in the markup. Do not remove group or peer from the component because the report mentioned them.

A token that overrides a Tailwind default retunes every utility

If her paste (or this widget's variables) sets --spacing: 8px, then p-4 becomes 32px instead of 16px. That is what her project does, so it is correct — and it is listed in the preview under "Overrides a Tailwind default" so you can see the reach before you confirm.

Workarounds

v3 versus v4 paste

The field on the dialog is Paste your Tailwind theme or config. You do not have to tell us the version. Paste either of the following and we detect the format. Leave the box blank if Maya has no custom theme or config. The short version of this step — enough to try — is on Generate Tailwind CSS.

Tailwind v4 — the @theme block in your CSS file

Usually app/globals.css or src/index.css, next to @import "tailwindcss". You can paste the whole stylesheet; only @theme declarations are read. A bare list of --token: value lines also works.

@theme {
  --color-brand: #6d28d9;
  --radius-card: 12px;
}

Tailwind v3 — your tailwind.config.js

In her project root. Paste the whole file, or just the theme object. Nested keys flatten: colors.brand becomes --color-brand, which is what lets bg-brand compile.

module.exports = {
  theme: {
    extend: {
      colors: { brand: '#6d28d9' },
      borderRadius: { card: '12px' },
    },
  },
};

After the first successful generate, the tokens that were actually used are stored on this widget. A later run can reuse them without another paste. Only used tokens are stored — paste seven colours and use three, and three persist. Start using a fourth later and paste again, or put the full set on CSS Variables yourself so they all stay.

After you generate

• Review the new entries on Class Definitions and CSS Variables. You can edit any of them; the next generate overwrites a generated name and leaves names that exist only on the widget.
• Publish the widget. Composer and Preview already read the draft; the live embed does not change until you publish.
• Generate again after you add class names or change the theme. The second run does not need a paste if the tokens are already on this widget.

Related guides

• Generate Tailwind CSS — the first walkthrough: paste, generate, publish
• Class Definitions — hand-write anything generation cannot store
• 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 OS
• Widget chrome — resets you no longer get from Preflight
• Publishing — draft versus live
• Widgets — CSS Settings and the rest of the widget