Why Tailwind CSS exists - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why was Tailwind CSS created?

Which reason best explains why Tailwind CSS was created?

A To remove all CSS and use inline styles only.

B To provide a utility-first CSS framework that speeds up styling by using small reusable classes.

C To enforce strict color schemes without customization options.

D To replace JavaScript frameworks with CSS-only solutions.

💡 Hint

Think about how Tailwind helps developers write CSS faster and more consistently.

Tailwind CSS was created to offer a utility-first approach, letting developers style elements quickly using small, reusable classes instead of writing custom CSS each time.

📝 Syntax

intermediate

Understanding Tailwind utility classes

Which Tailwind class correctly applies a margin of 1rem on all sides?

A m-1

B margin-1rem

C m-4

D margin:1rem

💡 Hint

Tailwind uses a scale where m-4 equals 1rem margin.

In Tailwind, m-4 applies a margin of 1rem on all sides. The other options are either invalid or not Tailwind syntax.

❓ selector

advanced

How does Tailwind handle responsive design?

Which Tailwind class applies padding of 2rem only on medium screens and larger?

A padding-md-8

B p-md-8

C p-8-md

D md:p-8

💡 Hint

Tailwind prefixes responsive classes with screen size abbreviations like md:

Tailwind uses prefixes like md: to apply styles at specific breakpoints. md:p-8 applies padding 2rem (p-8) on medium screens and up.

❓ layout

advanced

Tailwind Flexbox layout challenge

Which Tailwind classes create a horizontal flex container with items centered vertically and spaced evenly?

A flex items-center justify-between

B flex justify-center items-between

C flex items-between justify-center

D flex-center items-justify space-evenly

💡 Hint

Remember: items-center aligns vertically, justify-between spaces evenly horizontally.

flex creates a flex container, items-center centers items vertically, and justify-between spaces items evenly horizontally.

❓ accessibility

expert

Improving accessibility with Tailwind CSS

Which Tailwind class combination best improves text readability for users with visual impairments?

A text-lg text-gray-900 bg-white

B text-sm text-gray-400 bg-gray-200

C text-base text-gray-300 bg-black

D text-xs text-gray-500 bg-gray-100

💡 Hint

Good contrast and larger text size help readability.

text-lg with dark gray text on white background provides strong contrast and larger font size, improving readability for visually impaired users.