0
0
Tailwindmarkup~5 mins

Default color palette and shades in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Colors help make websites look nice and easy to read. Tailwind gives a set of ready colors with different shades to use quickly.

When you want consistent colors across your website.
When you need light or dark versions of a color for backgrounds or text.
When you want to save time by using pre-made colors instead of picking your own.
When you want your site to look good on different screens and lighting.
When you want to follow good design practices with balanced colors.
Syntax
Tailwind
bg-{color}-{shade}
text-{color}-{shade}
border-{color}-{shade}

Replace {color} with a color name like blue, red, or gray.

Replace {shade} with a number like 50, 100, up to 900. Lower numbers are lighter colors, higher are darker.

Examples
Sets background color to a medium blue shade.
Tailwind
bg-blue-500
Sets text color to a dark red shade.
Tailwind
text-red-700
Sets border color to a light gray shade.
Tailwind
border-gray-300
Sample Program

This page shows colored boxes using Tailwind's default colors and shades. Each box uses a background color and text color from the palette. The grid layout arranges them nicely.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind Default Colors</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-2xl font-bold mb-4">Tailwind Default Color Palette</h1>
  <div class="grid grid-cols-5 gap-4 max-w-xl">
    <div class="bg-red-500 text-white p-4 rounded">Red 500</div>
    <div class="bg-green-300 text-green-900 p-4 rounded">Green 300</div>
    <div class="bg-blue-700 text-white p-4 rounded">Blue 700</div>
    <div class="bg-yellow-200 text-yellow-900 p-4 rounded">Yellow 200</div>
    <div class="bg-gray-100 text-gray-800 p-4 rounded border border-gray-300">Gray 100</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Use the Tailwind CDN or install Tailwind to use these classes.

Colors are designed to have good contrast for readability.

You can customize the palette in Tailwind config if needed.

Summary

Tailwind provides ready colors with shades from 50 (light) to 900 (dark).

Use classes like bg-blue-500 or text-red-700 to apply colors.

This helps keep your website colors consistent and easy to change.