Here is the Tailwind Play code.

I have a configuration as below, mind the custom breakpoint:

const colors = require("tailwindcss/colors");

module.exports = {
  darkMode: "media", // or 'media' or 'class'
  theme: {
    extend: {
      screens: {
        xs: "320px", // here i have xs
      },
      colors: {
        orange: colors.orange,
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Then I have some elements as below:

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

I want the div to display on screens above md, otherwise it should be hidden.

The weird thing about the code above is this totally works with built-in breakpoint, sm. For example, if you remove xs:hidden in Tailwind Play. You will see the behavior I want to have.

However, I also want to include xs:hidden. Why does this happen?

Thanks in advance.

Environment

"postcss": "^7.0.39",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"

Using with React.

CodePudding user response：

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