Chapter quiz · Customization & Theming

Test what you learned.

8 questions on Customization & Theming. Pass 70% to clear the chapter.

← Review chapter lessons

Quiz

Tailwind Theming — Chapter Quiz

Eight questions on @theme, tokens, @utility, @custom-variant, arbitrary values, and @apply.

0/ 9

Question 1
1
Where do you define design tokens in Tailwind v4?
AIn tailwind.config.js under theme.extendBIn a CSS @theme { } blockCIn package.jsonDIn an .env file
v4 is CSS-first: tokens live in @theme as custom properties.
Question 2
2
Defining --color-brand in @theme generates which utilities?
AOnly --color-brand as a variableBbg-brand, text-brand, border-brand, etc.Cbrand-bg and brand-textDNothing without a JS config
Tokens in the --color-* namespace generate the full set of color utilities for that name.
Question 3
3
Which directive defines a brand-new custom utility?
A@utilityB@layer utilitiesC@applyD@custom-utility
@utility name { ... } registers a custom utility that works with variants.
Question 4
4
Class-strategy dark mode requires a @custom-variant dark (...) in v4.
TTrueFFalse
Without the custom variant, dark: follows the OS preference rather than a .dark class.
Question 5
5
How do you apply a one-off arbitrary value, e.g. a 37px top margin?
Amt-37pxBmt-[37px]Cmt-(37px)Dmt:37px
Square-bracket arbitrary values let you escape the scale when needed: mt-[37px].
Question 6
6
The directive that inlines existing utility styles into a custom CSS rule is @___.
@apply composes utilities inside a custom rule — best for markup you do not control.
Question 7
7
Which directive registers a Tailwind plugin in CSS-first v4?
A@pluginB@import-pluginC@useDrequire()
@plugin "name"; loads a plugin without a JS config file.
Question 8
8
Which are valid Tailwind v4 CSS directives?
Select all that apply.
A@themeB@utilityC@custom-variantD@tailwind base
@theme, @utility, and @custom-variant are v4 directives; @tailwind base is the removed v3 syntax.