FreeSkills
Commits, branches and sync with the but CLI
- 361361 downloads
- 198198 likes
- 103103 saves
Works with
- Claude Code
- Codex
- Cursor
- and 3 more
Tailwind CSS 4 styling rules and cn() usage v1.0.0
Use this resource to style an interface with Tailwind CSS 4 following its rules
New
- 484 downloads
- 226 likes
- 176 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install tailwind-css-styling-rulesWith no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.
First time: connect the CLI with
npx --yes palatekit@latest loginThe agent chooses between a class, a dynamic style and cn() using the decision tree, avoids var() in className and hard-coded colors, then builds the layout with flexbox or grid. You get Tailwind styling that stays consistent with the theme.
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- Apache-2.0
Similar resources
View all- Free
FreeSkills
Sentry CLI guide
- 525525 downloads
- 117117 likes
- 128128 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Drizzle ORM best practices with PostgreSQL
- 407407 downloads
- 194194 likes
- 151151 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
SLO design wizard
- 537537 downloads
- 105105 likes
- 242242 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
User stories and sprint fit
- 451451 downloads
- 150150 likes
- 132132 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Capacity-based sprint plan
- 423423 downloads
- 192192 likes
- 102102 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Startup CTO advisor
- 580580 downloads
- 201201 likes
- 242242 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeSkills
Creating GitHub pull requests with quality checks
- 427427 downloads
- 230230 likes
- 196196 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- SKILL.md: styling decision tree and critical rules
- SKILL.md: cn() usage and constants for charts
- SKILL.md: flexbox and grid layout patterns
Good fit for
- Your Tailwind code mixes CSS variables and classes
- You want a styling system consistent with the theme
Not for
Tags
- tailwind
- css
- theme
- cn
About
You say
“Restyle this button with the theme classes, without hard-coded colors or var() in className.”
Skill published by gentleman-programming under the Apache-2.0 license, delivered in its original version.
Show moreShow less
How to use it
- Install the skill in your agent's skills folder
- Ask your agent to style an interface with Tailwind CSS 4 following its rules
- Review and adjust the result
Content preview
Files
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.5 KB
- SKILL.md4.8 KB
Origin and licence
Listed unmodified
- Author
- gentleman-programming
- Source
- github.com/gentleman-programming/gentleman-skills/tree/c8036a37893679dc5e942484975405d39689c63b/curated/tailwind-4
- Licence
- Apache-2.0
Notice
« tailwind-4 » (gentleman-programming, Apache-2.0) livré dans sa version d'origine : fiche en français et en anglais par PalateKit.
User reviews
–
No ratings yet
Loading reviews…