Blocks Not Rendering Properly with Tailwind JIT and Big Pipe Enabled for Authenticated Users

Thanks for your report, I'll take a look at it.

On a side note, by architecture using BipPipe with Tailwind JIT has some limitations:

If you've got a page like

<div class="outer_container">
  <span class="bigpiple_placeholder"> <!-- block will be injected here --> </span>
</div>

and CSS with child styles like

.outer_container .inner_style_from_a_bigpipe_replaced_block { ... }

then Tailwind JIT can not detect this inner style style due the structure of the source code. (Nevertheless the blocks need to be replaced properly, I'll check this.)

@cyrusliew

Could you please test if the MR / patch fixes your problems?

https://git.drupalcode.org/project/tailwind_jit/-/merge_requests/8.patch

@hudri Thank you for the patch. After applying it, the blocks are rendering fine, but there is another issue that has surfaced. The styles targeting CSS classes within these affected blocks are not being applied correctly. It seems that while the blocks are rendered, the Tailwind CSS classes aren't functioning as expected in these particular instances. This issue persists only on blocks impacted by the Big Pipe module.

Here are a couple of scenarios to illustrate the problem:

1. Styling the affected block with its class in the CSS file does not work:
- Targeting the block using its ID (e.g., #block-trydrupal-primary-local-tasks) works.
- However, targeting the block by its class (e.g., .block-local-tasks-block) does not work.

2. Styling the children inside the affected block by adding utility classes directly to its template does not work:
- Example: <a href="/node/2/edit" class="button inline-block w-[300px] text-white" data-drupal-link-system-path="node/2/edit">Edit</a>
- In this case, only the button class works, while other utility classes (like inline-block, w-[300px], and text-white) are not applied.

This is a known issue, and it is not possible to fix this in a meaningful way. Basically the architecture and philosophy of Tailwind and BigPipe are almost exact opposites:

• Tailwind JIT tries to generate a purged, minimized inline CSS on the server as early as possible for a perfectly optimized CSS with an ideal critical CSS rendering path.
• BigPipe renders blocks very late at page end with chunked streaming and injects them with client side JavaScript for a better perceived loading performance

I recommend to disable BigPipe completely. In my experience, the real word performance gain of BigPipe is neglectable. If you have blocks that are very slow, you could load them with "real" async Ajax requests, which a) work with Tailwind JIT and b) actually do deliver a real world performance gain.

@hudri Thank you for the clarification. I understand the conflict between Tailwind JIT and Big Pipe. I’ll explore disabling Big Pipe as suggested, as well as using async Ajax requests for slower blocks.

Appreciate your advice and quick response!

Fixed in version 1.1.2

Automatically closed - issue fixed for 2 weeks with no activity.