JIT: Stencil compatibility

[deleonio]

What version of @tailwindcss/jit are you using?

v0.1.18

What version of Node.js are you using?

v14

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

stencil - webpack - postcss

What browser are you using?

chrome

What operating system are you using?

windows

Reproduction repository

https://github.com/deleonio/stencil-meets-tailwindcss-jit

If I change the style during development (watch), it won't be adopted.

[deleonio]

It's like the same result: tailwindlabs/tailwindcss-jit#84

[rizkimuhammada]

It seems that I also ran into the same issue, the compile result doesn't change within @layer when there is a change.

@layer components {
    .box {
        @apply bg-red-500;
        @apply bg-green-500; // When changing to this line, the compiled results do not change
    }
}

I use watch mode on Laravel mix. However, I notice that the compilation is running normally without using @layer.

UPDATE: The compile works fine if I comment out all the CSS code (including Tailwind core) then uncomment it.

[deleonio]

Hi @rizkimuhammada, please check in your case the documented limitations here: https://github.com/tailwindlabs/tailwindcss-jit#known-limitations

My case are not recognized classes in TSX files.

[deleonio]

Here are some things you can find helpful:

• TAILWIND_MODE has no effect if you use NODE_ENV
• If I change a css class in TSX file nothing happens.
• If I resave the CSS file it update the style.

The update on changes in the code only responds to the saving of CSS-Files.

[f-elix]

For what it's worth, I also have this problem with Twig files and running a Grunt watcher. I always have to save either the Tailwind config file or any css file to get the new classes to be generated.

Could it be that the internal Tailwind watcher is only working when running the postcss-cli in watch mode?

UPDATE: I made it work! I don't think this is going to apply to everyone, but if it can help, here is what I did:

The issue was that I was calling the plugin function in my postcss options.

Before: require('tailwindcss')()
After: require('tailwindcss')

In my case, the environment variables were setup in a grunt task that was run before watching the files. The problem (at least it was for me) is that the jit compiler stores these environment variables in memory when the plugin function is called, so by calling this function early in my config, all the env variables were stored in memory as undefined, therefore disabling the jit watcher.

I did not setup this postcss config file, and I normally don't call the plugin functions in it, so it took me a while to figure this out. It is now working like a charm!

[deleonio]

Unfortunately, your description doesn't help me any further, as the configuration is as expected.

See: https://github.com/deleonio/stencil-meets-tailwindcss-jit/blob/2114ad420c69e0345864131a37892413b1556c93/stencil.config.ts#L24

Thank you very much @f-elix

[see2ever]

same issue, tailwind seems only keep the classes in first webpack build.
in watch mode, tailwind doesn't add any new class, even refered in other files.

[mvromer]

I ran into this same issue today as well when trying to use Tailwind with Stencil. In my case, I created a Stencil component library project with their CLI, and I use their @stencil/postcss plugin to add support for Tailwind when styling my Stencil components.

tl;dr is that I'm not convinced it's a Tailwind issue as much as it is an issue with how Stencil's dev server watches for files and decides when to retrigger its PostCSS runner (thus retriggering Tailwind). I did manage to find a workaround for using Tailwind JIT in Stencil, but it's probably not the most ideal way of doing things (see the end for details).

It looks like Stencil's plugin will only run PostCSS if the file that changed ends in either a .css, .pcss, or .postcss extension. So you can make change to your Stencil's TSX files all day long, but it's not going to retrigger Tailwind, so the generated styles aren't going to change.

What follows is my attempt to figure out how Tailwind's watcher fits into all this by looking through the Tailwind code (hats off to the Tailwind team making a really readable code base), so caveat being I could be totally wrong here. That said, as far as I can tell, enabling any of the watch support for Tailwind JIT won't matter because Tailwind's watcher basically records some state about the file that's changed and touches a "touch file". Tailwind registers the touch file as a dependency of the file getting transformed on the PostCSS result object, so the idea is that whatever is running PostCSS can look at the registered dependencies and add them to its watch list. You can see how the PostCSS CLI does that here. The upshot is that if the registered dependencies are added to the runner's watch list, then when Tailwind touches the touch file, it triggers the runner's watcher, and the runner can then re-run PostCSS on the changed files. Based on what I can tell, Tailwind will then use the changed file info its watcher logged to only rebuild the stylesheets it needs to.

If you look at @stencil/postcss (Stencil's PostCSS runner), you'll find that it doesn't do anything with any of the dependency messages Tailwind logs on the PostCSS result object. So while Tailwind will detect changes in your TSX file (if you set its purge config option right) and trigger the touch file, Stencil's PostCSS runner plugin will never rerun in response to that, so Tailwind never gets a chance to update the styles.

As a workaround, instead of adding the Tailwind classes to my component's JSX, I've used them inside an @apply rule inside my component's CSS file. It means that I either need to mirror my component's markup structure or use custom CSS class names in my component CSS file, which from I can tell isn't the ideal way of using Tailwind. But at least changes to the CSS file will retrigger Tailwind and cause the styles to be regenerated and trigger a live reload when running Stencil's dev server.

[bradlc]

As @mvromer said, @stencil/postcss does not support PostCSS dependency messages, which is why it doesn't work. I have submitted a pull request adding support for this which should fix the issue but until that is merged I'm afraid there is no simple workaround.

Also note that there is a bug when using .css files, but you can use .pcss instead to get around that 👍

[adamwathan]

Going to close this one as out of our hands, we've got the PR started for fixing the bug in Stencil but don't have control over merging it :/

In the mean time I would recommend just using our CLI and compiling your CSS separately if that's possible:

https://tailwindcss.com/docs/just-in-time-mode#it-just-doesn-t-seem-to-work-properly

[stug111]

Yes, this is problem @stencil/postcss. As a temporary solution, you can use npm-watch, an example can be found here

[aloksharma1]

is this issue still not solved in 2024?