Default color palette and shades in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of Tailwind's default color palette?

Tailwind's default color palette provides a set of predefined colors and shades that help developers quickly style elements with consistent and accessible colors.

beginner

How are shades organized in Tailwind's default color palette?

Shades are organized by numbers like 50, 100, 200, up to 900. Lower numbers are lighter shades, and higher numbers are darker shades of the same color.

beginner

Name three colors included in Tailwind's default palette.

Some colors in Tailwind's default palette are blue, red, and green. Each has multiple shades for flexibility.

beginner

How would you apply a medium blue shade from Tailwind's palette to a background?

Use a class like bg-blue-500 to apply a medium blue background color.

intermediate

Why is it helpful to use Tailwind's color shades instead of custom colors?

Using Tailwind's shades ensures consistent design, good contrast for accessibility, and easier maintenance across the project.

In Tailwind, which shade number represents the lightest color?

A 500

B 50

C 900

D 1000

Shade 50 is the lightest in Tailwind's default color palette.

What does the class text-red-700 do?

A Sets text color to a dark red shade

B Sets background color to red

C Sets border color to red

D Sets text color to light red

text-red-700 applies a dark red color to text.

Which of these is NOT a default Tailwind color?

A magenta

B cyan

C emerald

D amber

Magenta is not part of Tailwind's default color palette.

How many shades does each color in Tailwind's default palette typically have?

A 9

B 5

C 12

D 10

Each color usually has 10 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Which class applies a medium green background in Tailwind?

A bg-green-300

B bg-green-700

C bg-green-500

D bg-green-900

bg-green-500 is the medium green shade for backgrounds.

Explain how Tailwind's default color palette helps maintain design consistency.

Think about how using the same colors and shades helps keep designs uniform.

Describe how you would choose a color shade for text to ensure good readability.

Consider how color contrast affects how easy text is to read.

Practice

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