Tailwind Design System · wshobson/agents · Skills Docs

Frontend Mobile Development

Chapter 75 of 180

Tailwind Design System

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns.

1 minute · 130 words · 8 sections

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 (opens in a new tab).

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 Pattern	v4 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

/* app.css - Tailwind v4 CSS-first configuration */

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.

Install this repository

$ npx skills add wshobson/agents

» /plugin marketplace add wshobson/agents

Skills install per repository, not per chapter — the CLI has no documented per-skill form, so we do not print one.

About this skill

Trigger

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.

The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.

Colophon for this issue

Colophon

How this issue was made

Source: github.com/wshobson/agents, branch main, last pushed 5 August 2026.
Licence: MIT — the text of every chapter is reproduced unmodified, frontmatter included, under the upstream licence.
Discovery: 180 chapters found by walking the repository tree for SKILL.md, not by matching a directory convention. 49 distinct layouts observed: plugins/accessibility-compliance/skills/*/SKILL.md, plugins/agent-teams/skills/*/SKILL.md, plugins/api-scaffolding/skills/*/SKILL.md, plugins/backend-development/skills/*/SKILL.md, plugins/before-you-build/skills/*/SKILL.md, plugins/block-no-verify/skills/*/SKILL.md, plugins/blockchain-web3/skills/*/SKILL.md, plugins/brand-landingpage/skills/*/SKILL.md, plugins/business-analytics/skills/*/SKILL.md, plugins/cicd-automation/skills/*/SKILL.md, plugins/cloud-infrastructure/skills/*/SKILL.md, plugins/conductor/skills/*/SKILL.md, plugins/data-engineering/skills/*/SKILL.md, plugins/database-design/skills/*/SKILL.md, plugins/developer-essentials/skills/*/SKILL.md, plugins/dgx-spark-ops/skills/*/SKILL.md, plugins/documentation-generation/skills/*/SKILL.md.