Screen Width

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 the values here. If we only want to add a new size, we need to access the extensive subject of themes:

module.exports = {
  theme: {
    screens: {
      extend: {
        3xl: '2440px',
      }
    } 
  }
}

These breakpoints are a reasonable set of defaults, but if we only want to move the values around and about, we can do that here.

Min and max values

We can also change the names of the keys to names of our choice, such as phone, landscape, tablet, and desktop. Those keys then become the names of our prefixes, so we’ll no longer writesm:m-0; we’ll write phone:m-0.

If the value we provide for the screen width keys is a string, it’s considered the min-width of the breakpoint when generating the CSS. We can also pass an object with min and max keys if we specify the breakpoints differently. If we only specify max values, the responsive behavior is reversed.

Unprefixed utilities apply at the largest size, and prefixes take effect as the screen gets smaller:

module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '9999px'},
      'xl': {'max': '1535px'},
      'lg': {'max': '1023px'},
      'md': {'max': '767px'},
      'sm': {'max': '639px'},
    } 
  }
}

We can also supply a min value to those objects, limiting each breakpoint to a specific range. This means that we must specify all properties at each breakpoint.

Queries beyond the size

Media queries are not only based on size. If we want to base a prefix on something else, we can do so with a raw option.

Here is a configuration that adds a print mode:

module.exports = {
  theme: {
    extend: {
      screens: { 'print': {'raw': 'print'} },
    }
  }
}

We can then use this configuration like any other screen with class="print:bg-white".