Tailwind Design System

by wshobson46891e7e60daNo licenseListed Oct 8, 2026Updated Oct 8, 2026

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Instructions onlyDesign & CreativeSoftware Development
AI-generated overview

Guides building scalable Tailwind CSS v4 design systems with tokens, component variants and responsive patterns.

What it does
This skill provides instructions for building design systems with Tailwind CSS v4, covering CSS-first configuration, design tokens, component variants, responsive patterns and accessibility. It explains v4 changes such as @theme in CSS, @import "tailwindcss", custom dark-mode variants and animation tokens, and includes a quick-start CSS example. It produces guidance and code patterns rather than generated files, with further detail in reference documents.
When to use it
Use it when creating a component library, implementing design tokens or theming, standardizing UI patterns across a codebase, or migrating from Tailwind v3 to v4. It also fits setting up dark mode with native CSS features and building responsive, accessible components.
Requirements
No scripts; instructions and reference documents only. Working with the patterns assumes a project using Tailwind CSS v4.

Tailwind Design System (v4)

Build production-ready design systems with Tailwind CSS v4, including CSS-first configuration, design tokens, component variants, responsive patterns, and accessibility.

Note: This skill targets Tailwind CSS v4 (2024+). For v3 projects, refer to the upgrade guide.

When to Use This Skill

  • Creating a component library with Tailwind v4
  • Implementing design tokens and theming with CSS-first configuration
  • Building responsive and accessible components
  • Standardizing UI patterns across a codebase
  • Migrating from Tailwind v3 to v4
  • Setting up dark mode with native CSS features

Key v4 Changes

v3 Patternv4 Pattern
tailwind.config.ts@theme in CSS
@tailwind base/components/utilities@import "tailwindcss"
darkMode: "class"@custom-variant dark (&:where(.dark, .dark *))
theme.extend.colors@theme { --color-*: value }
require("tailwindcss-animate")CSS @keyframes in @theme + @starting-style for entry animations

Quick Start

css
/* app.css - Tailwind v4 CSS-first configuration */@import "tailwindcss";
/* Define your theme with @theme */@theme {  /* Semantic color tokens using OKLCH for better color perception */  --color-background: oklch(100% 0 0);  --color-foreground: oklch(14.5% 0.025 264);
  --color-primary: oklch(14.5% 0.025 264);  --color-primary-foreground: oklch(98% 0.01 264);
  --color-secondary: oklch(96% 0.01 264);  --color-secondary-foreground: oklch(14.5% 0.025 264);
  --color-muted: oklch(96% 0.01 264);  --color-muted-foreground: oklch(46% 0.02 264);
  --color-accent: oklch(96% 0.01 264);  --color-accent-foreground: oklch(14.5% 0.025 264);
  --color-destructive: oklch(53% 0.22 27);  --color-destructive-foreground: oklch(98% 0.01 264);
  --color-border: oklch(91% 0.01 264);  --color-ring: oklch(14.5% 0.025 264);
  --color-card: oklch(100% 0 0);  --color-card-foreground: oklch(14.5% 0.025 264);
  /* Ring offset for focus states */  --color-ring-offset: oklch(100% 0 0);
  /* Radius tokens */  --radius-sm: 0.25rem;  --radius-md: 0.375rem;  --radius-lg: 0.5rem;  --radius-xl: 0.75rem;
  /* Animation tokens - keyframes inside @theme are output when referenced by --animate-* variables */  --animate-fade-in: fade-in 0.2s ease-out;  --animate-fade-out: fade-out 0.2s ease-in;  --animate-slide-in: slide-in 0.3s ease-out;  --animate-slide-out: slide-out 0.3s ease-in;
  @keyframes fade-in {    from {      opacity: 0;    }    to {      opacity: 1;    }  }
  @keyframes fade-out {    from {      opacity: 1;    }    to {      opacity: 0;    }  }
  @keyframes slide-in {    from {      transform: translateY(-0.5rem);      opacity: 0;    }    to {      transform: translateY(0);      opacity: 1;    }  }
  @keyframes slide-out {    from {      transform: translateY(0);      opacity: 1;    }    to {      transform: translateY(-0.5rem);      opacity: 0;    }  }}
/* Dark mode variant - use @custom-variant for class-based dark mode */@custom-variant dark (&:where(.dark, .dark *));
/* Dark mode theme overrides */.dark {  --color-background: oklch(14.5% 0.025 264);  --color-foreground: oklch(98% 0.01 264);
  --color-primary: oklch(98% 0.01 264);  --color-primary-foreground: oklch(14.5% 0.025 264);
  --color-secondary: oklch(22% 0.02 264);  --color-secondary-foreground: oklch(98% 0.01 264);
  --color-muted: oklch(22% 0.02 264);  --color-muted-foreground: oklch(65% 0.02 264);
  --color-accent: oklch(22% 0.02 264);  --color-accent-foreground: oklch(98% 0.01 264);
  --color-destructive: oklch(42% 0.15 27);  --color-destructive-foreground: oklch(98% 0.01 264);
  --color-border: oklch(22% 0.02 264);  --color-ring: oklch(83% 0.02 264);
  --color-card: oklch(14.5% 0.025 264);  --color-card-foreground: oklch(98% 0.01 264);
  --color-ring-offset: oklch(14.5% 0.025 264);}
/* Base styles */@layer base {  * {    @apply border-border;  }
  body {    @apply bg-background text-foreground antialiased;  }}

Core Concepts

1. Design Token Hierarchy

Brand Tokens (abstract)    └── Semantic Tokens (purpose)        └── Component Tokens (specific)
Example:    oklch(45% 0.2 260) → --color-primary → bg-primary

2. Component Architecture

Base styles → Variants → Sizes → States → Overrides

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

Source and attribution

Source:wshobson/agentsinplugins/frontend-mobile-development/skills/tailwind-design-systemat commit46891e7

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from wshobson/agents

Uv Package Manager

wshobson

Reference guide for using the uv Python package manager for dependencies, virtual environments and project workflows.

Software DevelopmentOct 8, 2026

Web Component Design

wshobson

Guides building reusable UI components in React, Vue and Svelte, covering composition patterns, CSS-in-JS choices and component API design.

Software DevelopmentOct 8, 2026

Python Type Safety

wshobson

Guides Python type annotations, generics, protocols, and strict mypy/pyright checking.

Software DevelopmentOct 8, 2026

Visual Design Foundations

wshobson

Guides typography, color, spacing and iconography decisions for cohesive, accessible visual design systems.

Design & CreativeOct 8, 2026

Responsive Design

wshobson

Guides implementation of responsive web layouts using container queries, fluid typography, CSS Grid and breakpoints.

Software DevelopmentOct 8, 2026

Python Resource Management

wshobson

Guides Python developers in managing resources deterministically with context managers, cleanup patterns, and streaming.

Software DevelopmentOct 8, 2026

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative180Kupdated 3 days ago

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative180Kupdated 3 days ago

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative180Kupdated 3 days ago

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative180Kupdated 3 days ago

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative180Kupdated 3 days ago

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today