Screen Width
Learn how to manage the screen width using screens objects, min, and max values.
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 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"
.
Get hands-on with 1200+ tech skills courses.