iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Quiz

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Eight quick questions on Tailwind v3 and v4 fundamentals.

Sample questions

EXAMPLE
# Tailwind quiz

1) Mobile-first means breakpoint utilities apply:
   a) only below the breakpoint
   b) only above the breakpoint (and inherit downward defaults)
   c) at exactly the breakpoint
   d) on every device

2) In v4 the config moves to:
   a) tailwind.config.js
   b) @theme blocks in CSS
   c) package.json
   d) HTML data attributes

3) Best way to combine classes conditionally:
   a) string concatenation
   b) clsx or cva
   c) inline ternaries everywhere
   d) CSS variables

4) Dark mode by class needs:
   a) darkMode: 'media'
   b) darkMode: 'class' + toggle a 'dark' class on <html>
   c) prefers-color-scheme alone
   d) no setup

5) Container queries in v4 use:
   a) container() functions
   b) @container + @md:flex utilities
   c) JS resize observers
   d) media queries only

6) Arbitrary values - top-[117px] - should be:
   a) routine
   b) rare; promote to a theme token if reused
   c) banned
   d) only for breakpoints

7) The 'group' utility lets you:
   a) bundle classes
   b) react to a parent's hover/focus state in children (group-hover)
   c) animate groups
   d) name a stylesheet

8) The @apply directive is best used for:
   a) every component
   b) extracting repeated utility patterns into a class - sparingly
   c) replacing Tailwind utilities
   d) defining variables

Answers: 1b, 2b, 3b, 4b, 5b, 6b, 7b, 8b.

Why it matters

Mobile-first, mode-by-class, clsx, and theme tokens for anything you repeat. If you nail those four, the rest of Tailwind is composition. @apply has a place but it is not a default.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<!-- 3 questions per lesson. -->
Try it Yourself »

Discussion

Loading…