Colours, Type and Borders

Introduction

Colour, typography and surface styling are where a page starts to look designed. Tailwind provides a built-in palette and sensible scales, so you can get good results quickly.

Colours

Colour utilities have the form property-colour-shade, for example bg-blue-500 or text-gray-700. The palette has families such as gray, red, orange, amber, green, teal, blue, indigo, purple and pink, each with shades from 50 (very light) to 950 (very dark).

<p class="bg-blue-50 text-blue-900">Light background, dark text</p>
<p class="bg-blue-600 text-white">Strong background, white text</p>

The same colours work for text (text-*), background (bg-*), borders (border-*), rings (ring-*), outlines, fills and more. In the output, bg-blue-500 becomes background-color: var(--color-blue-500), and text-gray-700 becomes color: var(--color-gray-700).

Opacity with a slash

Add / and a number to make a colour transparent: bg-blue-500/50 is 50 percent opaque. I compiled it and it produced a color-mix declaration with 50 percent of the colour and the rest transparent. In v4, the old bg-opacity-50 utilities were removed. The slash replaces them, and bg-opacity-50 generates nothing.

Contrast matters

Colour choices must stay readable. Text and background need enough contrast (WCAG asks for at least 4.5 to 1 for normal text). Light grays on white often fail. Prefer darker text shades, such as text-gray-700 or darker on light backgrounds, and test with a contrast checker.

Typography

text-lg compiles to a font size and a matching line height from the theme. You can set both at once with a slash: text-sm/6 sets the font size to text-sm and line height to 6 spacing steps (1.5rem).

<h1 class="text-3xl font-bold tracking-tight text-gray-900">Welcome</h1>
<p class="mt-2 text-base leading-relaxed text-gray-600">
  Short paragraphs are easier to read.
</p>

text-balance makes headings wrap more evenly, and truncate cuts a single line with an ellipsis.

Corners and borders

• Rounded corners: rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full (circles and pills).
• Borders: border adds a 1px border, and border-2 thicker. Set a colour with border-gray-200.
• Individual sides: border-b, border-t.

Important v4 detail: the default border colour is currentcolor (the text colour), not light gray as in v3. Always set a border colour yourself:

<div class="rounded-lg border border-gray-200 p-4">Card</div>

Shadows and rings

• Shadows: shadow-xs, shadow-sm, shadow-md, shadow-lg. In v4 the names shifted one step: shadow-sm is now what shadow used to be, and shadow-xs is the smallest.
• Rings: ring draws a 1px ring using box-shadow, ring-3 a 3px ring, and ring-blue-500 colours it. I compiled ring and ring-3 and confirmed the widths of 1px and 3px, with currentcolor as the default colour.
• Outlines: outline-2 outline-blue-500. outline-hidden removes the default outline visually but keeps one in forced-colors mode, which is better for accessibility than outline-none.

<button class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white shadow-sm focus:outline-2 focus:outline-offset-2 focus:outline-blue-600">
  Save
</button>

Never remove focus styles without replacing them, since keyboard users rely on them.

Try it yourself

Build a profile card: a white card with rounded-xl border border-gray-200 p-6 shadow-sm, a bold name (text-lg font-semibold text-gray-900), a gray subtitle and a coloured badge (rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800). Check the contrast of each text colour.

Summary

• Colours follow property-colour-shade, and a slash sets opacity, for example bg-blue-500/50.
• Type utilities set size, weight, family, line height and tracking, and text-sm/6 sets size and line height together.
• In v4 the default border colour is currentcolor, shadow and ring names shifted, and visible focus styles remain essential.