Having trouble with setting custom breakpoints in Tailwind CSS. I need to define specific screen sizes that are independent of the container widths. Is it possible to configure this within the Tailwind config file? My goal is to have the "screens" values match the corresponding max-widths of the container at each breakpoint.
export default {
theme: {
screens: { //custom breakpoints
mobile: '415px',
tablet: '576px',
laptop: '768px',
desktop: '992px',
wide-screen: '1200px',
},
container: {
center: true,
screens: { //container max-widths based on breakpoints
mobile: '100%',
tablet: '540px',
laptop: '720px',
desktop: '960px',
wide-screen: '1140px',
},
},
},
};