tailwind-ui
Tailwind CSS v4.1 best practices with WCAG 2.1 AA accessibility, theming, and dark mode support. Use when working with HTML, CSS, styling components, accessibility (a11y), WCAG compliance, color contrast, focus states, screen readers, theming, light mode, dark mode, or building accessible UI patterns like buttons, forms, cards, and navigation. Complements the angular-best-practices skill for Angular frontends.
Security Assessment
About tailwind-ui
The 'tailwind-ui' skill provides developers with a set of best practices for using Tailwind CSS v4.1, specifically focused on ensuring accessibility, theming, and dark mode support. By incorporating WCAG 2.1 AA accessibility standards, this skill allows developers to create UI components and applications that are not only visually appealing but also accessible to users with disabilities. It addresses key concerns such as color contrast, focus states, and screen reader compatibility, ensuring that the applications built are both usable and compliant with web accessibility guidelines.
FAQ
How do I update to Tailwind CSS v4.1 using this skill?
You can refer to the 'references/v4-migration.md' file for a complete guide on the breaking changes in v4.1, the upgrade process, and new feature additions.
What accessibility standards are covered by this skill?
The skill includes WCAG 2.1 AA patterns such as contrast, focus states, and screen reader support. For more details, consult the 'references/accessibility.md' file.
Is this skill compatible with Angular projects?
Yes, this skill complements the 'angular-best-practices' skill, making it suitable for Angular frontends.
Can I use arbitrary values for margin and padding in this skill?
No, it is recommended to use Tailwind's predefined scale for consistency. Avoid arbitrary values like 'ml-[16px]' and instead use 'ml-4'.
Does this skill support light and dark mode?
Yes, you should always verify the appearance in both light and dark modes. The skill provides support for theming, including primary, secondary, and tertiary color scales.
Install tailwind-ui
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill