Practice & Assessment
Test your understanding of Customization and Theming
Multiple Choice Questions
5What is the difference between theme.extend and theme in tailwind.config.js?
Which dark mode strategy requires adding or removing a class on the html element?
What does w-[340px] demonstrate in Tailwind?
What is the recommended use case for @apply?
Why does the CSS variable color pattern need / <alpha-value> in the config?
Coding Challenges
1Add a custom design system to a Tailwind project
Starting from a Tailwind + Vite setup, extend the config to add: a custom color palette named brand with shades 50, 100, 500, 700, 900; two custom font families named display and body (reference Google Fonts in HTML head); three custom spacing tokens: 18 (4.5rem), 72 (18rem), 128 (32rem). Build a hero section using: font-display and text-brand-900 on a heading, bg-brand-50 background, a CTA button with bg-brand-500 and hover:bg-brand-700, and max-w-128 container. Expected: hero section proving all custom tokens work. Time estimate: 20-25 minutes.
Mini Project
Themeable Marketing Site with Dark Mode
Build a 3-section marketing page (hero, features, CTA) with a working dark mode toggle. Requirements: define semantic CSS variables in :root and .dark for background, surface, text, and primary colors; configure Tailwind to use these variables via theme.extend.colors; use darkMode: class in config; implement a toggle button that adds/removes the dark class from html and persists to localStorage; every section must look correct in both light and dark modes using dark: prefix utilities; add at least two custom brand colors used throughout the page; extract the primary button style using @apply; use arbitrary values for at least two one-off design decisions.