tailwind-advanced

Overview

Advanced Tailwind CSS patterns for production applications — custom plugins, container queries, complex animations, design system integration, and performance optimization beyond basic utility classes.

Capabilities

• Custom Tailwind plugins for project-specific utilities
• Container queries for component-level responsive design
• Complex animations with keyframes and transitions
• Dark mode with class strategy and system preference
• Design system tokens via CSS custom properties
• JIT compiler optimization and purge strategies

When to Use

Trigger phrases:

• "tailwind advanced"

• "Advanced Tailwind CSS — custom plugins, JIT, container queries, animations, dark"

• Building a design system on top of Tailwind

• Need component-scoped responsive design (container queries)

• Complex animations beyond basic Tailwind utilities

• Custom utilities that repeat across the project

When NOT to Use

• Task is about content strategy, not creation (use strategy skills)
• Task is about content distribution (use distribution skills)
• You need to analyze content performance (use analytics skills)
• Task is about content moderation (use moderation tools)
• You don't have content guidelines
• Task requires domain expertise (consult experts)

Pseudo Code

The tailwind-advanced workflow follows a standard pipeline pattern.

Core flow:

# tailwind-advanced primary flow
input = prepare(raw_data)
result = process(input, config={advanced, animations, container, custom, dark})
validate(result)
deliver(result)

Error handling:

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Core Workflow

# tailwind-advanced primary flow
input = prepare(raw_data)
result = process(input, config={advanced, animations, container, custom, dark})
validate(result)
deliver(result)

Error Handling

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()