🎯

tailwind-ui

🎯Skill

from boise-state-development/agentcore-public-stack

What it does

Generates responsive and customizable UI components using Tailwind CSS, streamlining frontend design with pre-built, accessible interface elements

tailwind-ui

Installation

Install skill:

npx skills add https://github.com/boise-state-development/agentcore-public-stack --skill tailwind-ui

AddedJan 25, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

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.

Overview

# 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

...

```

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

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

More from this repository2

🎯

angular-best-practices🎯Skill

Provides automated code quality checks and recommendations for Angular project structure, coding standards, and performance optimization.

🎯

cdk-infrastructure🎯Skill

Develops AWS CDK infrastructure using TypeScript, creating and configuring cloud resources like VPCs, DynamoDB tables, ECS services, Lambda functions, and IAM roles with best practices.