@apply sm: is not generated with npm run hot/watch

[Fredrik]

What version of @tailwindcss/jit are you using?

0.1.4

What version of Node.js are you using?

15.11.0

What browser are you using?

Chome

What operating system are you using?

macOS

Reproduction repository

lul

I am missing classes when using sm modifiers together with @apply. The media query seems to be generated but without any content. This does not happen when running npm run prod. I am just using mix.sass('resources/sass/app.scss', 'public/css').

SCSS:

@layer components {
  .btn-green, .btn-indigo, .btn-red, .btn-orange, .btn-white, .btn-gray {
    @apply border font-bold rounded-md py-2 px-3 sm:py-3 sm:px-4 focus:ring-2;

    &:disabled {
      @apply opacity-50 cursor-not-allowed;
    }
  }
}

CSS:

.btn-green, .btn-indigo, .btn-red, .btn-orange, .btn-white, .btn-gray{
	border-radius: 0.375rem;
	border-width: 1px;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-weight: 700;
}
@media (min-width: 640px){}
.btn-green:disabled, .btn-indigo:disabled, .btn-red:disabled, .btn-orange:disabled, .btn-white:disabled, .btn-gray:disabled{
	cursor: not-allowed;
	opacity: 0.5;
}

tailwind.config.js

module.exports = {
  purge: {
    content: [
      './resources/js/**/*.vue',
      './resources/sass/*.scss',
      './resources/views/**/*.blade.php',
    ],
    options: {
      safelist: [/md:grid-cols-\d+/, /lg:grid-cols-\d+/]
    }
  },
  // etc
}

[Jesse Dobbelaere]

It sounds like I have the same issue but with an lg:hidden class used with @apply. I'm trying to isolate the issue from my custom CMS setup into a simple repo using HTML and webpack-dev-server but haven't managed to reproduce it in a new simple repo. In the meantime, here are some findings. I use latest versions, so webpack 5.27.1, PostCSS 8.2.8 and @tailwindcss/jit: 0.1.5.

So to summarize, I have

• a hamburger button on which I use lg:hidden with the @apply method in a CSS file.
• a mobile menu (with lg:hidden class set in the HTML code)

When I start dev server, I can see the lg:hidden class is working on the mobile menu, but it did not set it on the .hamburger class using @apply. Weird that the mediaquery is set, but it's empty. This is the same thing that @Livijn found. It used to work fine on webpack-dev-server with regular TailwindCSS, but not yet with the jit compiler.

Here's a video to illustrate how weird it behaves:

tailwind-jit-mediaquery-issue.mp4

---

Will try to make a reproduction repository... 🕵️
Ok, I managed to reproduce the issue in an isolated repo. From what I see, an additional random HTML file called navigation.html is messing up the @apply or purging mechanism? When I clear or remove this file, and restart the dev server, everything works as it should.

Reproduction repository: https://github.com/jessedobbelaere/tailwindcss-jit-issue-132 🚀🙏

[Adam Wathan]

This should be fixed in v0.1.6, thanks!

[Jesse Dobbelaere]

Awesome, tested and confirming that it works on v0.1.6! 👍 🎉