Standardize Tailwind UI styling with cva variants and tailwind-merge.
npx skills add https://github.com/kid-sid/claude-spellbook --skill tailwind-kid-sid
Please help me install this Agent Skill. Skill: tailwind Source: https://github.com/kid-sid/claude-spellbook/tree/main/skills/tailwind Command: npx skills add https://github.com/kid-sid/claude-spellbook --skill tailwind-kid-sid
## What problem does it solve? Tailwind patterns are powerful but can become inconsistent across projects. This skill provides a curated set of patterns and guidance to standardize use of Tailwind utilities, reduce decision fatigue, and speed up UI development.
## Core Features & Use Cases
### Quick Start Start by identifying your UI component needs and apply the documented Tailwind patterns to implement responsive and themed styles.
High-intent search queries and answers about installing and using this skill.
Build responsive component variants with Tailwind and cva by applying pattern-based utilities and class-variance-authority configurations to standardize styling and reduce decision fatigue. This approach streamlines creating consistent, themeable component variants across complex projects.
Resolve Tailwind class conflicts in complex projects by using the cn() helper alongside tailwind-merge. This pattern cleanly composes class names and eliminates conflicting utility overrides, ensuring consistent styling output across components.
Dark mode theming with Tailwind utility patterns works by applying documented best practices and theme configuration examples. This standardizes dark-mode interface implementations, ensuring consistent light and dark theme styling across the project.
Using arbitrary values in Tailwind risks breaking component consistency. The guidance advises avoiding arbitrary values and unsafe patterns, instead relying on curated pattern-based utilities for spacing, typography, and layout to maintain project standards.
Yes, this Tailwind skill supports both v3 and v4 theme configurations. It provides pattern-based utilities and theme configuration examples to ensure responsive and dark-mode interfaces work consistently across different Tailwind versions in your project.
Standardize Tailwind utilities across your projects to reduce decision fatigue and speed up UI development. Curated patterns for spacing, typography, layout, and theming prevent inconsistencies that commonly arise when utility-first styling scales across multiple components.
blencorpProvide Tailwind CSS v4 utility-first guidance for responsive UI styling.
0r0looApply Tailwind CSS utility classes with cn() and cva variants.
acquiaEnforce Tailwind CSS v4 theme tokens, CVA variants, and cn utility in Canvas components.
FlorianRiquelmeStandardize CSS across frameworks with consistent methodology and production optimization.
