tailwind-design-system

Design & Creative

Gives your agent the ability to build production-ready design systems using Tailwind CSS v4 tokens, components, and responsive patterns.

When to use

When creating a component library with Tailwind v4
When implementing design tokens and theming with CSS-first configuration
When migrating from Tailwind v3 to v4

How to use

1
Define your theme using the @theme block in your CSS file
2
Create component variants using Class Variance Authority (CVA)
3
Implement responsive layouts using the built-in grid and container systems
4
Set up dark mode using the @custom-variant dark directive

Example conversation

case

You

I need to set up a new design system using Tailwind v4. Can you help me define the primary colors and a button component?

Agent

I will create a CSS-first configuration using the @theme block to define your primary color tokens with OKLCH values. Then, I'll implement a type-safe Button component using Class Variance Authority that supports multiple variants like primary, destructive, and outline. The component will also include built-in support for dark mode and focus states following v4 best practices.

FAQ

Related Skills

frontend-design-systemDesign & Creative

Gives your agent the ability to produce production-grade UI designs using systematic design tokens, layout rules, and accessibility checks.

frontend-designDesign & Creative

Gives your agent the ability to create distinctive, production-grade frontend interfaces with high aesthetic quality and creative, non-generic code.

design-mdDesign & Creative

Gives your agent the ability to analyze technical assets from Stitch projects and synthesize them into a semantic DESIGN.md file.

interface-designDesign & Creative

Gives your agent the ability to build high-craft, consistent interfaces for dashboards, admin panels, and SaaS tools by focusing on intent-driven design.

api-designDeveloper Tools

Gives your agent the ability to design high-quality RESTful and GraphQL APIs following industry best practices and OpenAPI standards.

tailwind-design-system

Design & Creative

Gives your agent the ability to build production-ready design systems using Tailwind CSS v4 tokens, components, and responsive patterns.

When to use

When creating a component library with Tailwind v4
When implementing design tokens and theming with CSS-first configuration
When migrating from Tailwind v3 to v4

How to use

1
Define your theme using the @theme block in your CSS file
2
Create component variants using Class Variance Authority (CVA)
3
Implement responsive layouts using the built-in grid and container systems
4
Set up dark mode using the @custom-variant dark directive

Example conversation

case

You

I need to set up a new design system using Tailwind v4. Can you help me define the primary colors and a button component?

Agent

FAQ

Related Skills

frontend-design-systemDesign & Creative

Gives your agent the ability to produce production-grade UI designs using systematic design tokens, layout rules, and accessibility checks.

frontend-designDesign & Creative

Gives your agent the ability to create distinctive, production-grade frontend interfaces with high aesthetic quality and creative, non-generic code.

design-mdDesign & Creative

Gives your agent the ability to analyze technical assets from Stitch projects and synthesize them into a semantic DESIGN.md file.

interface-designDesign & Creative

Gives your agent the ability to build high-craft, consistent interfaces for dashboards, admin panels, and SaaS tools by focusing on intent-driven design.

api-designDeveloper Tools

Gives your agent the ability to design high-quality RESTful and GraphQL APIs following industry best practices and OpenAPI standards.

Product

Community

tailwind-design-system

When to use

How to use

Example conversation

FAQ

Related Skills

Product

Community

tailwind-design-system

When to use

How to use

Example conversation

FAQ

Related Skills

Product

Community