Tailwind Css

{
  "name": "tailwind",
  "version": "1.0.0",
  "category": "universal",
  "toolchain": "ui",
  "tags": [
    "tailwind",
    "css",
    "utility-first",
    "responsive",
    "dark-mode",
    "jit",
    "design-system"
  ],
  "entry_point_tokens": 75,
  "full_tokens": 8041,
  "related_skills": [
    "../../../javascript/frameworks/react",
    "../../../javascript/frameworks/sveltekit",
    "../../../nextjs",
    "../../../typescript"
  ],
  "author": "claude-mpm-skills",
  "license": "MIT",
  "subcategory": "styling",
  "created": "2025-11-30",
  "updated": "2025-11-30",
  "repository": "https://github.com/bobmatnyc/claude-mpm-skills",
  "description": "Comprehensive Tailwind CSS skill covering utility-first styling, responsive design, dark mode, custom configuration, plugins, and framework integration"
}


---
name: tailwind-css
description: "Tailwind CSS utility-first framework for rapid UI development with responsive design and dark mode"
user-invocable: false
disable-model-invocation: true
progressive_disclosure:
  entry_point:
    summary: "Tailwind CSS utility-first framework for rapid UI development with responsive design and dark mode"
    when_to_use: "When working with tailwind-css or related functionality."
    quick_start: "1. Review the core concepts below. 2. Apply patterns to your use case. 3. Follow best practices for implementation."
---
# Tailwind CSS Skill

---
progressive_disclosure:
  entry_point:
    - summary
    - when_to_use
    - quick_start
  sections:
    core_concepts:
      - utility_first_approach
      - responsive_design
      - configuration
    advanced:
      - dark_mode
      - custom_utilities
      - plugins
      - performance_optimization
    integration:
      - framework_integration
      - component_patterns
    reference:
      - common_utilities
      - breakpoints
      - color_system
tokens:
  entry: 75
  full: 4500
---

## Summary

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing CSS. It offers responsive design, dark mode, customization through configuration, and integrates seamlessly with modern frameworks.

## When to Use

**Best for:**
- Rapid prototyping with consistent design systems
- Component-based frameworks (React, Vue, Svelte)
- Projects requiring responsive and dark mode support
- Teams wanting to avoid CSS file maintenance
- Design systems with standardized spacing/colors

**Consider alternatives when:**
- Team unfamiliar with utility-first approach (learning curve)
- Project requires extensive custom CSS animations
- Legacy browser support needed (IE11)
- Minimal CSS footprint required without build process

## Quick Start

### Installation

```bash
# npm
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# yarn
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# pnpm
pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

### Configuration

**tailwind.config.js:**
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

### Basic CSS Setup

**styles/globals.css:**
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### First Component

```jsx
// Simple button with Tailwind utilities
function Button({ children, variant = 'primary' }) {
  const baseClasses = "px-4 py-2 rounded-lg font-medium transition-colors";
  const variants = {
    primary: "bg-blue-600 text-white hover:bg-blue-700",
    secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
    danger: "bg-red-600 text-white hover:bg-red-700"
  };

  return (
    <button className={`${baseClasses} ${variants[variant]}`}>
      {children}
    </button>
  );
}
```

---

## Core Concepts

### Utility-First Approach

Tailwind provides single-purpose utility classes that map directly to CSS properties.

####