tailwindcss-advanced-design-systems
This skill provides templates and patterns for constructing production-grade design systems with Tailwind CSS v4's @theme directive. It covers semantic token naming, color scales, typography systems, spacing grids, shadow and motion tokens, plus multi-brand theming and dark mode configuration.
Tailwind CSS Advanced Design Systems helps you build complete design systems with @theme configuration and semantic tokens.
AI-generated summary based on this skill's SKILL.md
Install
JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems · repository language: Shell
git clone https://github.com/JosiahSiegel/claude-plugin-marketplace
cp -r claude-plugin-marketplace/plugins/tailwindcss-master/skills/tailwindcss-advanced-design-systems ~/.claude/skills/tailwindcss-advanced-design-systemsnpx skillfed install JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systemsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is tailwindcss-advanced-design-systems and what does it do?
tailwindcss-advanced-design-systems is an MIT-licensed skill for building production-grade design systems with Tailwind CSS v4's @theme directive. It provides templates and patterns for semantic token naming, color scales, typography systems, spacing grids, shadow and motion tokens, plus multi-brand theming and dark mode configuration.
How do I build a complete design system with semantic tokens and @theme?
tailwindcss-advanced-design-systems guides you through structuring semantic tokens—naming conventions tied to intent rather than color values—and leveraging Tailwind v4's @theme directive to define them centrally. This approach lets you map tokens like `--color-primary-action` to actual values, making theme switching and maintenance straightforward across your entire design system.
Can tailwindcss-advanced-design-systems help with fluid typography and spacing using clamp()?
Yes. tailwindcss-advanced-design-systems covers implementing fluid typography and spacing with CSS clamp() functions, allowing your type scales and spacing to scale responsively between viewport sizes without media queries. This creates smoother, more adaptive layouts that work elegantly across all screen sizes.
What tailwind dark mode tokens setup does this skill provide?
tailwindcss-advanced-design-systems includes patterns for creating dark mode and light mode token systems using CSS variables and Tailwind's theme configuration. You'll learn to define separate token values for each mode and toggle them via class selectors or data attributes, enabling seamless theme switching.
How can I set up multi-brand or multi-theme support with CSS variables?
tailwindcss-advanced-design-systems demonstrates multi-brand theming by organizing CSS variables hierarchically and using @theme to reference them. You can define brand-specific token overrides, swap entire token sets via data attributes or classes, and maintain a single codebase that supports multiple brand identities.
Does this skill cover syncing design tokens from Figma to Tailwind?
tailwindcss-advanced-design-systems includes patterns for design token sync workflows, showing how to export tokens from Figma or design tools and integrate them into your Tailwind configuration. This bridges the gap between design and development, keeping tokens consistent across both domains.
SKILL.md
rendered from the published skill — quoted content, verbatim
Tailwind CSS Advanced Design Systems
Building Design Tokens with @theme
Complete Design Token System
```css @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:
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
plugins/tailwindcss-master/skills/tailwindcss-advanced-design-systems/SKILL.md