Tailwind Foundations — Chapter Quiz

Question 1

1

In Tailwind v4, how do you pull the framework into your CSS?

A@tailwind base; @tailwind utilities;B@import "tailwindcss";C@use "tailwindcss";Drequire("tailwindcss")

v4 replaces the three @tailwind directives with a single @import "tailwindcss";.

Question 2

2

What does the term "utility-first" mean?

AYou write semantic class names then style them in CSSBYou compose designs from small single-purpose classes in markupCUtilities are loaded before componentsDIt only ships utility functions, no CSS

Utility-first means building UI directly from many small, single-purpose classes rather than authoring custom CSS.

Question 3

3

What is the Oxide engine in Tailwind v4?

AA new color paletteBA Rust-based engine that makes builds dramatically fasterCA component libraryDA PostCSS replacement for Sass

Oxide is the high-performance Rust engine powering v4, with sub-100ms incremental rebuilds.

Question 4

4

Tailwind is mobile-first, so an unprefixed utility applies at all sizes and breakpoint prefixes override upward.

TTrueFFalse

text-base lg:text-2xl is base everywhere, then 2xl from the lg breakpoint and up.

Question 5

5

Which prefix applies a style only on hover?

Ahover-B:hoverChover:Don-hover-

State variants use a colon, e.g. hover:bg-blue-700.

Question 6

6

The default v4 color palette uses the ___ color space for wider gamut colors.

v4's default palette is defined in OKLCH for more vivid, perceptually uniform colors.

Question 7

7

Why does bg-${color}-500 often fail to produce styles?

ATemplate literals are not allowed in JSXBThe scanner only finds complete class strings, not fragmentsCDynamic classes need a semicolonDYou must register them in tailwind.config.js

Content detection scans for complete class names; fragmented strings are never matched and never generated.

Question 8

8

Which are valid ways to use Tailwind v4 in a project?

Select all that apply.

AThe @tailwindcss/vite pluginBThe @tailwindcss/postcss pluginCThe standalone @tailwindcss/cliDA required tailwind.config.js JS config

Vite plugin, PostCSS plugin, and the CLI are all valid. A JS config file is optional in v4, not required.

Test what you learned.