Lost in transition

[Vince-ALIEN]

Hello Greg,
I used to import my Gutenberg blocks as @source "../../../plugins/ufo-blocks/src/**/*.js" into tailwind-theme.css, and now, unless I'm mistaken, the backend no longer benefits from CSS compilation. My blocks are no longer compiled in the backend. You've made changes in the last 3 months, am I wrong? How to fix this ?

[gregsullivan]

Hi Vincent—Thanks for posting this!

When you say your blocks are no longer compiled in the backend, do you mean the JavaScript isn't compiled?

My expectation from this:

@source "../../../plugins/ufo-blocks/src/**/*.js"

...would be that the classes from any JavaScript files below plugins/ufo-blocks/src should be included in your style.css file after Tailwind runs.

Is that what's not happening, or is it the full JavaScript compilation that isn't working?

[Vince-ALIEN]

Sorry, Greg, that's a very poor explanation.

The Tailwind CSS classes of my Gutenberg blocks are no longer compiled into the theme's back-end CSS file.

I had @source "../../../plugins/ufo-blocks/src/**/*.js" in tailwind-theme.css

[Vince-ALIEN]

I use the _TW compilation system (your great theme) to compile Tailwind css class of my Gutemberg blocks. so I have 1 css file in front and 1 in back.

I'm lost in translation too ^^

[gregsullivan]

Thank you for these updated details!

Things have definitely changed a little bit. I haven't tried in Tailwind 4 to access files outside of the main repository, but I know both that other people have, and the some people have encountered issues with that approach. Things that could be happening:

• Changes in _tw mean you need to adjust your paths (E.g., is ../../../ too many directories? Could it be ../../? Something like that)
• You haven't done this since _tw switched back to PostCSS, which could potentially have an effect (but it would be news to me)
• There's a .gitignore in the block plugin that is blocking Tailwind 4's @source (as I've seen this come up a lot in issues on Tailwind's repository)

Those would be my guesses off the top of my head!

I think you should be able to run DEBUG=* npm run dev, and that should log things to files where you might be able to trace what's happening. E.g., folder not found, no access, etc.

[Vince-ALIEN]

Thanks for the explanation and the research leads.

With 4 version of Tailwind / _TW, It worked when the partial folder was still there and tailwind.css in the root wasn't quite the "main" file. At this moment : #186

[gregsullivan]

Do you get a log file when you run DEBUG=* npm run dev?

[Vince-ALIEN]

Sorry, it's entirely my fault. I don't know where yet, but it is my fault. I'm currently migrating a site from Tailwind V3 to V4.

I can confirm that the "@source "../../plugins/ufo-blocks/src/**/*.js";" directive at the top of tailwind.css works.

Thank you again.

[gregsullivan]

No problem at all—happy to hear it's now working!