@import tailwind syntax is not supported and can cause issues with bud cache

[talss89]

Version

10.6.0

What did you expect to happen?

When using a @layer base {} statement inside a child CSS file (ie. >1 module deep from entrypoint), if a syntax error is thrown by Tailwind, Bud will fail to rebuild until restarted, or the entrypoint is updated.

I raised this at roots/bud#2455. After investigation (see thread), I discovered:

1. Tailwind docs recommend @tailwind syntax over @import 'tailwindcss/...';
2. Tailwind specifically handles @tailwind directives when invalidating the cache, and will not handle special @imports.

Sage, out of the box, hints at using the @import 'tailwindcss/...'; syntax.

Propose we change Sage's app.css to fall in line with @tailwind syntax, hopefully avoiding others being caught by this issue.

I'll raise a PR now, feel free to reject if this is a bad idea.

What actually happens?

Bud stays locked in error state when using syntax suggested by Sage.

Steps to reproduce

There is a minimal example available at https://github.com/talss89/tailwindcss-layer-cache-invalidation-bug

It's not a Sage project, just a Bud app, but demonstrates the issue.

• Run bud dev
• Uncomment the garbage in ./src/child.css
• Save
• Bud throws error (correct)
• Comment garbage out
• Save
• Bud remains in error state

System info

N/A

Log output

N/A

Please confirm this isn't a support request.

Yes