[bug] @import'ed tailwind CSS does not invalidate the cache after error with @layer about bud HOT 2 CLOSED

I can reproduce it.

Not sure what causes it or what we can do to address it. It has some qualities that make me wonder if it is an upstream issue.

One important thing to note is that the syntax error is actually reported in ./node_modules/tailwindcss/[layer name].css, not the module that contains the error.

╭ tailwindcss [cba9ce73a58c9a3e]                                        ./dist
│
│ │ Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
│ │ SyntaxError
│ │ (1:1)
│ │ ./node_modules/tailwindcss/base.css The
│ │  `foo` class does not exist. If `foo` is a custom class, make sure it is
│ │ defined within a `@layer` directive.
│ │ > 1 | @tailwind base;
│ │     | ^
│ │   2 |
│
╰ 1 error

When we remove the error postcss doesn't re-evaluate ./node_modules/tailwindcss/base.css, which makes sense as we obviously didn't change that module. Sure enough, if you open ./node_modules/tailwindcss/base.css manually and save it then normal behavior is restored.

Workaround

Save the entrypoint css module (even if there have been no changes), and this also gets things back on track again.

Maybe better workaround

Create a separate module for each layer you wish to modify, and import them in the entrypoint:

// entrypoint.css
@import 'base';

@tailwind components;
@tailwind utilities;

// base.css
@tailwind base;

@layer base {
  #root {
    @apply bg-gray-400;
    @apply h-screen;
    @apply w-screen;
    @apply relative;
  }
}

If you make a syntax error in base.css the error originates from ./src/base.css (rather than ./node_modules/tailwindcss/base.css), as should be expected. If you fix the syntax error everything works as expected.

I like this because it keeps the layers cleanly organized while avoiding this issue.

Next steps

I'm not sure what the next steps are for bud.js or what we should be doing differently, if anything. I'll have to explore this more.

from bud.

Thanks for looking into this so quickly.

I've had a snoop around the Tailwind docs and src, and three things are apparent:

1. The docs no longer mention my @import 'tailwindcss/base'; syntax.
2. Tailwind looks for @tailwind directives when invalidating the cache
3. I'm doing it all wrong

So, in summary, I'm not sure anything needs to change here. Your 2nd workaround is actually the correct way of doing things. I'll close this.

Looks like Sage suggests the @import syntax out of the box, so might raise a PR over there.

from bud.