Default color palette and shades in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Tailwind's Default Blue Shades

Which Tailwind CSS class applies the default blue color at shade 500?

A bg-blue-500

B text-blue-50

C border-blue-900

D hover:bg-blue-100

💡 Hint

Shade 500 is the base color in Tailwind's palette.

In Tailwind CSS, the shade 500 is the base color. The class 'bg-blue-500' applies the blue color at shade 500 as a background.

📝 Syntax

intermediate

Correct Usage of Tailwind Color Shade in Text

Which option correctly applies the Tailwind red color at shade 700 to text?

A border-red-700

B bg-red-700

C hover:text-red-50

D text-red-700

💡 Hint

Text color classes start with 'text-'.

To color text in Tailwind, use the 'text-' prefix followed by the color and shade. 'text-red-700' applies red shade 700 to text.

❓ selector

advanced

Selecting the Correct Tailwind Class for a Light Gray Background

Which Tailwind CSS class applies the lightest gray background from the default palette?

A bg-gray-50

B bg-gray-900

C bg-gray-500

D bg-gray-1000

💡 Hint

Lower shade numbers are lighter colors.

In Tailwind, gray-50 is the lightest gray shade. 'bg-gray-50' applies this light gray as background.

❓ layout

advanced

Using Tailwind Colors in a Responsive Card Layout

You want a card with a green background that changes from shade 300 on small screens to shade 700 on large screens. Which classes achieve this?

A bg-green-700 lg:bg-green-300

B bg-green-700 sm:bg-green-300

C bg-green-300 lg:bg-green-700

D bg-green-300 md:bg-green-700

💡 Hint

Use the 'lg:' prefix for large screens and base class for small screens.

Tailwind applies the base class to all screen sizes. Using 'bg-green-300' for base and 'lg:bg-green-700' overrides it on large screens.

❓ accessibility

expert

Choosing Accessible Tailwind Color Shades for Text Contrast

Which Tailwind text color shade provides the best contrast on a white background for accessibility?

A text-gray-50

B text-gray-900

C text-gray-200

D text-gray-400

💡 Hint

Darker shades provide better contrast on light backgrounds.

For good accessibility, text on white background should be dark enough. 'text-gray-900' is the darkest gray and provides best contrast.