# Tailwind

> WHEN building design systems or component libraries with Tailwind CSS; covers design tokens, CVA patterns and dark mode.

- **Type:** Skill
- **Install:** `agentstack add skill-mintuz-skills-tailwind`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [mintuz](https://agentstack.voostack.com/s/mintuz)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [mintuz](https://github.com/mintuz)
- **Source:** https://github.com/mintuz/skills/tree/main/plugins/web/skills/tailwind

## Install

```sh
agentstack add skill-mintuz-skills-tailwind
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Prerequisites

- Load the `web:css` skill for CSS Best Practices.
- Load the `web:react` skill for React Best Practices.
- Load the `web:typescript` skill for TypeScript Best Practices.
- load the `web:web-design` skill for Design Best Practices.

# Tailwind Design System

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

## Quick Reference

| Topic                               | Guide                                             |
| ----------------------------------- | ------------------------------------------------- |
| Tailwind config, global CSS, tokens | [setup.md](references/setup.md)                   |
| CVA pattern with type-safe variants | [cva-components.md](references/cva-components.md) |
| Animation utilities and Dialog      | [animations.md](references/animations.md)         |
| Utility functions (cn, focusRing)   | [utilities.md](references/utilities.md)           |
| Do's and Don'ts for maintainability | [best-practices.md](references/best-practices.md) |

## When to Use This Skill

- Creating a component library with Tailwind
- Implementing design tokens and theming
- Building responsive and accessible components
- Standardizing UI patterns across a codebase
- Migrating to or extending Tailwind CSS

## Core Concepts

### Design Token Hierarchy

```
Brand Tokens (abstract)
    └── Semantic Tokens (purpose)
        └── Component Tokens (specific)

Example:
    blue-500 → primary → button-bg
```

### Component Architecture

```
Base styles → Variants → Sizes → States → Overrides
```

## When to Use Each Guide

### Setup

Use [setup.md](references/setup.md) when you need:

- Initial Tailwind configuration
- CSS variable setup for theming
- Design token structure
- Global styles foundation

### CVA Components

Use [cva-components.md](references/cva-components.md) when you need:

- Type-safe component variants
- Button, Badge, or similar components
- Standardized variant APIs
- Reusable component patterns

### Animations

Use [animations.md](references/animations.md) when you need:

- Entry/exit animations
- Dialog or modal transitions
- Tailwind CSS Animate utilities
- State-based animations

### Utilities

Use [utilities.md](references/utilities.md) when you need:

- Class name composition (cn function)
- Common utility patterns
- Focus ring, disabled state helpers

### Best Practices

Use [best-practices.md](references/best-practices.md) for:

- Guidance on semantic naming
- Do's and Don'ts
- Accessibility requirements
- Performance considerations

## Quick Decision Trees

### Where should colors be defined?

```
Is this a one-off color?
├── Yes → Use arbitrary value sparingly (e.g., bg-[#abc123])
└── No → Is it semantic (primary, destructive)?
    ├── Yes → Add to semantic tokens in setup.md
    └── No → Is it a brand color?
        ├── Yes → Add to theme.extend.colors
        └── No → Use existing Tailwind color
```

## Installation

```bash
# Required packages
yarn add tailwindcss postcss autoprefixer
yarn add class-variance-authority clsx tailwind-merge
yarn add tailwindcss-animate
```

## Resources

- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [CVA Documentation](https://cva.style/docs)
- [shadcn/ui](https://ui.shadcn.com/)
- [Radix Primitives](https://www.radix-ui.com/primitives)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mintuz](https://github.com/mintuz)
- **Source:** [mintuz/skills](https://github.com/mintuz/skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mintuz-skills-tailwind
- Seller: https://agentstack.voostack.com/s/mintuz
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.