Max-width breakpoints
/** @type {import(‘tailwindcss’).Config} */
module.exports = {
theme: {
screens: {
‘2xl’: {‘max’: ‘1535px’},
// => @media (max-width: 1535px) { … }
‘xl’: {‘max’: ‘1279px’},
// => @media (max-width: 1279px) { … }
‘lg’: {‘max’: ‘1023px’},
// => @media (max-width: 1023px) { … }
‘md’: {‘max’: ‘767px’},
// => @media (max-width: 767px) { … }
‘sm’: {‘max’: ‘639px’},
// => @media (max-width: 639px) { … }
}
}
}
Fixed-range breakpoints
/** @type {import(‘tailwindcss’).Config} */
module.exports = {
theme: {
screens: {
‘sm’: {‘min’: ‘640px’, ‘max’: ‘767px’},
// => @media (min-width: 640px and max-width: 767px) { … }
‘md’: {‘min’: ‘768px’, ‘max’: ‘1023px’},
// => @media (min-width: 768px and max-width: 1023px) { … }
‘lg’: {‘min’: ‘1024px’, ‘max’: ‘1279px’},
// => @media (min-width: 1024px and max-width: 1279px) { … }
‘xl’: {‘min’: ‘1280px’, ‘max’: ‘1535px’},
// => @media (min-width: 1280px and max-width: 1535px) { … }
‘2xl’: {‘min’: ‘1536px’},
// => @media (min-width: 1536px) { … }
},
}
}
Multi-range breakpoints
/** @type {import(‘tailwindcss’).Config} */
module.exports = {
theme: {
screens: {
‘sm’: ‘500px’,
‘md’: [
// Sidebar appears at 768px, so revert to `sm:` styles between 768px
// and 868px, after which the main content area is wide enough again to
// apply the `md:` styles.
{‘min’: ‘668px’, ‘max’: ‘767px’},
{‘min’: ‘868px’}
],
‘lg’: ‘1100px’,
‘xl’: ‘1400px’,
}
}
}
Custom media queries
/** @type {import(‘tailwindcss’).Config} */
module.exports = {
theme: {
extend: {
screens: {
‘tall’: { ‘raw’: ‘(min-height: 800px)’ },
// => @media (min-height: 800px) { … }
}
}
}
}