Tailwind Ui Patterns

A solid reference for building component systems with Tailwind v4's new @theme syntax and design tokens. Covers the usual suspects like button variants, cards, and form inputs, plus responsive patterns and dark mode setup. The component examples use a variant-based approach that's easy to extend, and there's good coverage of container queries and backdrop blur effects. Most useful when you're setting up a new project and want to avoid reinventing button states for the hundredth time. The patterns are fairly opinionated but in a good way, they'll push you toward consistent spacing and color usage instead of one-off utilities everywhere.

skills.sh installs: 174
GitHub stars: 13
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add autohandai/community-skills --skill tailwind-ui-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

Tailwind UI Patterns

Tailwind v4 Setup

/* app.css */
@import "tailwindcss";

/* Custom theme tokens */
@theme {
  --color-brand-50: oklch(0.97 0.01 250);
  --color-brand-500: oklch(0.55 0.15 250);
  --color-brand-900: oklch(0.25 0.08 250);

  --font-display: "Cal Sans", system-ui, sans-serif;
  --spacing-18: 4.5rem;
}