Tailwind classes not refreshing while running DEV server with --watch

[dtaalbers]

Thank you for creating this plugin! I failed to get it to work properly though. I am not sure if and what I am doing wrong. I've made a quick example project in which I am trying to get the plugin to work.

See https://github.com/dtaalbers/tailwindcss-stenciljs-example for the complete setup that I am using. The issues that I am having are described in the README of the repository. I will paste them below for clarity. I am running in two issues that really block me during development of components with the latest version 3 (including the JIT engine) of Tailwind CSS. I would appreciate if you can help me out.

Refresh classes when running the dev server.

• Clone project
• Run npm start
• Change background color from bg-red-400 to bg-blue-400
• As result I would expect the background color to change. But it just changes to a transparent background because it doesn't know the class bg-blue-400. Because I have --watch running I'd expect the tailwind classes in www/build/tailwindcss-stenciljs-example.css to be refreshed based on the current classes in the component and or stylesheets. At the moment for the changes to be visible you have to re-run npm start.

Also include the classes used in the src/index.html and/or other html files in the src folder.

• Clone project
• Run npm start
• It seems to ignore the tailwind classes used in src/index.html. The component should be centered in the page, which it isn't. Only when a tailwind class is used in the component it gets added to the www/build/tailwindcss-stenciljs-example.css stylesheet and when the same class from the component is used in the HTML file you can see the styling being applied. Of course, that is because the tailwind class gets added due to it being used in the component. I'd expect the tailwind classes in al HTML files (provided by content in the tailwind config) to be added as well when starting via npm start and when making a change in one of the HTML files or components.
• FYI: I am using src/index.html (and in the future more HTML files) to create a nice application to show case my developed components.

Thank you in advance!

[Poimen]

So the second question about the index.html is a limitation of the builder framework. The index.html is not passed through to the builder, so the tooling does not impact anything on the index files. Unfortunately you'll need to figure that one out in terms of your workflow, the plugin is based on how the Stencil compiler works.

There could be a number of permutations. I have toyed with the idea of reading the index.html file then applying the tailwind configuration. The output would then become inline. However, this is getting into fairly dodgy territory as you wouldn't know how the cascade was meant to be done if there are other stylesheets. Hence, I've left this as an exercise for the reader 🥼 😸

So not sure that there is an easily workable solution around this as the stencil compiler is not involved at all. I would normally advocate a "page" main component that controls the layout rather than the index, but again, there are many differing opinions on that given load times, etc.

On the first question, I won't have time to clone the repo for a while. However, it is likely to be solved by the inclusion of the HMR plugin to your configuration:

  plugins: [
    sass(),
    tailwind({
      tailwindCssPath: './src/theme/main.scss',
      tailwindConf: cfg,
    }),
  ],

changed to:

import tailwind, { tailwindHMR } from 'stencil-tailwind-plugin'; // <-- new import

// ... 
  plugins: [
    sass(),
    tailwind({
      tailwindCssPath: './src/theme/main.scss',
      tailwindConf: cfg,
    }),
    tailwindHMR()  // <-- this line added
  ],

source

Hopefully you're on a later version of the compiler.

Could you please give that a try?

If still no joy, then I'll clone and have a look.

Thanks 👍

[dtaalbers]

Thank you for the reply!

Regarding the index.html. I understand. I'll try a few things and if thats will not work I will user your page component suggestion. 👍

Regarding the plugin, I will try what you suggested tomorrow. Cooking a mean hamburger at the moment. 😎 . I'll let you know if it worked ASAP! Thank you!

[Poimen]

I'd rather be you! 😄

I'm trying to unit test multipart file uploader api in Spring boot, wishing I could just do this in dotnet 🤦‍♂️

[dtaalbers]

Well, adding tailwindHMR() did the trick. Awesome, thank you!

PS: FYI, the hamburger was great!

[dtaalbers]

Just a small question. Changing some css in this file which is configured here do not trigger a rebuild of the Tailwind CSS styling either (only when I re-run the dev server). Is this also because it is not passed through the builder? Should that be fixable with this? 🤔

[Poimen]

For the global css/scss, you would need the tailwindGlobal plugin.

I'm not sure if the HMR triggers with that file. I didn't check that when I made that plugin (quite a recent addition). If you could add that plugin, and if it still doesn't trigger the HMR, we can log a separate bug to track that functionality?

[dtaalbers]

I just added it and it didn't trigger the HMR sadly. Not a huge show stopper but it would improve development with Tailwind CSS and Stencil JS a bit 😀.

[Poimen]

Should be simple fix for the dependency array in the HMR plugin...I'll try have a look this evening 👍

[dtaalbers]

Awesome, thanks!

[Poimen]

So it turned out a bit of a silly bug. I've updated to 1.5.1 with the bug fix.

I've cloned your example repo, and tried 1.5.1 - it seems to work as expected now 😃

[dtaalbers]

I tested it in my example repo and it works indeed! Can't seem to get it to work though in my UX project 🙄 . But thats a problem for myself since it does work in the example repo.

Thanks again for fixing it! 👍