Tailwindcss Not Using My Custom Class Inside Breakpoints

Custom classes added responsive variants didn't work

I know where the problem is: I use windicss as my alternative to Tailwind, but there is some strange differences between their grammar. For example, the correct grammar of the windicss is

@variants lg {
   .lg\:img-box-lg {
     height: 9.2vw;
   }
}

Hidden on Custom Breakpoint Breaks All Breakpoints' Display Value in Tailwind

To hide and element until a specific width use hidden to hide the element and another display class with responsive modifier (e.g. md:flex) to show it again.

So basically this should fit your needs:

<div class="bg-gray-500 hidden md:flex">
  <h1>foo</h1>
</div>

See https://play.tailwindcss.com/Nb0QOhn9E7 for a working snippet.

Combining a responsive hidden (e.g. xs:hidden) and with another responsive display class (e.g. md:flex) doesnt work as the specifity of both css selectors is the same (both use a single class selector inside a mediaquery) so the md:flex does not overwrite it.

Therefore use non-responsive hidden (single class selector) which is less specific then md:flex (single class selector inside a mediaquery) so it gets overwritten for md upwards.

Theres also a issue in tailwind-css github regarding this behaviour:
https://github.com/tailwindlabs/tailwindcss/issues/841

Related Topics