JIT Engine/Compiler creates a selector for each property

[michaelbeers]

What version of Tailwind CSS are you using?

v3.0.23

What build tool (or framework if it abstracts the build tool) are you using?

postcss 6.4.8, postcss-import 14.0.2, @wordpress/scripts 22.2.1 (unsure which webpack version)

What version of Node.js are you using?

node v16.7.0, npm v8.5.0

What browser are you using?

N/A

What operating system are you using?

MacOS

Reproduction

After using the following syntax to make an better experience for touch devices the compiler will generate the following CSS:

Src syntax

@media(hover:none) {
  .site .nav--toggle-sub .menu-item--has-toggle:not(.menu-item--toggled-on) .dropdown-nav-special-toggle {
    @apply right-0 mr-0 #{!important};
    @apply left-0 w-full;

    pointer-events: all;
  }

  .site .nav--toggle-sub .menu-item--has-toggle:not(.menu-item--toggled-on) > a {
    @apply pointer-events-none;
  }
}

Compiled syntax:

@media (hover: none) {
  .site .nav--toggle-sub .menu-item--has-toggle:not(.menu-item--toggled-on) .dropdown-nav-special-toggle {
    right: 0px !important;
  }
  .site .nav--toggle-sub .menu-item--has-toggle:not(.menu-item--toggled-on) .dropdown-nav-special-toggle {
    margin-right: 0px !important;
  }
  .site .nav--toggle-sub .menu-item--has-toggle:not(.menu-item--toggled-on) .dropdown-nav-special-toggle {
    left: 0px;
  }
  .site .nav--toggle-sub .menu-item--has-toggle:not(.menu-item--toggled-on) .dropdown-nav-special-toggle {
    width: 100%;
  }
  .site .nav--toggle-sub .menu-item--has-toggle:not(.menu-item--toggled-on) .dropdown-nav-special-toggle {
    pointer-events: all;
  }

Describe your issue

See reproduction

[thecrypticace]

Thanks for the report! This was resolved in #7565 but is not yet part of a tagged release. In the mean time you can use our insiders build by running npm install tailwindcss@insiders