Best Tailwind CSS Skills for Claude Code (2026)

Picking a Tailwind CSS skill for Claude Code is the difference between agent-generated UI that ships and CSS that fights you on every refactor. The fastest answer below is heygen-com/hyperframes at 70,604 installs — but the right pick depends on whether you're building web, React Native, or a design system, and we cover all three (see our full frontend-design skill picks).

Key takeaways

• The most-installed Tailwind skill is tailwind by heygen-com — 70,604 installs, 25,570 stars (skills.sh registry, GitHub) — built specifically for Tailwind CSS v4 browser-runtime patterns.
• For design-system work, tailwind-design-system (wshobson) leads with 48,339 installs and 36,507 stars (skills.sh registry, GitHub) — see more in design systems.
• Every top skill targets Tailwind v4, not v3 — the v3 PostCSS mental model is now the most common pitfall.
• Skillselion catalogs 14,013 skills total, of which 1,875 sit in the build/frontend phase — Tailwind is one slice of a deep CSS & Tailwind library.
• React Native builders have a dedicated path: expo-tailwind-setup ships 36,184 installs (skills.sh registry, GitHub).

What is the best Tailwind CSS skill for Claude Code?

The best general-purpose pick is tailwind by heygen-com, with 70,604 installs and 25,570 stars (skills.sh registry, GitHub) from the repo heygen-com/hyperframes. It pins Tailwind CSS v4 browser-runtime utilities and CSS-first theme tokens, so Claude Code stops emitting stale v3 PostCSS patterns. Two strong alternatives: tailwind-design-system by wshobson (48,339 installs, skills.sh registry, GitHub) for token standardization, and tailwindcss-advanced-layouts by josiahsiegel (7,199 installs, skills.sh registry, GitHub) for grid, flex, and container-query work. Browse the ranked list on our frontend-design pillar.

Which Tailwind skill is best for a design system?

For design systems, tailwind-design-system by wshobson is the top pick at 48,339 installs and 36,507 stars (skills.sh registry, GitHub). It standardizes Tailwind CSS v4 tokens, variants, and accessible components so a solo builder's UI scales without one-off class soup. Pair it with the broader design systems catalog when you're formalizing spacing, color, and type scales. For component-library output specifically, heroui-react by heroui-inc (6,949 installs, 29,592 stars, skills.sh registry, GitHub) builds accessible React UIs on HeroUI v3 + Tailwind v4.

How do I migrate to Tailwind v4 with Claude Code?

Use a skill that grounds answers in v4 syntax, because every top Tailwind skill now assumes v4 and the v3 PostCSS pattern is the #1 source of broken output. tailwind-4-docs by lombiq (3,812 installs, skills.sh registry, GitHub) keeps a locally synced snapshot of the official Tailwind docs so the agent answers utility, config, and migration questions against real v4 reference. The core shift: v4 drops tailwind.config.js for a CSS-first @theme block and uses @import "tailwindcss" instead of the three @tailwind directives. Validate against CSS & Tailwind skills before you commit a migration.

Is there a Tailwind skill for React Native or Expo?

Yes — expo-tailwind-setup by expo is the dedicated cross-platform pick at 36,184 installs and 2,038 stars (skills.sh registry, GitHub). It bootstraps Tailwind CSS v4 with react-native-css and NativeWind v5 inside an Expo app for shared styling across iOS, Android, and web. If you want to avoid NativeWind-style APIs entirely, uniwind by uni-stack (2,528 installs, 1,580 stars, skills.sh registry, GitHub) styles React Native screens with Tailwind v4 classNames directly. Both live in the wider UI design corner of the catalog.

Does shadcn/ui work with Tailwind v4 in Claude Code?

Yes — tailwind-v4-shadcn by jezweb handles exactly this at 2,686 installs and 841 stars (skills.sh registry, GitHub). It bootstraps React + Vite apps with Tailwind CSS v4 and shadcn/ui using the @theme inline CSS-variable pattern, avoiding the config-file friction that breaks naive setups. This is the cleanest route when you want shadcn components themed through v4 tokens rather than a legacy config.

A complete starter stack

1. tailwind (heygen-com) — core v4 utility and theme-token authority for web output. 2. tailwind-design-system (wshobson) — standardize tokens, variants, accessible components. 3. tailwindcss-advanced-layouts (josiahsiegel) — grid, flex, and container queries. 4. tailwind-4-docs (lombiq) — ground migration answers in synced official docs. 5. tailwind-v4-shadcn (jezweb) — shadcn/ui components themed through v4 variables.

Common pitfalls

• Shipping v3 patterns: Claude Code without a pinned skill will emit tailwind.config.js and @tailwind directives — wrong for v4's @theme + @import model.
• Mixing runtimes: swapping a project's pinned browser-runtime build for cdn.tailwindcss.com breaks readiness gates and silently drops styles.
• Wrong platform skill: using a web Tailwind skill for React Native — reach for expo-tailwind-setup or uniwind instead.

Pin one core skill plus a docs-grounding skill and Claude Code stops guessing at Tailwind v4 — start from our frontend-design category.

Common questions