Doesn't watch style changes in @layer (Angular)

[ivanchenhz]

What version of @tailwindcss/jit are you using?

v0.1.17

What version of Node.js are you using?

v12.18.2

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

@angular-devkit/[email protected] [email protected]

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/ivanchenhz/angularTailwindJit

To reproduce, try to modify something in the following code

In @layer section, it won't take effect unless re-start the dev server

Out @layer it works fine ...

@layer components {
  .text-primary {
    @apply tw-text-gray-100;
  }

  .tw-dark .text-primary {
    @apply tw-text-gray-05;
  }
}

.text-primary--layer {
  @apply tw-text-gray-100;
}

.tw-dark .text-primary--layer {
  @apply tw-text-gray-05;
}

[ivanchenhz]

Seems it not related to the recursive @layer, it's still not working even after change the code to following, close it with further research.

@layer components {
  .s-text-primary {
    @apply tw-text-blue-30;
  }

  .tw-dark .s-text-primary {
    @apply tw-text-gray-05;
  }
}

[wc-matteo]

Same issue here. I noticed that if I make a change (besides the change inside the @layer components) to the file that includes @tailwind components and which also has the component import then it reloads the styles correctly

---

using: vue 3.1.1/vite 2.3.8/tailwind 2.2.2 (jit mode)/sass

[FragsterAt]

Same issue with laravel mix
using:
tailwindcss: 2.2.4 laravel-mix: 6.0.25 sass: 1.35.1 sass-loader: 12.1.0 postcss: 8.3.5 postcss-import: 14.0.2

not in JIT mode all works as expected

webpack-mix.js:

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
...
mix.sass('resources/css/app.sass', 'public/css').options({
         processCssUrls: true, // for fonts loading
         postCss: [ tailwindcss('./tailwind.config.js') ],
     });

app.sass:

@import "tailwindcss/base"
@import "base"

@import "tailwindcss/components"
@import "components"

@import "tailwindcss/utilities"

components.sass:

@layer components
  .btn
    @apply rounded py-2 px-4 transition-colors border font-semibold inline-block
    @apply bg-gray-50 border-gray-200 text-gray-700
    &:not(:disabled)
      @apply hover:bg-gray-100 hover:border-gray-300 hover:text-gray-800 active:bg-gray-300
  .btn-primary
    @apply bg-green-50 border-green-200 text-green-700
    &:not(:disabled)
      @apply hover:bg-green-100 hover:border-green-300 hover:text-green-800 active:bg-gray-300

  button:disabled
    @apply cursor-not-allowed

after changing any style in components layer I have message from mix, but there is no changes in generated css file

[jiangyh1024]

same, using Angular13, must restart server and then will take effect

[spaceemotion]

Can confirm with a Vue3 + Vite setup. Since JIT is always enabled now, changes inside @layer take no effect (site still hot-reloads though).

This only appears to be happening when using SCSS instead of regular CSS.

[EinarValholl]

I believe that it's reproducible not only for the @layer directive but for all classes that weren't included in the styles file during dev server initialization process. I've noticed it with the custom colors, but verified later with the default ones and the result is the same. Let's say, there is neither bg-pink-500 nor any other classes with some modifier prefixes with pink-500 color in source code. When dev server is already started and the application compiled (Angular 11.2.11, TailwindCSS 3.0.15), I apply class bg-pink-500 to some template . Obviously, the application is recompiled and the browser tab reloaded, but it has no effect on applying mentioned class (it's added to the node but not defined). I need to restart the dev server to be able to see that class appearance

[Panimaster]

For me it works when setting the tailwind classes in the scss file via @apply whereas setting the tailwind classes in the html does not work

So:
<div class="w-5 h-5"></div>
updates the styles only when I restart the dev server

Whereas:
<div class="my-class"></div>
+
.my-class { @apply w-5 h-5; }
works as expected

(Angular 12.2.1, Tailwind 3.0.15)

[Panimaster]

I tried to downgrade to previous versions and noticed that with version "3.0.7" everything seems to work fine.
In addition I can now see a terminal info which shows me that TailwindCSS is watching my changes. This was not the case with version. 3.0.15

info - Tailwind CSS is watching for changes... info - https://tailwindcss.com/docs/just-in-time-mode#watch-mode-and-one-off-builds

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

I believe that this should all be fixed in the newer versions of Tailwind CSS. If this is still an issue try to upgrade to the latest version, otherwise open a new issue with a reproduction 👍

[untdecocs]

This is not fixed!! latest angular latest tailwind... very frustrating! I have to manually touch the tailwind.config.js for the classes to be applied!!!!!

[martonsimon]

I was having the save problem, where updating the tailwind classes on an html element didn't get reflected in watch mode, except if I reloaded the server or modified a css/scss file or config file.
To solve it, you should enable ESBuild on the project (but be aware that it is still in development https://angular.io/guide/esbuild), by modifying the architect.build.builder attribute inside angular.json, like so:

...
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser-esbuild",
...