I'm attempting to apply a custom class to a div that should only be active on "md" screens. However, it doesn't seem to be working -
<div className="md:myclass"/>tailwind-config.ts
theme: {
screens:{
'sm': {
'min' : '320px',
'max' : '767px'
},
'md': {
'min': '768px',
'max': '1023px'
},
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px'
},
}
}
globals.css // imported in my layout
.myClass{
background: yellow;
}
Skeptical, I decided to test if ":md" was functional or not by adding "md:hidden" and confirmed that it does hide the element.
<div className="md:hidden"/>I also double-checked if the class was imported correctly by trying to apply it directly without md: and observed that it worked properly.
<div className="myclass"/>Is there another method to include my own custom class for responsive design, or am I overlooking something..