How do I install the Tailwind UI skill?

Run npx skillmds@latest add majiayu000/tailwind-ui in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Tailwind UI safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Tailwind UI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Tailwind UI free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Tailwind UI?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Tailwind UI by majiayu000 — Agent Skill

Name: Tailwind UI
Rating: 4.2 (5 reviews)
Author: majiayu000

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.

majiayu000 Updated Sep 9, 2026 567 repo stars

File contents

Tailwind UI Skill

Tailwind CSS v4.1 development with accessibility and theming baked in.

Quick Reference

v4.1 Critical Changes

Never use deprecated utilities — always use replacements:

Deprecated	Replacement
`bg-opacity-*`	`bg-black/50` (opacity modifier)
`bg-gradient-*`	`bg-linear-*`
`shadow-sm`	`shadow-xs`
`shadow`	`shadow-sm`
`rounded-sm`	`rounded-xs`
`rounded`	`rounded-sm`
`ring`	`ring-3`
`outline-none`	`outline-hidden`
`leading-*`	Use `text-base/7` line-height modifiers
`flex-shrink-` / `flex-grow-`	`shrink-` / `grow-`
`space-x-*` in flex/grid	Use `gap-*` instead

Essential Patterns

<!-- Gap over space utilities -->
<div class="flex gap-4">...</div>

<!-- Opacity modifiers -->
<div class="bg-primary-500/60">...</div>

<!-- Line height modifiers -->
<p class="text-base/7">...</p>

<!-- Dynamic viewport height (mobile-safe) -->
<div class="min-h-dvh">...</div>

<!-- Size utility for equal dimensions -->
<div class="size-12">...</div>

Reference Files

Load these based on the task:

references/v4-migration.md — Full v4.1 breaking changes, upgrade process, new features
references/accessibility.md — WCAG 2.1 AA patterns: contrast, focus, screen readers
references/theming.md — @theme setup, CSS variables, light/dark mode
references/components.md — Accessible component patterns (buttons, forms, cards, nav)

Theme Asset

assets/theme-starter.css — Starter @theme with primary/secondary/tertiary color scales

Core Principles

Use Tailwind's scale — Avoid arbitrary values like ml-[16px]; use ml-4
Never use @apply — Use CSS variables or framework components
Gap over margins — Use gap-* in flex/grid, not space-* or child margins
Test both modes — Always verify light AND dark mode appearance
Accessibility first — Every interactive element needs visible focus states and proper contrast

---name: tailwind-uidescription: 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.--- # Tailwind UI Skill Tailwind CSS v4.1 development with accessibility and theming baked in. ## Quick Reference ### v4.1 Critical Changes Never use deprecated utilities — always use replacements: | Deprecated | Replacement | |------------|-------------| | `bg-opacity-*` | `bg-black/50` (opacity modifier) | | `bg-gradient-*` | `bg-linear-*` | | `shadow-sm` | `shadow-xs` | | `shadow` | `shadow-sm` | | `rounded-sm` | `rounded-xs` | | `rounded` | `rounded-sm` | | `ring` | `ring-3` | | `outline-none` | `outline-hidden` | | `leading-*` | Use `text-base/7` line-height modifiers | | `flex-shrink-*` / `flex-grow-*` | `shrink-*` / `grow-*` | | `space-x-*` in flex/grid | Use `gap-*` instead | ### Essential Patterns ```html  <div class="flex gap-4">...</div>  <div class="bg-primary-500/60">...</div>  <p class="text-base/7">...</p>  <div class="min-h-dvh">...</div>  <div class="size-12">...</div> ``` ## Reference Files Load these based on the task: - **[references/v4-migration.md](references/v4-migration.md)** — Full v4.1 breaking changes, upgrade process, new features - **[references/accessibility.md](references/accessibility.md)** — WCAG 2.1 AA patterns: contrast, focus, screen readers - **[references/theming.md](references/theming.md)** — @theme setup, CSS variables, light/dark mode - **[references/components.md](references/components.md)** — Accessible component patterns (buttons, forms, cards, nav) ## Theme Asset - **[assets/theme-starter.css](assets/theme-starter.css)** — Starter @theme with primary/secondary/tertiary color scales ## Core Principles 1. **Use Tailwind's scale** — Avoid arbitrary values like `ml-[16px]`; use `ml-4` 2. **Never use @apply** — Use CSS variables or framework components 3. **Gap over margins** — Use `gap-*` in flex/grid, not `space-*` or child margins 4. **Test both modes** — Always verify light AND dark mode appearance 5. **Accessibility first** — Every interactive element needs visible focus states and proper contrast

Frequently asked questions