CSS Tailwind Skill Skill

CSS Tailwind Skill

Master Tailwind CSS utility-first framework with configuration, customization, and production optimization.

Overview

This skill provides atomic, focused guidance on Tailwind CSS with v3+ patterns, custom configuration, and purge optimization.

Skill Metadata

| Property | Value | |----------|-------| | Category | Framework | | Complexity | Intermediate to Advanced | | Dependencies | css-fundamentals | | Bonded Agent | 05-css-preprocessors |

Usage

Skill("css-tailwind")

Parameter Schema

parameters:
  topic:
    type: string
    required: true
    enum: [setup, configuration, utilities, components, plugins, optimization]
    description: Tailwind topic to explore

  framework:
    type: string
    required: false
    enum: [nextjs, vite, react, vue, vanilla]
    description: Framework integration

  include_examples:
    type: boolean
    required: false
    default: true
    description: Include practical code examples

validation:
  - rule: topic_required
    message: "topic parameter is required"
  - rule: valid_topic
    message: "topic must be one of: setup, configuration, utilities..."

Topics Covered

Setup & Configuration

Installation for different frameworks
tailwind.config.js customization
Content path configuration

Utilities

Spacing, colors, typography
Flexbox and Grid utilities
Responsive prefixes
State variants (hover, focus, dark)

Components

Component extraction with @apply
Plugin-based components
Headless UI integration

Optimization

Content purging
JIT mode
Production builds

Retry Logic

retry_config:
  max_attempts: 3
  backoff_type: exponential
  initial_delay_ms: 1000
  max_delay_ms: 10000

Logging & Observability

logging:
  entry_point: skill_invoked
  exit_point: skill_completed
  metrics:
    - invocation_count
    - topic_distribution
    - framework_usage

Quick Reference

Configuration Template

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,html,vue}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
      },
      spacing: {
        '128': '32rem',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

Common Utility Patterns

<!-- Flexbox centering -->
<div class="flex items-center justify-center">

<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

<!-- Card component -->
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">

<!-- Button -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">

<!-- Typography -->
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">

Responsive Prefixes

sm:  → 640px+
md:  → 768px+
lg:  → 1024px+
xl:  → 1280px+
2xl: → 1536px+

Example: class="text-sm md:text-base lg:text-lg"

State Variants

<!-- Hover -->
<div class="bg-white hover:bg-gray-50">

<!-- Focus -->
<input class="border focus:ring-2 focus:ring-blue-500">

<!-- Dark mode -->
<div class="bg-white dark:bg-gray-800">

<!-- Group hover -->
<div class="group">
  <span class="group-hover:text-blue-500">
</div>

Component Extraction

/* Using @apply for component classes */
@layer components {
  .btn {
    @apply px-4 py-2 rounded-md font-medium transition-colors;
  }

  .btn-primary {
    @apply btn bg-blue-500 text-white hover:bg-blue-600;
  }

  .btn-secondary {
    @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
  }
}

Arbitrary Values

<!-- Arbitrary values with [] -->
<div class="top-[117px]">
<div class="bg-[#1da1f2]">
<div class="w-[calc(100%-2rem)]">
<div class="grid-cols-[1fr_2fr_1fr]">

Production Optimization

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  },
}

Test Template

describe('CSS Tailwind Skill', () => {
  test('validates topic parameter', () => {
    expect(() => skill({ topic: 'invalid' }))
      .toThrow('topic must be one of: setup, configuration...');
  });

  test('returns framework-specific setup', () => {
    const result = skill({ topic: 'setup', framework: 'nextjs' });
    expect(result).toContain('next.config');
  });

  test('includes content paths for configuration', () => {
    const result = skill({ topic: 'configuration' });
    expect(result).toContain('content:');
  });
});

Error Handling

| Error Code | Cause | Recovery | |------------|-------|----------| | INVALID_TOPIC | Unknown topic | Show valid options | | MISSING_CONTENT_PATH | Styles not applying | Check content array | | PLUGIN_NOT_FOUND | Plugin import error | Verify installation |

Related Skills

css-fundamentals (utility understanding)
css-architecture (component organization)
css-performance (purge optimization)

Agent Skills: CSS Tailwind Skill

Skill Files