Comments (2)
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:
- The docs no longer mention my
@import 'tailwindcss/base';
syntax. - Tailwind looks for
@tailwind
directives when invalidating the cache - 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.
Related Issues (20)
- [bug] Sass with Tailwind config gives an error HOT 2
- [bug] trellis alias causing bud build to log warning HOT 10
- [bug] [email protected] incompatible with [email protected] HOT 3
- [bug] Install hangs on postinstall @roots/browserslist-config (bud 6.14.*) HOT 12
- [bug] `bud-cache` skips assets emitted by plugins HOT 6
- [bug] Bud dev slows down and public keeps growing with hot-update files HOT 4
- [repo] can't upgrade to @yarnpkg/builder@^4.0.0 HOT 3
- [question] Building a bud extension - how to register / expose HOT 1
- [question] best practices for versioning extensions HOT 6
- [bug] When using external IP from another device, styles are unaccessable HOT 3
- [bug] using @apply and #{!important} in sage with bud HOT 1
- [bug] `roots` is not defined when using eslint-config HOT 1
- [bug] importing a plugin makes @roots/bud-tailwindcss fail HOT 5
- [bug] @roots/bud-support 6.18.0 now makes Bud require Node 18+ HOT 2
- [bug] @roots/bud-vue: `?inline` query parameter breaks build
- [bug] v6.19.0: `Could not import @roots/bud-framework/env` HOT 1
- [bug] assets not compiling + hmr not working in dev after 6.18.0 HOT 9
- [bug] globby@14 requires node 18
- feat(tailwindcss): ❤️ ⬆️ bump tailwindcss to 3.4 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bud.