Tailwindcss

Use when migrating a project from Tailwind v3 to v4, mapping @theme namespaces to generated utilities, or looking up renamed/removed v3 utilities.

Use when configuring Tailwind CSS-first (no config.js), defining @theme tokens, or creating custom utilities/variants. Do NOT use for v3-to-v4 migration or category utility lookup.

Use when building flex or grid layouts, positioning elements (absolute/relative/fixed/sticky), managing z-index/inset, or @container queries.

Use when setting element width/height, constraining min/max dimensions, using dynamic viewport height (h-dvh), or fixing an aspect ratio.

Use when styling element borders, rounded corners, focus outlines/rings, or divide-* separators between children.

Use when adding box/inset shadows, controlling opacity, applying CSS filters or backdrop filters (glassmorphism), or mask-* utilities.

Use when setting margin or padding on any side, centering with m-auto, applying negative margins, or spacing children with space-x-*/space-y-*.

Use when needing a single entry point to find which categorical tailwindcss-* skill covers a given utility class. Router/index only - do NOT use for actual class content.

Use when applying responsive variants at different screen widths, defining a custom breakpoint, or building container-query-based components.

Use when scaling/rotating/translating/skewing an element, configuring transition duration/easing/delay, or applying @keyframes animations.

Use when setting font family/size/weight, aligning or wrapping text (balance/pretty), applying text-shadow or decoration, or letter/line spacing.

Use when styling background colors, building linear/radial/conic gradients, setting background images/position/size, or blend modes.

Use when implementing keyboard-accessible components, screen-reader-only content, prefers-reduced-motion support, or WCAG 2.2 AA/AAA compliance.

Use when creating a new named utility class, writing conditional/dark-mode variants, defining a custom variant selector, or using @apply.

Use when controlling cursor appearance, scroll snap/smooth behavior, text selection, pointer-events, touch actions, or caret/accent colors.