Use when writing Tailwind markup and you need to recall or verify the vocabulary of base utility families (spacing, color, typography, layout, flexbox, grid, sizing, border, background, effects). Also use when diagnosing why a class name does not produce expected styling, or when porting from a different framework and looking up the Tailwind equivalent. Prevents incorrect class names that the content scanner silently ignores, the v4 shadow-scale shift confusion where `shadow-sm` is smaller than v3's `shadow-sm` because `shadow-xs` was inserted, and the "I thought sm: meant small screens only" responsive trap (see [tailwind-syntax-responsive] for the full responsive treatment). Covers : the canonical class vocabulary for the ten base utility families with v3 and v4 differences flagged inline; the value scales (spacing 0..96, type xs..9xl, shadow 2xs..2xl, color 50..950, etc.); v4 dynamic spacing utilities that accept any integer; v4 opacity modifier syntax (`bg-red-500/50`); the official 22-family color palett
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Instruções da origem · Visualização somente leitura
name
tailwind-syntax-utility-classes
description
Use when writing Tailwind markup and you need to recall or verify the vocabulary of base utility families (spacing, color, typography, layout, flexbox, grid, sizing, border, background, effects). Also use when diagnosing why a class name does not produce expected styling, or when porting from a different framework and looking up the Tailwind equivalent. Prevents incorrect class names that the content scanner silently ignores, the v4 shadow-scale shift confusion where `shadow-sm` is smaller than v3's `shadow-sm` because `shadow-xs` was inserted, and the "I thought sm: meant small screens only" responsive trap (see [tailwind-syntax-responsive] for the full responsive treatment). Covers : the canonical class vocabulary for the ten base utility families with v3 and v4 differences flagged inline; the value scales (spacing 0..96, type xs..9xl, shadow 2xs..2xl, color 50..950, etc.); v4 dynamic spacing utilities that accept any integer; v4 opacity modifier syntax (`bg-red-500/50`); the official 22-family color palette in v4 oklch. Keywords: utility classes, padding, margin, p-4, px-2, m-auto, gap-4, bg-red-500, text-white, text-lg, font-bold, flex, grid, grid-cols-3, flex-1, justify-center, items-center, w-full, h-screen, rounded-md, shadow-md, shadow-xs, opacity-50, what class do I need, Tailwind cheat sheet, how do I center, how do I make 3 columns, blank screen no styling, class not generated, shadow looks different after upgrade, shadow scale changed, why is shadow smaller now, default color palette, how many shades does Tailwind have, bg opacity, color/50, slate gray zinc.
license
MIT
compatibility
Designed for Claude Code. Requires Tailwind CSS v3.4 or v4.0+.
metadata
{"author":"OpenAEC-Foundation","version":"1.0"}
Tailwind CSS : Base Utility Classes
The canonical vocabulary. Every utility documented here is a literal token Tailwind generates from theme tokens. ALWAYS write classes as complete literals; see [tailwind-core-architecture] for why partial token construction breaks the content scanner.
In v4 ANY integer works because spacing is calc(var(--spacing) * <n>) with --spacing: 0.25rem by default. p-17, m-23, w-29 ALL emit valid CSS in v4.
Gap and space-between
Class
Property
gap-<n>
gap (flex + grid both)
gap-x-<n> / gap-y-<n>
column-gap / row-gap
space-x-<n> / space-y-<n>
gap between siblings (legacy; prefer gap-* with flex or grid)
ALWAYS prefer flex flex-col gap-<n> over space-y-<n> per the v4 upgrade-guide recommendation; the space-* family uses fragile sibling selectors and changed behaviour in v4.
v3 default border color : gray-200. v4 default : currentColor. ALWAYS add an explicit border-<color>-<shade> on bordered elements when migrating, OR add a shim in @layer base.
v3 default ring width : 3px. v4 default ring width : 1px. ALWAYS use ring-3 to preserve v3 behaviour, OR a shim.
See [tailwind-errors-v4-migration].
9. Background
Class
Property
bg-<color>-<shade>
background-color (see section 2)
bg-[url('/img/hero.png')], bg-(image:--my-img)
background-image arbitrary
bg-none, bg-linear-to-r, bg-conic-*, bg-radial-*
gradient utilities (see [tailwind-syntax-gradients])
Anti-patterns (summary; full list in references/anti-patterns.md)
NEVER do these :
NEVER use removed v4 utilities : bg-opacity-50, text-opacity-*, border-opacity-*. ALWAYS use slash syntax bg-red-500/50.
NEVER assume shadow-sm is identical between v3 and v4. v4 inserted shadow-xs, shifting the entire scale.
NEVER write flex-shrink-0 or flex-grow-1 in v4 code. ALWAYS use shrink-0 and grow.
NEVER write bg-gradient-to-r in v4 code. ALWAYS use bg-linear-to-r.
NEVER write overflow-ellipsis in v4. ALWAYS use text-ellipsis.
NEVER assume border alone gives a visible border in v4 : the default border color is currentColor, not gray-200. ALWAYS add an explicit border-<color>-<shade>.
Reference Links
references/methods.md : complete property mappings for all ten families, value-scale tables, v3/v4 deltas
references/examples.md : real layout patterns (centered card, sidebar layout, stat grid, hero) using only base utilities
