What the tailwind-4 skill is
The tailwind-4 skill is a curated entry in Gentleman-Programming's Gentleman-Skills repository. Its SKILL.md gives an AI coding agent a styling decision tree, two hard bans on var() and hex colors inside className, a cn() helper built on clsx and tailwind-merge, and short reference patterns for layout, states and dark mode.
Gentleman-Skills describes itself as a community collection of agent skills, split into curated ones by Gentleman-Programming and community ones accepted by vote. The tailwind-4 skill sits under curated/ and carries version 1.1 in its frontmatter.
Its trigger is narrow: styling with Tailwind, using cn(), working with theme variables, or being tempted to put var() in a className. It is a rulebook for how classes are written, not a design taste guide.
The decision tree at the top
SKILL.md opens with five questions the agent answers before touching a class. Each maps to one move, so the choice between a utility class, a style prop and a cn() call stops being improvised.
- If a Tailwind class exists, write it in className.
- If the value is dynamic, use the style prop, for example a width computed from a percentage.
- If styles are conditional, reach for cn() with a base string and a condition.
- If everything is static, skip cn() entirely.
- If a library cannot take a class, pass a style prop with var() constants.
Two bans and one helper
The Critical Rules section forbids var() inside className, such as a bracketed color variable, and forbids hex colors in className. The agent should write semantic or palette classes like bg-primary or bg-slate-800 instead.
The cn() helper is two lines: it passes inputs through clsx, then twMerge. The skill lists when it earns its place, such as conditional classes and merging a className prop, and when it is just wrapper noise.
Where var() is still allowed
Some chart libraries cannot take a class. For those, the skill keeps a constants object whose values are var() strings, used only in library props such as a Recharts axis tick fill or a grid stroke.
Truly dynamic numbers go in the style prop, and a custom property can be set from a style object. This keeps className free of runtime values while still allowing theming. Pair it with design token practice for the variables themselves.
Use it with UiChemy
Tailwind-4 shapes the code your agent writes in a React project. UiChemy works at the page level: AI to WordPress imports an AI build, and Composer writes real HTML, CSS and JS in Elementor or Gutenberg. Get Started at uichemy.com.
For the surrounding workflow, see Tailwind design system for token structure, shadcn for the component side and dark mode design for theme work in the same project.
How to install Tailwind 4 Skill from Gentleman Skills
cp -r Gentleman-Skills/curated/tailwind-4 ~/.claude/skills/Clone the repository
Run
git clone https://github.com/Gentleman-Programming/Gentleman-Skills.git. The skill is in the curated/tailwind-4 folder.Copy the skill folder
Copy only that folder into your agent's skills directory. For Claude Code on macOS or Linux, run
cp -r Gentleman-Skills/curated/tailwind-4 ~/.claude/skills/. The README says to create the skills directory first if it does not exist.Use another agent's path if needed
The README lists a skills directory for each supported agent, for example ~/.cursor/skills/ for Cursor and ~/.gemini/skills/ for Gemini CLI. Windows paths are listed too.
Optionally reference it in your config
The README's manual route adds a line to your agent's instruction file telling it to read the tailwind-4 SKILL.md first when working with Tailwind.
Check that it loaded
Ask the agent to build a button with primary and secondary variants. It should use cn() with plain Tailwind classes and avoid var() or hex values inside className.
Key features
- Styling decision treeFive lines that route a styling need to className, the style prop, cn() or a var() constant, so the agent stops mixing approaches inside one component.
- No var() in classNameBracketed CSS variable classes are marked as never allowed. The agent should use Tailwind semantic classes like bg-primary instead.
- No hex colors in classNameArbitrary hex values such as a bracketed white or slate hex are banned. Palette classes like text-white and bg-slate-800 replace them.
- cn() with clsx and tailwind-mergeA two-line helper that merges conditional and overriding classes, with examples for variants like primary and secondary and for disabled styling.
- When not to use cn()A static string of utilities does not need a wrapper. The skill shows the plain className form as the correct one.
- Constants for chart librariesFor libraries that take no className, such as Recharts, the skill keeps var() strings in a constants object and passes them as props.
- Dynamic valuesThe style prop handles computed widths and opacity, and CSS custom properties can be set from a style object for things like progress values.
- Pattern cheat sheetShort examples for flexbox, grid, spacing, typography, borders and shadows, states, responsive prefixes and dark mode with the dark: variant.
- Arbitrary value escape hatchOne-off sizes like a 327px width or a custom grid template are allowed in brackets, but never for colors.
Frequently asked questions
What does the tailwind-4 skill do?
It teaches an AI coding agent how to write Tailwind CSS 4 classes consistently. The core rules are no var() and no hex colors inside className, use cn() only when styles are conditional, and use the style prop for dynamic values. It also includes short reference patterns.
How do I install the tailwind-4 skill?
Clone the Gentleman-Skills repository, then copy the curated/tailwind-4 folder into your agent's skills directory. The README gives a cp -r example for macOS and Linux. Each other agent has its own skills folder, listed in a table in the README.
Which agents can load it?
The README names Claude Code, OpenCode, Gemini CLI, Cursor, VS Code Copilot, Codex, Windsurf and Antigravity, each with its own skills directory. Any agent that reads a SKILL.md folder from that location can pick it up when the trigger matches.
Is the tailwind-4 skill MIT or Apache-2.0 licensed?
The repository metadata and README say MIT. The SKILL.md frontmatter, however, lists Apache-2.0. Because those two statements differ, read both files in the repository and confirm with the maintainer before redistributing the skill folder in your own product.
When should the agent not use cn()?
When the classes are static. The skill shows that wrapping a plain list of utilities in cn() is unnecessary and that a normal className string is better. Use cn() when conditions or a passed-in className can conflict with base classes.
How does it handle chart libraries like Recharts?
Libraries that cannot take a className get a constants object whose values are var() strings, such as primary, text and grid line colors. Those constants are passed through props like a tick fill or a grid stroke, and nowhere else.
Does it cover more than colors?
Yes. Beyond the color rules it includes quick patterns for flexbox, grid, spacing, typography, borders, states, responsive prefixes and dark mode. It also says arbitrary bracket values are fine for one-off sizes but not for colors.