Colors & Typography
Tailwind includes a beautiful, carefully crafted color palette and comprehensive typography utilities.
The Color Palette
Tailwind's colors use a shade scale from 50 to 950:
See the blue palette:
50
200
500
700
900
Available Colors
Tailwind includes these color families:
- Grays: slate, gray, zinc, neutral, stone
- Colors: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
Applying Colors
<!-- Text color -->
<p class="text-red-600">Red text</p>
<!-- Background color -->
<div class="bg-green-100">Green background</div>
<!-- Border color -->
<div class="border-2 border-blue-500">Blue border</div>Red text (text-red-600)
Green background (bg-green-100)
Blue border (border-blue-500)
Opacity
Add opacity to any color:
<!-- Background with opacity -->
<div class="bg-black/50">50% black overlay</div>
<div class="bg-blue-500/75">75% opacity blue</div>bg-black/50 overlay
bg-white/75 overlay
Typography - Font Size
Control text size with text-:
<p class="text-xs">Extra small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">Extra large (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<p class="text-3xl">3XL (30px)</p>text-xs - Extra small (12px)
text-sm - Small (14px)
text-base - Base (16px)
text-lg - Large (18px)
text-xl - Extra large (20px)
text-2xl - 2XL (24px)
text-3xl - 3XL (30px)
Font Weight
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>font-light (300)
font-normal (400)
font-medium (500)
font-semibold (600)
font-bold (700)
Text Alignment & Decoration
<!-- Alignment -->
<p class="text-left">Left aligned</p>
<p class="text-center">Centered</p>
<p class="text-right">Right aligned</p>
<!-- Decoration -->
<p class="underline">Underlined</p>
<p class="line-through">Strikethrough</p>
<!-- Transform -->
<p class="uppercase">UPPERCASE</p>
<p class="capitalize">Capitalize Each Word</p>Practical Example: Article Header
Combining colors and typography:
<article class="max-w-2xl mx-auto">
<div class="text-sm text-indigo-600 font-semibold uppercase tracking-wide">
Tutorial
</div>
<h1 class="mt-2 text-3xl font-bold text-gray-900">
Building Beautiful UIs
</h1>
<p class="mt-4 text-lg text-gray-600">
Learn how to create stunning interfaces...
</p>
</article>
Tutorial
Building Beautiful UIs with Tailwind CSS
Learn how to create stunning, responsive interfaces using utility-first CSS.
SC
Sarah Chen
March 15, 2024
Key Takeaways
- Color shades: 50 (lightest) to 950 (darkest)
- Color properties:
text-,bg-,border-,ring-* - Opacity: Use
/50syntax for transparent colors - Font size:
text-sm,text-lg,text-2xl, etc. - Font weight:
font-normal,font-semibold,font-bold - Combine them to create visual hierarchy
Next, let's master Flexbox layouts!