Custom breakpoints in Tailwind - Mini Project: Build & Apply

Custom Breakpoints with Tailwind CSS

📖 Scenario: You are building a simple responsive webpage. You want to create a custom breakpoint in Tailwind CSS to change the background color of a box when the screen width is at least 720px wide. This is different from Tailwind's default breakpoints.

🎯 Goal: Create a Tailwind CSS configuration with a custom breakpoint named tablet set at 720px. Then use this breakpoint in your HTML to change the background color of a box from blue to green when the screen is at least 720px wide.

📋 What You'll Learn

Create a Tailwind CSS config file with a custom breakpoint named tablet set to 720px.

Use the custom tablet breakpoint in the HTML to change the background color of a box.

The box background color should be blue by default and green at the tablet breakpoint and above.

Use semantic HTML and accessible attributes.

💡 Why This Matters

🌍 Real World

Custom breakpoints let you tailor your website's look exactly for your audience's devices, beyond default sizes.

💼 Career

Web developers often customize Tailwind CSS to meet design requirements and create responsive, accessible websites.

1

Create Tailwind CSS config with custom breakpoint

Create a file named tailwind.config.js and add a theme.extend.screens section. Define a custom breakpoint called tablet with the value '720px' inside the screens object.

Tailwind

// Create tailwind.config.js with custom breakpoint
// Your code here

Hint

Inside module.exports, add theme.extend.screens and define tablet: '720px'.

2

Add HTML structure with a box

Create an HTML file with a <main> element containing a <div> with the class bg-blue-500 and h-40 w-40. This box will have a blue background by default and fixed height and width.

Tailwind

module.exports = {
  theme: {
    extend: {
      screens: {
        tablet: '720px'
      }
    }
  },
  plugins: []
};

 with a  inside having classes bg-blue-500 h-40 w-40 -->

Hint

Use a <main> container and inside it a <div> with classes bg-blue-500 h-40 w-40. Add role="region" and aria-label="Color box" for accessibility.

3

Use the custom breakpoint to change background color

In the <div> element, add the Tailwind class tablet:bg-green-500 to change the background color to green when the screen width is at least 720px.

Tailwind

module.exports = {
  theme: {
    extend: {
      screens: {
        tablet: '720px'
      }
    }
  },
  plugins: []
};




  
  
  Custom Breakpoint Example
  


  
    
    
  

Hint

Add the class tablet:bg-green-500 to the <div> to apply the green background at the custom breakpoint.

4

Add responsive meta and final touches

Ensure the <head> section includes the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag for responsive design. Confirm the <html> tag has lang="en" for accessibility.

Tailwind

module.exports = {
  theme: {
    extend: {
      screens: {
        tablet: '720px'
      }
    }
  },
  plugins: []
};




  
  
  Custom Breakpoint Example
  


  
    
  

Hint

The viewport meta tag is important for responsive design. Also, setting lang="en" on the <html> tag helps screen readers.

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