How do I install the Tailwindcss skill?

Run npx skillmds@latest add compozy/tailwindcss in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Tailwindcss safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Tailwindcss?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Tailwindcss free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Tailwindcss?

compozy (@compozy) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Tailwindcss by compozy — Agent Skill

Name: Tailwindcss
Author: compozy

Tailwindcss

Tailwind CSS v4 conventions — semantic design tokens for theme-safe styling, mobile-first responsive layouts, and v4-first utilities. Use when styling components or writing className utilities with Tailwind. Don't use for plain CSS, CSS-in-JS (styled-components, emotion), or other utility frameworks.

compozy a1d6d33 2 files · 6.2 KB Updated Sep 17, 2026

File contents

Tailwind CSS v4

Prefer utilities for component styling. CSS still owns theme tokens, base rules, and styles that utilities do not express clearly. Use the installed Tailwind version and existing design system.

Use semantic tokens for theme-aware colors, borders, and states. Names come from the project, not a universal shadcn vocabulary; Compozy uses packages/ui/src/tokens.css and DESIGN.md, including bg-canvas, text-fg, and border-line.
Keep class names complete and statically discoverable. Use lookup maps instead of interpolated fragments such as bg-${color}-500.
Group long classes for readability; no character-count gate. Use the project's cn/merge helper when composing variants or accepting overriding className values.
Resolve specificity through the style design and class merging, avoiding !important. Use @apply only where the repository permits it.
Build responsive layouts from content needs, preserve visible keyboard focus, and select supported v4 utilities rather than copying older idioms.
Validate through the repository's owning gates. In Compozy, use root make gate/Turbo commands; a styling edit does not add a separate package-local lint/typecheck ritual.

Read references/patterns.md for the utility or variant being changed. Its token names are examples; use the actual theme inventory.

Frequently asked questions