Tailwindcss Advanced Design Systems

If you're building anything beyond basic Tailwind utilities, you need proper design tokens. This gives you the full Tailwind v4 @theme setup with semantic naming conventions, complete color scales in OKLCH, fluid typography with proper type scales, and actual dark mode tokens that don't fight you. The real value is in the patterns: how to structure surface/text/border semantics, how to handle multi-brand theming with CSS variables, and the motion/shadow/spacing systems that keep designs consistent. It's the difference between scattering magic values everywhere and having a maintainable design system. Includes the Figma sync workflow and Style Dictionary integration if you're coordinating with designers.

skills.sh installs: 657
GitHub stars: 61
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add josiahsiegel/claude-plugin-marketplace --skill tailwindcss-advanced-design-systems --agent claude-code

Installs into .claude/skills of the current project.

Files

Tailwind CSS Advanced Design Systems

Building Design Tokens with @theme

Complete Design Token System

@import "tailwindcss";

@theme {
  /* ===== COLOR SYSTEM ===== */

  /* Disable all defaults for full control */
  --color-*: initial;

  /* Semantic color tokens */
  --color-surface-primary: oklch(1 0 0);
  --color-surface-secondary: oklch(0.98 0.002 250);
  --color-surface-tertiary: oklch(0.95 0.004 250);
  --color-surface-inverse: oklch(0.15 0.02 250);

  --color-text-primary: oklch(0.15 0.02 250);
  --color-text-secondary: oklch(0.4 0.02 250);
  --color-text-tertiary: oklch(0.55 0.015 250);
  --color-text-inverse: oklch(0.98 0 0);
  --color-text-disabled: oklch(0.7 0.01 250);

  --color-border-default: oklch(0.85 0.01 250);
  --color-border-subtle: oklch(0.92 0.005 250);
  --color-border-strong: oklch(0.7 0.02 250);

SKILL.md on GitHub