Claude Code skills · updated 2026-10-03

Tailwind v4 upgrade skill for Claude Code — removed classes, changed defaults

35 findings in one sample template, each with the v4 class to write instead

On the bundled sample: 35 findings (18 errors, 14 warnings, 3 info) in 1 file from 19 rules.

Get it on Whop - $12 onceGet it on Gumroad

Who it's for

Front-end developers and teams with a Tailwind CSS v3 codebase who are about to bump tailwindcss to v4.

What breaks, and when

Tailwind v4 dropped the @tailwind directives and removed the *-opacity-* utilities. In v4, outline-none hides the focus ring in forced-colors mode, and custom utilities inside @layer utilities silently stop working.

What it printed on the bundled example

== Tailwind v4 Upgrade Blocker Lint — 35 findings (18 errors, 14 warnings, 3 info) in 1 file · 19 rules
  WARN  tailwind-sample.html:2  [tw-config-not-auto-loaded]
        v4 does not read tailwind.config.js on its own, so every token in it is missing at build time -> point at it from the CSS entry: @config "./tailwind.config.js";
  ERROR tailwind-sample.html:8  [tw-directives-v3]
        v4 dropped the @tailwind directives -> replace all of them with a single: @import "tailwindcss";
  ERROR tailwind-sample.html:9  [tw-directives-v3]
        v4 dropped the @tailwind directives -> replace all of them with a single: @import "tailwindcss";
  ERROR tailwind-sample.html:10  [tw-directives-v3]
        v4 dropped the @tailwind directives -> replace all of them with a single: @import "tailwindcss";

What you get

• SKILL.md, an offline Node scanner and the 19-rule table
• file:line, severity and what changes in v4
• The class or directive to write instead
• CI: node scripts/scan.js . exits 1 on any error

Install

Unzip into ~/.claude/skills/ (all projects) or your-repo/.claude/skills/ (one repo), then ask Claude Code: "We want to move this project from Tailwind v3 to v4. What will break or look different? Don't edit anything yet.". Needs Node 16+.

unzip tailwind-v4-upgrade-check.zip -d ~/.claude/skills/

Ask Claude

“We want to move this project from Tailwind v3 to v4. What will break or look different? Don't edit anything yet.”

What it does not do

It does not run Tailwind or migrate tailwind.config.js. No network calls, no edits without your OK.

FAQ

What is a Claude Code skill?

A folder with a SKILL.md and scripts that Claude Code loads when your request matches it. You ask in plain words and Claude runs the scanner the skill carries.

How is this different from asking Claude without the skill?

The skill carries a dated rule table and a scanner that reads every file, so Claude quotes the exact date and line instead of answering from memory.

Does it send my code anywhere?

It does not run Tailwind or migrate tailwind.config.js. No network calls, no edits without your OK.

How do I install it?

Unzip into ~/.claude/skills/ (all projects) or your-repo/.claude/skills/ (one repo), then ask Claude Code: "We want to move this project from Tailwind v3 to v4. What will break or look different? Don't edit anything yet.". Needs Node 16+.

What do I get when I buy?

The zip. On Whop it is in your library as a download lesson with the zip attached; on Gumroad it is the product file.