Text colors, backgrounds, and opacity
Color utilities follow patterns such as text-slate-700, bg-blue-600, border-slate-200, and placeholder:text-slate-400. The number usually represents a shade in a palette, with lower and higher values representing different lightness levels. Do not assume every palette is equally suitable for text: test foreground/background contrast.
Opacity utilities and slash modifiers can express transparency, for example bg-black/40 for a translucent overlay. In modern Tailwind, opacity modifiers can be combined with many color utilities. Exact behavior depends on the color syntax and version.
Use semantic intent in your design system: primary actions, muted text, borders, success, warning, and danger should have consistent roles. Avoid choosing each color independently on every page.
A red or green color is not enough to communicate an error or success state. Include text, an icon with an accessible name when useful, or another clear cue.
<article class="rounded-xl border border-emerald-200 bg-emerald-50 p-5">
<p class="text-sm font-medium text-emerald-800">Deployment status</p>
<div class="mt-2 flex items-center gap-2">
<span class="size-2 rounded-full bg-emerald-600" aria-hidden="true"></span>
<h2 class="text-xl font-semibold text-emerald-950">All systems operational</h2>
</div>
<p class="mt-2 text-sm leading-6 text-emerald-900">The latest build passed its health checks.</p>
</article>