@apply sm: is not generated with npm run hot/watch
Livijn opened this issue Β· comments
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
}
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
This should be fixed in v0.1.6, thanks!
Awesome, tested and confirming that it works on v0.1.6!