Search⌘ K
Home
Courses
Modern CSS with Tailwind

Screen Width

Explore how to customize Tailwind CSS screen widths by modifying default breakpoints or adding new ones. Learn to configure min and max values, rename breakpoint keys, and create custom responsive prefixes. Understand how to use raw media query options for special cases like print mode, enabling precise control over responsive designs.

We'll cover the following...

The screens object

The screens object inside the key generates the breakpoints used for the responsive prefixes. The default looks like the one below:

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

We can modify this in many ways but note that we need to provide the entire range of sizes if we modify ...