Tailwindcss Accessibility

This is a comprehensive reference for building accessible Tailwind UIs that actually meet WCAG 2.2 standards. It covers the practical stuff you need: focus rings with focus-visible for keyboard users, sr-only utilities for screen reader text, touch target sizing (24x24 minimum, 44x44 recommended), and motion-reduce handling. The code examples are solid, from skip links that appear on focus to form fields with proper aria-describedby and error announcements. Use it when you're building components that need to pass accessibility audits or when you want to stop guessing about contrast ratios and focus indicators. It's not just theory; the patterns are copy-paste ready with real Tailwind classes.

skills.sh installs: 299
GitHub stars: 61
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add josiahsiegel/claude-plugin-marketplace --skill tailwindcss-accessibility --agent claude-code

Installs into .claude/skills of the current project.

Files

Tailwind CSS Accessibility Patterns (WCAG 2.2 - 2025/2026)

WCAG 2.2 Overview (Current Standard)

WCAG 2.2 is the current W3C standard. Key Tailwind-relevant additions:

2.5.8 Target Size (Level AA): 24x24 CSS pixels minimum, 44x44 recommended
2.4.11 Focus Not Obscured: Focus indicators must be visible
2.4.13 Focus Appearance: Enhanced focus indicator requirements
3.3.7 Redundant Entry: Don't require re-entering information
3.2.6 Consistent Help: Help mechanisms in consistent locations

Focus Management

Focus Ring Utilities

<!-- Default focus ring -->
<button class="focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2">
  Button
</button>

<!-- Focus-visible for keyboard users only -->
<button class="focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500">
  Only shows ring for keyboard focus
</button>

<!-- Focus-within for parent containers -->
<div class="focus-within:ring-2 focus-within:ring-brand-500 rounded-lg p-1">
  <input type="text" class="border-none focus:outline-none" />
</div>

<!-- Custom focus ring component -->

SKILL.md on GitHub