Custom breakpoints in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a custom breakpoint in Tailwind CSS?

A custom breakpoint is a user-defined screen size where you can apply different styles. It helps make your design responsive by changing layout or styles at specific widths.

beginner

How do you add a custom breakpoint in Tailwind CSS?

You add a custom breakpoint by editing the tailwind.config.js file and adding a new key with a screen size value inside the theme.extend.screens section.

beginner

Example: What does this custom breakpoint mean? sm: '480px'

It means styles with the prefix sm: will apply when the screen width is 480 pixels or wider.

intermediate

Why use custom breakpoints instead of default ones?

Custom breakpoints let you match your design needs exactly. Default breakpoints might not fit your layout or device targets, so custom ones give more control.

beginner

How do you apply styles for a custom breakpoint named tablet?

Use the prefix <code>tablet:</code> before your class name, like <code>tablet:bg-blue-500</code>. This applies the style only when the screen matches the <code>tablet</code> breakpoint.

Where do you define custom breakpoints in Tailwind CSS?

A In tailwind.config.js under theme.extend.screens

B In your HTML file inside a <style> tag

C In the package.json file

D In the tailwind.css file directly

Custom breakpoints are set in the tailwind.config.js file inside the theme.extend.screens section.

What does the prefix md: mean in Tailwind CSS?

A Apply styles only on small screens

B Apply styles on medium screens and larger

C Apply styles on all screen sizes

D Apply styles only on mobile devices

The md: prefix applies styles when the screen width is medium or larger.

If you add tablet: '640px' as a custom breakpoint, when will tablet:bg-red-500 apply?

A On all screen sizes

B When screen width is less than 640px

C Only on tablets, no matter the size

D When screen width is 640px or wider

The style applies when the screen width is at least 640 pixels.

Why might you want to create a custom breakpoint at 900px?

A To disable responsiveness

B To make styles apply only on phones

C To target devices or layouts that don't fit default breakpoints

D To make styles apply only on very large screens

Custom breakpoints help target specific screen sizes that default breakpoints don't cover well.

How do you write a Tailwind class for a custom breakpoint named laptop?

A <code>laptop:text-lg</code>

B <code>text-lg:laptop</code>

C <code>text-lg</code>

D <code>lg:text-lg</code>

You prefix the class with the breakpoint name and a colon, like laptop:text-lg.

Explain how to add and use a custom breakpoint in Tailwind CSS.

Think about where Tailwind stores config and how prefixes work.

Why are custom breakpoints useful in responsive design with Tailwind CSS?

Consider limitations of default breakpoints.

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