Possible bug with layers and JIT compiler

[robdekort]

Hi folks,

I'm doing the following:

1. Using JIT.
2. Setting layers to layers: ['components', 'utilities'].
3. Adding classes to the base layer.
4. They get purged/not included in the final CSS.

I can only prevent those classes from getting jitted/purged when I add them to my safelist. Or when I actually use them of course. I'm under the impression that any layer not included in step 2 should always make it to the final CSS.

Here's a tailwind.zip to demo this. Steps to reproduce:

1. npm i
2. npm run dev
3. The class should-not-get-purged is not available in the final site.css.
4. When you uncomment line 7 in tailwind.config.js and re-compile it is available.

I've got a feeling this is either a bug since according to the docs this is what the layers option should do (and does do when using Purge). Also it's all part of the same config we configure the JIT compiler in. I could also very well not understand how it's supposed to work :-).

Thanks and kind regards,

Rob

[adamwathan]

Hey Rob! Right now the JIT engine doesn't pay any attention to the layers option — anything in a reserved @layer (base, components, or utilities) is automatically turned into "on demand" styles so it's not inserted unless it's used.

One workaround is to just put the CSS in your CSS file in the right spot but outside of a layer:

@tailwind base;

.some-base-thing {
  /* ... */
}

@tailwind components;

@tailwind utilities;

We should make sure we throw a warning for using the layers option or something though. It's not quite as simple as just making it work unfortunately, because anything in a layer also automatically gets all variants enabled, so in the example above if you put some-base-thing into a layer then sm:hover:focus:before:some-base-thing would work but of course we can't pre-generate all of those variations.

I'm going to think on a better solution going forward, especially since CSS has added a real @layer at-rule and we should probably migrate away from it. Might deprecate it for v3 and replace with something more like:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* This would be generated on-demand */
@tailwind base {
  .some-base-thing {
    /* ... */
  }
}

/* This would be included no matter what but relocated to the base layer */
@tailwind base static {
  .some-other-base-thing {
    /* ... */
  }
}

What do you think about something like that? 🤔

[robdekort]

Hey Adam! Thanks for your reply. This 'issue' came back a few times over the last few months and I'm glad I took the time to write this down today. This information is super helpful.

That workaround is perfect for now. And so simple as well.

I remember going back and forth through the docs with this and it always resulted in me thinking that it should work this way. I guess the most confusing thing for me was that all this config is done under the same purge flag in the TW config. For me that - together with the docs on layers - implied that this should've been possible and was a bug.

I also understand why this is not as easy. Your proposed solution for a future version looks pretty solid to me.

Thank you!

[sebastiandedeyne]

I came across this issue because I was hoping layers would work with JIT. The proposed solution with static wouldn't work for us. We're looking for a solution to always generate components that are defined by addComponents from a plugin.