md:hidden compiles to .md\:\!hidden with an extra exclamation mark, causing the style to not be applied

[myang5]

Hello! I am pretty new to Tailwind, and I'm liking the DX so far but I haven't been able to code some responsive design because of this bug I keep running into. I'm not sure if I haven't configured something correctly, and let me know if I should open a bug report!

I am using the backwards-compatible version of tailwindcss ("npm:@tailwindcss/postcss7-compat") because of CRA with JIT mode enabled, and [email protected] to build.

I have a component that contains an image that should be hidden at the md breakpoint:

<img className="md:hidden" src={iconForwardArrow} alt="Arrow Pointing Right Icon" />

However the image was not being hidden at the breakpoint. I checked the compiled CSS from Tailwind and saw this:

@media (min-width: 768px) {
    .md\:\!hidden {
        display: none !important
    }
    .md\:w-9 {
        width: 2.25rem
    }
}

I noticed that the class generated by md:w-9 from another component did not have the ! in front of it. When I manually edit the compiled CSS and remove the ! so that the CSS selector is .md\:\hidden , the breakpoint for hidden works as expected.

Is there some reason the ! keeps getting added to the selector? Here is my tailwind.config.js:

module.exports = {
  mode: 'jit',
  purge: ['../apps/**/*.{js,jsx}', './src/**/*.{js,jsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      screens: {
        xxs: '360px',
        xs: '480px',
        sm: '576px',
        md: '768px',
        lg: '992px',
        xl: '1200px',
        xxl: '1600px',
      },
    },
  },
  plugins: [],
};

[krognome]

I wish someone had a solution for this all the classes with ! in front of them are broken!

[rozsazoltan]

Although it's an old issue, it still shows up prominently in Google search results for some reason, so:

Note that Tailwind CSS v3.0 requires PostCSS 8, and no longer supports PostCSS 7. If you can’t upgrade to PostCSS 8, we recommend using Tailwind CLI instead of installing Tailwind as a PostCSS plugin.

• Upgrade packages - Tailwind CSS v2 to v3

Which version are you using? It's not entirely clear. v2 seems quite outdated, your config file looks a bit obsolete for v3, and v4 has an entirely different configuration approach. Which version are you using? It's not entirely clear. v2 seems quite outdated, your config file looks a bit obsolete for v3, and v4 has an entirely different configuration approach.

• Get started with Tailwind CSS v4 - Tailwind CSS v4 Docs