-
Notifications
You must be signed in to change notification settings - Fork 3
Gridsome: dynamic class bindings not working [Purging issue] #14
Comments
Diving deeper, I'm pretty sure this is a class purging problem. If you have I encountered a similar issue when configuring Tailwind for Sapper a while back and adding this // considers dynamic class bindings when purging unused classes
// credit: https://github.com/matebek https://dev.to/matebek
defaultExtractor: (content) => [
...(content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []),
...(content.match(/(?<=class:)[^=>\/\s]*/g) || []),
], @voorjaar I'd be happy to help in any way I can. Could you point me in the direction of where I should look at applying something similar to that defaultExtractor under the hood? |
I think this method is not what I want. We have an htmlparser for parsing vue's grammar, and currently the directive is not supported. Add some directive support, it should be fine. |
Describe the problem
In Gridsome, the following code is not working as expected (where isFalse equals
false
):You'd expect
text-gray-700
to be applied in this case, however, the element just inherits the parent text color without applying the class. I tried in both compiled and interpreted modes with rebuilding the app and clearing browser cache but was met with unstable behavior where about 1 in 10 times the dynamic class would be applied.How I've installed WindiCSS
Browser: Brave - Version 1.20.103 Chromium: 88.0.4324.152 (Official Build) (64-bit)
Semi-workaround
Usingvue-windicss-preprocess
in combination withgridsome-plugin-tailwindcss
makes dynamic class bindings work just fine. I haven't found any issues with that setup besides when trying to use thewindi/plugins
, which spits out a bunch of errors where it's searching for functions in tailwind and PostCSS instead of Windi CSS, leading to the app not building.UPDATE: trying to reproduce this from scratch, the
gridsome-plugin-tailwindcss
now isn't working alongside Windi as a workaroundThe text was updated successfully, but these errors were encountered: