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.

Practice

1. What is the main purpose of defining custom breakpoints in Tailwind CSS?

easy

A. To add new colors to the palette

B. To change font sizes globally

C. To create custom animations

D. To control when styles change based on screen width

Solution

1. Step 1: Understand what breakpoints do

   Breakpoints let you apply different styles depending on screen size.

2. Step 2: Identify the role of custom breakpoints

   Custom breakpoints let you choose specific screen widths for style changes.

3. Final Answer:

   To control when styles change based on screen width -> Option D

4. Quick Check:

   Breakpoints = screen width control [OK]

Hint: Breakpoints control style changes by screen size [OK]

Common Mistakes:

• Confusing breakpoints with colors or fonts
• Thinking breakpoints create animations
• Assuming breakpoints change global styles

2. Which is the correct way to define a custom breakpoint named tablet at 768px in tailwind.config.js?

easy

A. "screens": { "tablet": "768px" }

B. "screens": { "tablet": 768 }

C. "breakpoints": { "tablet": "768px" }

D. "screens": { "tablet": "768" }

Solution

1. Step 1: Identify the correct config key

   Custom breakpoints go under the "screens" key in tailwind.config.js.

2. Step 2: Use correct value format

   Breakpoint values must be strings with units, e.g., "768px".

3. Final Answer:

   "screens": { "tablet": "768px" } -> Option A

4. Quick Check:

   screens + "768px" string = correct syntax [OK]

Hint: Use "screens" key with pixel string values [OK]

Common Mistakes:

• Using number without units
• Using wrong key like "breakpoints"
• Omitting "px" unit in value

3. Given this config snippet:

module.exports = { theme: { screens: { 'md': '640px', 'lg': '1024px', 'xl': '1280px' } } }

Which class applies padding only on screens 1024px wide or larger?

medium

A. lg:p-4

B. p-lg-4

C. md:p-4

D. xl:p-4

Solution

1. Step 1: Understand breakpoint prefixes

   Tailwind uses breakpoint names as prefixes followed by a colon, e.g., "lg:".

2. Step 2: Match breakpoint to screen size

   "lg" is 1024px, so "lg:p-4" applies padding at 1024px and above.

3. Final Answer:

   lg:p-4 -> Option A

4. Quick Check:

   Prefix "lg:" = 1024px+ padding [OK]

Hint: Use breakpoint name + colon before class [OK]

Common Mistakes:

• Using breakpoint name after class (wrong order)
• Missing colon after breakpoint
• Confusing md and lg breakpoints

4. You added a custom breakpoint tablet at 768px but your styles using tablet:bg-red-500 don't apply. What is the likely error?

medium

A. You defined tablet under colors instead of screens

B. You used tablet: prefix instead of tablet-

C. You forgot to restart the Tailwind build process after config change

D. You wrote tablet: bg-red-500 with a space

Solution

1. Step 1: Check config changes effect

   Tailwind requires restarting the build to load new config values.

2. Step 2: Verify syntax and placement

   Using "tablet:bg-red-500" is correct syntax; spacing or wrong keys cause errors but less likely here.

3. Final Answer:

   You forgot to restart the Tailwind build process after config change -> Option C

4. Quick Check:

   Restart build after config edits [OK]

Hint: Restart Tailwind build after config edits [OK]

Common Mistakes:

• Using dash (-) instead of colon (:) in class prefix
• Defining breakpoint in wrong config section
• Adding spaces inside class names

5. You want a layout that shows a sidebar only on screens wider than 900px. You defined a custom breakpoint desktop at 900px. Which Tailwind class setup correctly hides the sidebar on smaller screens and shows it on desktop and larger?

hard

A. block hidden:desktop

B. hidden desktop:block

C. block desktop:hidden

D. desktop:hidden block

Solution

1. Step 1: Understand default and breakpoint styles

   "hidden" hides element by default (all screens). "desktop:block" shows it at 900px+.

2. Step 2: Match classes to desired behavior

   Using "hidden desktop:block" hides sidebar on small screens and shows on desktop and larger.

3. Final Answer:

   hidden desktop:block -> Option B

4. Quick Check:

   hidden + breakpoint:block = show on breakpoint [OK]

Hint: Use hidden by default, breakpoint:block to show [OK]

Common Mistakes:

• Reversing hidden and block classes
• Using breakpoint:hidden instead of breakpoint:block
• Incorrect class order or syntax