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.