Skills
.Work. You
Rest

tailwindcss-accessibility

Community

Build accessible UIs with Tailwind CSS.

Design & Creative#accessibility#a11y#web development#tailwind css#wcag#ui design
AuthorJosiahSiegel
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps developers ensure their Tailwind CSS-based interfaces meet accessibility standards, making them usable by everyone, including people with disabilities.

Core Features & Use Cases

  • WCAG Compliance: Provides patterns for meeting WCAG 2.2 guidelines (focus management, color contrast, touch targets).
  • Screen Reader Support: Offers utilities for visually hidden content and announcing dynamic changes.
  • Use Case: You're building a complex form with Tailwind CSS. Use this Skill to implement proper focus indicators, ensure sufficient color contrast for all elements, and make sure form labels are correctly associated with their inputs for screen reader users.

Quick Start

Apply the focus-visible:ring-2 focus-visible:ring-brand-500 classes to a button to ensure it has a visible focus state for keyboard users.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: tailwindcss-accessibility
Download link: https://github.com/JosiahSiegel/claude-plugin-marketplace/archive/main.zip#tailwindcss-accessibility

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.