# Tailwind Skill > This skill should be used when the user asks about Tailwind CSS, utility classes, tailwind.config.js/ts, custom themes, responsive design with Tailwind, dark mode, Tailwind plugins, shadcn/ui, Radix UI with Tailwind, arbitrary values, JIT mode, @apply directive, Tailwind v3/v4, CSS variables with Tailwind, or styling components using utility-first CSS. Trigger when the user mentions "tailwind", "tailwindcss", "utility classes", "tailwind config", "dark mode", "shadcn", "cn utility", "clsx", "class-variance-authority", "cva", or "tw-merge". - Skill: `sirhamza/tailwind-skill` (Agent Skill) - Install (CLI): `npx skillmds@latest add sirhamza/tailwind-skill` - Raw SKILL.md: https://api.skillmd.com/api/skills/sirhamza/tailwind-skill/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: SirHamza (https://skillmd.com/u/sirhamza) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/sirhamza/tailwind-skill --- # Tailwind CSS Expert ## Overview Advanced expertise in Tailwind CSS — from utility-first fundamentals and custom theming to component patterns, Tailwind v4, dark mode, and integration with shadcn/ui and Radix UI. --- ## 1. Core Utility Patterns ### Layout ```html
``` ### Spacing ```html
``` ### Sizing ```html
``` ### Typography ```html

``` --- ## 2. Responsive Design Mobile-first breakpoints: `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px), `2xl` (1536px) ```html