Agent skill
tailwind-4
Tailwind CSS 4.1+ patterns. Use when styling components, responsive design, container queries, masks, shadows, or animations. (project)
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/tailwind-4
SKILL.md
Tailwind 4.1+
Setup
@import "tailwindcss";
Required Reading
Before writing any @theme or @utility → READ utilities.md and examples/*.css
Avoid → Use
tailwind.config.js→@themein CSS@apply→@utilityor raw CSSdark:bg-*per element → semantic tokens (seepatterns.md)groupclass →in-*variant (seevariants.md)
Patterns
- Dark mode:
:root/.dark+@theme inline→patterns.md - Variants:
in-*,has-*,nth-*, negation →variants.md - Container queries:
@container,@sm:,@md:→variants.md - Entry animation:
starting:variant →patterns.md - Masks:
mask-b-from-*,mask-radial-*→patterns.md
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?