Skill

tailwindcss-accessibility

Tailwind CSS v4.1 accessibility utilities. focus-visible, sr-only, reduced-motion, WCAG enforcement, touch targets, contrast ratios.

From fuse-tailwindcss

Install

Run in your terminal

npx claudepluginhub fusengine/agents --plugin fuse-tailwindcss

Tool Access

This skill uses the workspace's default tool permissions.

Supporting Assets

View in Repository

references/focus-patterns.md

references/wcag-utilities.md

Skill Content

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.7k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

ui-ux-pro-max

Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.

ui-ux-pro-max

57.6k

Stats

Parent Repo Stars4

Parent Repo Forks0

Last CommitMar 26, 2026

Actions

View Source View Plugin View on GitHub View README

Tailwind CSS Accessibility

Accessible-by-default patterns using Tailwind CSS v4.1 utility classes.

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Analyze existing a11y patterns
fuse-ai-pilot:research-expert - Verify latest WCAG 2.2 guidelines
mcp__context7__query-docs - Check Tailwind CSS a11y utilities

After implementation, run fuse-ai-pilot:sniper for validation.

Overview

When to Use

Implementing keyboard-accessible interactive elements
Adding screen reader support to visual-only content
Respecting user motion preferences
Ensuring sufficient color contrast ratios
Meeting WCAG 2.2 AA/AAA compliance requirements
Creating accessible touch targets for mobile

Why Tailwind for Accessibility

Feature	Benefit
`focus-visible`	Keyboard-only focus rings, no mouse clutter
`sr-only`	Screen reader content without visual display
`motion-safe/reduce`	Respects `prefers-reduced-motion`
Utility composition	Consistent a11y patterns across components
CSS-first config	Centralized a11y defaults via `@theme`

Critical Rules

Always use focus-visible — Not focus for interactive elements
Never hide content from screen readers — Use sr-only instead of hidden
Respect motion preferences — Wrap animations in motion-safe:
Minimum touch target 44x44px — Use min-h-11 min-w-11 (2.75rem)
Contrast ratios — 4.5:1 for text, 3:1 for large text (WCAG AA)
Semantic HTML first — Tailwind enhances, never replaces semantics

Quick Reference

Focus States

<button class="focus-visible:outline-2 focus-visible:outline-offset-2
  focus-visible:outline-primary rounded-md">
  Accessible Button
</button>

Screen Reader Only

<span class="sr-only">Open navigation menu</span>

Reduced Motion

<div class="motion-safe:animate-bounce motion-reduce:animate-none">
  Animated content
</div>

Best Practices

Focus rings on all interactive elements — Buttons, links, inputs
Skip links — Add skip-to-content for keyboard navigation
ARIA labels — Supplement with aria-label when visual text absent
Color is not the only indicator — Use icons/text alongside color
Test with keyboard only — Tab through entire UI flow
Test with screen reader — VoiceOver (macOS), NVDA (Windows)

Reference Guide

Need	Reference
Focus rings, keyboard nav	focus-patterns.md
sr-only, contrast, touch targets	wcag-utilities.md