NextJs - Tailwind css class styles not applied on responsive screen

Question

I am trying to add a custom class on a div that should applied only on "md" screen. Doesn't work -

<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;
}

I was a bit skeptical so just to check if :md is working or not, I added "md:hidden" and it does hides it.

<div className="md:hidden"/>

also checked if the class is imported correctly or not I tried adding the class directly without md: and found it to be working

<div className="myclass"/>

Is there any other way to add my own class for responsive design or am I missing something..

Answer 1

you have to add your custom classes in one of the tailwind layers defined in globals.css file. you can read more about this in tailwind docs

/* globals.css */

@layer components {
  .myclass {
    background: yellow;
  }
}