From Tailwind CSS Expert
Expert Tailwind CSS: utility-first styling, responsive/dark mode, theming, and design systems. Trigger keywords: Tailwind, CSS, utility classes, responsive, breakpoints, dark mode, design tokens, theme, @apply, cva, clsx, class-variance-authority, arbitrary values, shadcn. Use for styling UIs, responsive layouts, theming, or untangling class soup.
How this skill is triggered — by the user, by Claude, or both
Slash command
/tailwind-expert:tailwind-expertThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Constraints are the feature: style from the theme scale, not magic numbers. Composition + variants beat `@apply`. If a class string is unreadable, extract a component or a `cva` variant — not a custom CSS file.
Constraints are the feature: style from the theme scale, not magic numbers. Composition + variants beat
@apply. If a class string is unreadable, extract a component or acvavariant — not a custom CSS file.
react-expert.accessibility-expert.p-4, gap-2, text-lg, text-gray-600) over arbitrary values (p-[13px]). Arbitrary values are an escape hatch, not the norm.@theme in CSS; v3: tailwind.config) so every utility stays consistent. Know your version — v4 is CSS-first and config is largely in CSS.@apply is only for tiny shared primitives, not whole components.clsx for booleans, cva (class-variance-authority) for structured variants. Merge conflicting classes with tailwind-merge.sm:/md:/lg:. Never "undo" a larger breakpoint with a smaller one.hover:, focus-visible:, active:, disabled:, aria-*:, data-*:, group-hover:, peer-checked:, dark:.flex/grid + gap-* rather than per-item margins.dark: driven by a class strategy you toggle, so it's controllable and testable.| Situation | Use |
|---|---|
| One-off conditional classes | clsx |
| Component with size/intent variants | cva + tailwind-merge |
Tiny shared primitive (e.g., .btn-base) | @apply |
| Truly bespoke value not in scale | arbitrary [...] (sparingly) |
| Spacing between siblings | gap-* on a flex/grid parent |
@apply everywhere → recreates the CSS-soup Tailwind avoids and loses co-location. Compose components instead.mt-[7px]) → inconsistent spacing; use the scale.tailwind-merge.`text-${color}-500`) → purged away by the compiler; use full static class names or a lookup map.Responsive, dark-mode card (tokens + states)
<article class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm
transition hover:shadow-md
dark:border-gray-800 dark:bg-gray-900
sm:p-6 md:flex md:items-center md:gap-6">
<img class="h-16 w-16 rounded-full object-cover" src="/avatar.jpg" alt="" />
<div class="mt-3 md:mt-0">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Title</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Subtitle</p>
</div>
</article>
Type-safe variants with cva + safe merge
import { cva, type VariantProps } from "class-variance-authority";
import { twMerge } from "tailwind-merge";
export const button = cva(
"inline-flex items-center rounded-md px-3 py-2 text-sm font-medium focus-visible:ring-2 disabled:opacity-50",
{
variants: {
intent: { primary: "bg-blue-600 text-white hover:bg-blue-700",
ghost: "bg-transparent text-blue-600 hover:bg-blue-50" },
size: { sm: "text-xs px-2 py-1", md: "text-sm" },
},
defaultVariants: { intent: "primary", size: "md" },
},
);
export type ButtonProps = VariantProps<typeof button>;
// usage: className={twMerge(button({ intent: "ghost" }), className)}
react-expert — applying classes and variants in components.accessibility-expert — focus-visible states and contrast ratios.nextjs-expert — styling App Router apps and shared layouts.Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub miaoge-ge/coding-agent-skills --plugin tailwind-expert