Bird
Raised Fist0
Tailwindmarkup~5 mins

Default color palette and shades in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. Which Tailwind class applies a medium shade of blue background color?
easy
A. bg-blue-50
B. bg-blue-900
C. bg-blue-500
D. bg-blue-1000

Solution

  1. Step 1: Understand Tailwind color shade scale

    Tailwind colors range from 50 (lightest) to 900 (darkest). 500 is the medium shade.

  2. Step 2: Identify the correct class for medium blue

    The class bg-blue-500 applies the medium blue background color.

  3. Final Answer:

    bg-blue-500 -> Option C

  4. Quick Check:

    Medium shade blue = bg-blue-500 [OK]
Hint: Remember 500 is medium shade in Tailwind colors [OK]
Common Mistakes:
  • Choosing 50 or 900 thinking they are medium
  • Using non-existent shade like 1000
  • Confusing text color with background color classes
2. Which of the following is the correct Tailwind class to set text color to a dark red shade?
easy
A. text-red-300
B. text-red-700
C. text-red-50
D. text-red-1000

Solution

  1. Step 1: Identify dark shade range in Tailwind

    Dark shades are closer to 700 or 900. Light shades are 50 or 100.

  2. Step 2: Pick the class for dark red text

    text-red-700 is a dark red shade suitable for text color.

  3. Final Answer:

    text-red-700 -> Option B

  4. Quick Check:

    Dark red text = text-red-700 [OK]
Hint: Dark shades are 700 or above in Tailwind [OK]
Common Mistakes:
  • Using 300 which is lighter shade
  • Using 50 which is very light
  • Using invalid shade 1000
3. What background color will the class bg-green-200 apply in Tailwind CSS?
medium
A. An invalid green shade
B. A medium green shade
C. A very dark green shade
D. A light green shade

Solution

  1. Step 1: Understand Tailwind green shade numbering

    Lower numbers like 50, 100, 200 are light shades; higher numbers like 700, 900 are dark.

  2. Step 2: Interpret bg-green-200

    The class bg-green-200 applies a light green background color.

  3. Final Answer:

    A light green shade -> Option D

  4. Quick Check:

    Green 200 = light green shade [OK]
Hint: Lower shade numbers mean lighter colors [OK]
Common Mistakes:
  • Thinking 200 is medium or dark shade
  • Confusing background and text color classes
  • Assuming 200 is invalid shade
4. You want to apply a yellow background with a medium shade but wrote bg-yellow-600. The color looks too dark. What is the best fix?
medium
A. Change class to bg-yellow-400
B. Change class to bg-yellow-900
C. Change class to bg-yellow-50
D. Keep bg-yellow-600 and add opacity

Solution

  1. Step 1: Understand shade brightness in Tailwind

    600 is a dark shade; 400 is medium; 50 is very light.

  2. Step 2: Choose a medium shade for yellow background

    Changing to bg-yellow-400 will give a medium yellow shade, lighter than 600.

  3. Final Answer:

    Change class to bg-yellow-400 -> Option A

  4. Quick Check:

    Medium yellow = bg-yellow-400 [OK]
Hint: Use 400 for medium shade if 600 is too dark [OK]
Common Mistakes:
  • Choosing 900 which is even darker
  • Choosing 50 which is too light
  • Adding opacity instead of adjusting shade
5. You want to create a button with a blue background that changes from light blue on hover to dark blue when active. Which combination of Tailwind classes is correct?
hard
A. bg-blue-300 hover:bg-blue-500 active:bg-blue-700
B. bg-blue-700 hover:bg-blue-300 active:bg-blue-500
C. bg-blue-500 hover:bg-blue-700 active:bg-blue-300
D. bg-blue-900 hover:bg-blue-500 active:bg-blue-300

Solution

  1. Step 1: Understand shade order for blue in Tailwind

    Lower numbers (300) are lighter, higher numbers (700) are darker.

  2. Step 2: Match states with correct shades

    Base: light blue (300), hover: medium blue (500), active: dark blue (700).

  3. Step 3: Verify class order

    bg-blue-300 hover:bg-blue-500 active:bg-blue-700 matches the requirement.

  4. Final Answer:

    bg-blue-300 hover:bg-blue-500 active:bg-blue-700 -> Option A

  5. Quick Check:

    Light to dark on hover and active = bg-blue-300 hover:bg-blue-500 active:bg-blue-700 [OK]
Hint: Lower shade number = lighter color; increase on hover/active [OK]
Common Mistakes:
  • Reversing light and dark shades in states
  • Using darker base color than hover
  • Mixing up hover and active shades