Custom breakpoints in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Defining a custom breakpoint in Tailwind CSS

Which of the following tailwind.config.js snippets correctly defines a custom breakpoint named tablet at 640px?

A module.exports = { screens: { tablet: '640px' } }

B module.exports = { theme: { extend: { screens: { tablet: '640px' } } } }

C module.exports = { theme: { screens: { tablet: '640px' } } }

D module.exports = { extend: { screens: { tablet: '640px' } } }

💡 Hint

Custom breakpoints go inside theme.extend.screens to avoid overwriting defaults.

To add a custom breakpoint without removing default ones, you must put it inside theme.extend.screens. Option B does this correctly. Option B overwrites the whole config and misses theme. Option B overwrites default screens. Option B misses theme level.

❓ rendering

intermediate

Effect of custom breakpoint on responsive classes

Given this custom breakpoint tablet: '640px' added correctly, what will the class tablet:bg-red-500 do?

A Apply background red on all screen sizes

B Apply background red only on screens smaller than 640px

C Apply background red only on screens 640px and wider

D Cause an error because <code>tablet</code> is not a default breakpoint

💡 Hint

Tailwind applies breakpoint classes from the specified width and up.

Custom breakpoints behave like default ones. The class tablet:bg-red-500 applies the red background starting at 640px width and up. It does not apply below 640px. It does not cause errors if defined properly.

❓ selector

advanced

Using custom breakpoint in Tailwind CSS selectors

Which CSS selector does Tailwind generate for the class tablet:text-center if tablet is defined as 640px?

A @media (min-width: 641px) { .tablet\:text-center { text-align: center; } }

B @media (max-width: 640px) { .tablet\:text-center { text-align: center; } }

C .tablet\:text-center { text-align: center; }

D @media (min-width: 640px) { .tablet\:text-center { text-align: center; } }

💡 Hint

Tailwind uses min-width media queries for breakpoints.

Tailwind generates media queries with min-width equal to the breakpoint value. So for 640px, it uses @media (min-width: 640px). Option D matches this. Option D uses max-width which is incorrect. Option D has no media query. Option D uses 641px which is off by one.

❓ layout

advanced

Responsive grid layout with custom breakpoints

You want a grid with 2 columns on small screens and 4 columns on your custom breakpoint desktop at 1024px. Which Tailwind classes achieve this?

A grid grid-cols-2 desktop:grid-cols-4

B grid grid-cols-4 desktop:grid-cols-2

C grid-cols-2 grid-cols-desktop-4

D grid-cols-2 grid desktop:grid-cols-4

💡 Hint

Use grid to enable grid layout and breakpoint prefix before the class.

Option A correctly sets grid layout with 2 columns by default and 4 columns at desktop breakpoint. Option A has wrong class order but works similarly, but grid-cols-2 must come with grid. Option A uses invalid class grid-cols-desktop-4. Option A reverses columns count.

❓ accessibility

expert

Ensuring accessible color contrast with custom breakpoints

You define a custom breakpoint wide at 1440px. You want text color to be text-gray-900 normally and text-gray-400 on wide screens. What is the best way to ensure good color contrast for accessibility?

A Use <code>text-gray-400 wide:text-gray-900</code> so text is darker on wide screens

B Use <code>text-gray-900 wide:text-gray-400</code> and test contrast on wide screens

C Use <code>text-gray-900 wide:text-gray-400</code> without testing contrast

D Use <code>text-gray-400</code> only, ignoring breakpoints

💡 Hint

Darker text usually has better contrast on light backgrounds.

Option A ensures text is darker on wide screens, improving readability. Option A makes text lighter on wide screens, which may reduce contrast. Option A ignores testing contrast, which is important. Option A ignores responsiveness.