Babel plugin / require cache on css import? (stale tailwind config / css)

Hi,

Just a heads up for people using tailwind with babel plugin macros (as per Tailwindcss with babel-macro-plugin and CSS-in-JS - #38 by jeffceriello)

It seems config / css output is getting cached somewhere

I make changes to tailwind.config.js (adding some responsive utilities for my global styles) and build my tailwind.css to index.css

I then import the index.css into my theme as a Global style

Iā€™m also using twin.macro which I guess is also creating its own versions of my utility classes because I use eg
css={tw`lg:u-full-height`}

For some reason, any changes to the tailwind config / built css donā€™t update on the front end. Even after a complete rebuild. The index.css itself has the new values, but when I run my site itā€™s getting old values for the css in server.js

I tried deleting my build folder. I tried rebuilding my css. Deleted my app data in my browser. Ran in incognito. I restarted VS Code etc. I restarted Wamp

Eventually something updated it, but Iā€™m not sure what.

Again whatā€™s odd is the index.css is updated fine but itā€™s not getting updated into server.js correctly .
Iā€™m wondering If this is more an issue with Frontityā€™s style import rather than tailwind specifically

I guess I can try with a basic index.css etc file, skipping the tailwind part, and see if it still happens

Any advice appreciated

Thanks
J

I think it might be this

Appears to be a Babel caching issue

Not sure specific fix. Probably deleting .cache/babel-loader or .cache/@babel/register from node_modules

Will do some investigation

After building the CSS from tailwindcss, did you also rebuild Frontity itself? Otherwise the CSS-in-JS wonā€™t work.

In my project I run tailwind in the theme and load it ā€œnormallyā€ from HTML (link element in the ). This works way better with Frontity and tailwind because it canā€™t be split properly per component.

Yes rebuilt everything. Restarted VS Code. Re-ran npm run build:css and npm run dev

Almost entirely sure itā€™s the Babel cache as stated on that twin.macro GitHub

Aside from the cache issue, youā€™re saying just embed the index.css in my html and not import it into my js and then just use className=ā€œmy-classā€ ?

Iā€™m not actually sure what importing it actually does anyway.

Either way I also need to properly separate whatā€™s going in my index.css (mainly tailwind base and @screen stuff) and what Iā€™m using through tw since itā€™s probably duplicating at the moment

Thanks
J

Good morning,

I try to add TailwindCSS to my frontity project, but I struggle as i get some error saying that twin.macro causes problems. It says that twin.macro has for properties undefined .

Could you explain me how to add tailwindCSS to my frontity configuration ?