Skip to content
OTFotf
All posts

Tailwind UI to Tailwind Plus: run the license and paste gate before your next block

D
DaveAuthor
7 min read
Tailwind UI to Tailwind Plus: run the license and paste gate before your next block

Tailwind UI did not disappear — Tailwind Labs rebranded it to Tailwind Plus on 4 March 2025. Same one-time purchase, same lifetime access, same component packages, templates, and Catalyst. If your team still says "Tailwind UI" in tickets, you are probably talking about Tailwind Plus. The risk is not the rename. The risk is pasting from a stale mental model of the catalog.

Run a license and paste gate before the next marketing block lands in your product repo.

What the rebrand actually changed

Adam Wathan's post is explicit about continuity:

  • No subscription pricing
  • No upgrade cost for existing All-Access licenses
  • The same content — components, templates, and Catalyst

What changed is the product surface and the future roadmap: Tailwind Plus is the login and catalog home at tailwindcss.com/plus, with room for community and tooling experiments that did not fit the old Tailwind UI box. For builders, that means your bookmark, download path, and agent instructions should point at Plus — not a retired name in a README from 2024.

Official Tailwind UI is now Tailwind Plus rebrand post on tailwindcss.com, captured 2026-09-17

The license gate (15 minutes)

Before anyone pastes another pricing section, verify ownership and access:

  1. Confirm the license is All-Access / Tailwind Plus (or the specific pack you paid for) — not a leaked zip from a teammate's laptop.
  2. Sign into Tailwind Plus with the account that owns the license.
  3. Download or open the current catalog from that surface — do not reuse a year-old mirror folder named tailwind-ui-export.
  4. Record in the repo which flavor you standardize on (React, Vue, or HTML) and which package version / download date agents may cite.
  5. Update CLAUDE.md / .cursorrules so agents stop saying "grab Tailwind UI" and start saying "paste only from our locked Plus wrappers."

If step 1–3 fail, stop. A beautiful block from an unverified zip is a licensing and drift problem, not a design win.

Dex and Luna run a two-path gate before the next paste: verify license and catalog currency

11 production screens. Login, database, payments — all wired.

The SaaS Dashboard Kit ships everything already connected. Nothing to set up. Live demo at saas.otf-kit.dev.

See the live demo

The paste gate (what "current" means in the repo)

A current license still produces stale UI if every feature team pastes raw examples into feature folders. The paste gate is a repo rule, not a taste debate.

# 1) Find raw marketing pastes that never got wrapped
rg -n "from '@/components/(button|input|fieldset)'|pricing-section|hero-section" apps/ web/ src/ \
  --glob '!**/components/ui/**' --glob '!**/components/marketing/**' | head

# 2) Confirm agent rules name the Plus wrappers, not the old product name
rg -n "Tailwind UI|Tailwind Plus|Catalyst" CLAUDE.md .cursorrules .cursor/rules 2>/dev/null | head

# 3) One sentence for the PR
# "Paste source = Tailwind Plus <date>; wrappers live under components/marketing; no raw catalog paths in features."

Pass criteria:

  • New UI enters through thin wrappers you own, not through a fifth copy of the same hero.
  • Agents are pointed at those wrappers.
  • Catalyst (if you use it) is imported as your app-chrome starting point, then customized in-tree — matching Catalyst's own "disappearing UI kit" model from the Catalyst introduction: copy source into the project, then forget it was not yours.

Fail criteria:

  • Three pricing sections with slightly different class soups.
  • READMEs that still say Tailwind UI with a dead download link.
  • Agents inventing button APIs because nothing in the repo is canonical.

Catalyst inside the same license

Catalyst is included with the Plus / All-Access purchase. The intro post positions it as a batteries-included application UI kit: real React components with composable APIs, meant to be copied into your project and owned. Headless UI improvements ship underneath for menus, listboxes, and form wiring.

That matters for the paste gate:

  • Marketing blocks are examples you adapt once.
  • Catalyst components are a starting architecture you keep in components/ and evolve.
  • Mixing both without rules is how you get a marketing hero API fighting an app Button API in the same PR.

If your backlog is mostly signed-in product chrome on the web, prefer promoting Catalyst wrappers before pasting another marketing template into the app shell. If your backlog is the public site, prefer marketing blocks — still wrapped — and keep Catalyst out of the marketing tree.

What this gate does not solve

A clean Plus license and paste discipline does not invent auth sessions, billing entitlements, or native clients. Those are product-spine problems. Neighboring posts cover adjacent questions without duplicating this gate: NativeWind vs a designed kit for utility classes on native, landing templates you own for owned marketing pages with agent docs, and choose a starter without a rewrite for kit selection risk.

Use the live compare page otf-kit vs Tailwind UI when you are deciding snippets/templates versus a maintained full-stack kit — after this paste gate is green, not instead of it.

Byte and Dex verify auth, billing, and native stations only after the paste gate is green

One-hour team checklist

StepOwnerDone when
License loginwhoever paidTailwind Plus account opens current catalog
Flavor locktech leadReact / Vue / HTML written in agent rules
Wrapper pathone engineercomponents/marketing (or equivalent) exists
Catalyst pathone engineerApp chrome imports only from owned Catalyst wrappers
Agent ruleswhoever owns CLAUDE.md"Tailwind UI" strings removed or redirected to Plus
PR noteauthorPaste source date + wrapper path in the description

After the gate

  1. Delete or quarantine old tailwind-ui-export folders that are not the current Plus download.
  2. Open one stale feature PR and replace a raw paste with a wrapper import — prove the rule once.
  3. Point the next Cursor / Claude Code session at the wrappers only.
  4. If the next quarter is product spine (auth, billing, native), open templates with a clear spine brief — do not buy another marketing pack hoping it ships sessions.

Tailwind Plus is the current name for the catalog you already trusted as Tailwind UI. The license gate confirms you still own it. The paste gate confirms your repo and agents treat it as a controlled library, not a clipboard habit. Run both before the next block.

Common failure modes (and the fix)

  1. Stale zip as source of truth — A shared Drive folder labeled tailwind-ui-2024 keeps winning because it is offline. Fix: delete or archive it; make the Plus download the only blessed source, with the download date in the commit message that adds wrappers.
  2. Name drift in agent rules — Agents keep searching "Tailwind UI pricing section" and invent variants. Fix: one line in project memory: "Catalog name is Tailwind Plus; paste only through components/marketing/*."
  3. Catalyst and marketing blocks in the same file — A signed-in settings page imports a marketing CTA block with a different button API. Fix: split trees — marketing wrappers vs app-chrome wrappers — and ban cross-imports in review.
  4. Skipping the compare decision — Teams paste forever, then blame the catalog when auth is still missing. Fix: after the paste gate is green, if the backlog is spine work, stop buying presentation and open the templates path with a written spine brief.

These failures are process bugs. The Plus catalog is fine; the repo was never taught the current name or the wrapper rule.

Sources

design-systemkitsarchitecture
OTF SaaS Dashboard Kit

Ship the product, not the setup.

  • 11 production screens — auth, billing, team, analytics, settings
  • Real database, payments, and login — all wired on day 1
  • AI configs pre-tuned so your agent extends instead of regenerates