skills.rest
walid-mos
walid-mosCOMMUNITY
Explore all skills by this author →
𝕏@dev_au_bonnetGitHub

tailwind

Enforce Tailwind CSS utility class standards with cva and cn().

2|Updated Aug 8, 2024
Search Tags:#best practices#frontend#css#tailwind#code standards#utility classes
One-click install
npx skills add https://github.com/walid-mos/mac-config --skill tailwind-walid-mos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/walid-mos/mac-config/tree/main/claude/.claude/skills/tailwind
Command: npx skills add https://github.com/walid-mos/mac-config --skill tailwind-walid-mos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures adherence to best practices and standards when writing or reviewing Tailwind CSS utility classes, preventing common anti-patterns and promoting maintainable code.

Core Features & Use Cases

  • Standardized Class Application: Enforces inlining utility classes and disallows custom CSS except for specific edge cases.
  • Abstraction Guidelines: Mandates the use of cva for class variants and cn() for class concatenation.
  • Organization & Readability: Provides a clear structure for organizing utility classes by breakpoint and type.
  • Use Case: When developing a new UI component, use this Skill to ensure all Tailwind classes are applied correctly, follow the specified organization, and avoid forbidden patterns like string concatenation or @apply.

Quick Start

Review the provided Tailwind CSS code snippet to ensure it adheres to the defined standards.

Frequently Asked Questions about tailwind

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices for organizing Tailwind CSS utility classes in components?▼

Tailwind CSS utility classes should be organized by breakpoint and type. Adhering to these class organization rules ensures maintainable code and prevents common anti-patterns during component development.

How do I manage Tailwind CSS class variants without custom CSS?▼

You should manage Tailwind CSS class variants using the `cva` function. This abstraction guideline disallows custom CSS and promotes standardized variant application in your template and component development.

Does Tailwind CSS allow string concatenation for combining utility classes?▼

Tailwind CSS standards explicitly forbid string concatenation for utility classes. You must use the `cn()` function for class concatenation to ensure proper class merging and maintainability.

Why should I avoid using @apply in Tailwind CSS code?▼

You should avoid `@apply` because Tailwind CSS standards enforce inlining utility classes directly. Using `@apply` is a forbidden pattern that prevents code maintainability and violates standard class application rules.

Can I use custom CSS for edge cases when following Tailwind CSS code standards?▼

Tailwind CSS code standards disallow custom CSS except for specific edge cases. You must adhere to inlining utilities for all template and component development to maintain code standardization.

Related Skills

Explore More Software Engineering Skills→
furrycolombia-sysfurrycolombia-sys
1

tailwind

Automates Tailwind CSS conventions enforcement in Next.js projects.

Community
Intermediate
Clear-CapabilitiesClear-Capabilities
73

agentic-security:security-sql-injection-warn

Block unsafe SQL string concatenation and enforce parameterized queries during code editing.

Official
Intermediate
miethemiethe

tailwind-utility-styling

Design Tailwind UI styling systems with mobile-first responsive rules and cva variants.

Community
Basic
cuiosscuioss
1

cui-javascript-linting

Configure ESLint, Prettier, and StyleLint for JavaScript projects.

Community
Advanced