Tailwindmarkup~30 mins

Custom breakpoints in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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 -->

Need a 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.

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

Need a hint?

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

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

Need a hint?

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