width tailwindcss code example
Example 1: tailwind breakpoint
// tailwind.config.js
module.exports = {
theme: {
screens: {
'sm': '640px',
// => @media (min-width: 640px) { ... }
'md': '768px',
// => @media (min-width: 768px) { ... }
'lg': '1024px',
// => @media (min-width: 1024px) { ... }
'xl': '1280px',
// => @media (min-width: 1280px) { ... }
'2xl': '1536px',
// => @media (min-width: 1536px) { ... }
}
}
}
Example 2: what is md in tailwind css
// tailwind.config.js
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',
}
}
}