Tailwind page losing styles

I was working on some pages yesterday, they were all looking fine. Today, when I wanted to edit the page, I noticed that it lost most styles. All other pages lost the styles too.

Clicking on my saved design in the Design panel fixed it immediately.

Video: https://www.berrycast.com/conversations/bb26cbb4-0707-5915-823d-ff67634ed20a

It’s happening pretty often. At least once a day, at the very first launch of Pinegrow WP editor. I have to click on my style in the Design panel on every page to fix it.

@Adryan it almost looks like your style sheet isn’t loading for some reason. Can you use the code editor in Pinegrow to check the header and see if it’s loaded? Is there anything unusual about this one page, or is it happening to all of them?

1 Like

I think I found the culprit - it was a 3rd party Tailwind components library (its .css file). Nothing wrong with Tailwind in Pinegrow. Or at least didn’t encounter this issue lately.

@Adryan Was it Winden? If so, I’d love to hear more. They are trying hard to support Pinegrow and have been very responsive whenever I’ve reached out to them.

No, it was Flowbite. But nothing wrong with it, too. Had to simply change their css file order. Heard good things about Winden. Thinking about buying it, but waiting for their native integration with Pinegrow and your tutorial video :slight_smile:

2 Likes

I’ll have to double-check, but I think Winden now has native Pinegrow support. It’s just a checkbox inside their settings panel.

A video might take a few weeks since I’m struggling with some tight project deadlines, then need to create an hour-long presentation for the upcoming Page Builder Summit.

3 Likes

Ok, the problem still occurs. No idea what causes it. I have to apply the design (even though there is only one) from the Design panel to every page to fix the css styling issue :frowning:

I can share website’s login details if someone from the support team is willing to check it out.

There’s an error in the console that I think connects to this problem @matjaz
obraz

Thanks @Adryan! The last error is just cosmetic, I’ll remove the message. It should not affect how the plugin functions.

Damn, thought it was maybe connected somehow… Do you have any idea about what could cause the issue?

Are you able to share your page’s head tag?

@Adryan please download the source project ZIP and send it to support@pinegrow.com.

Any news on this? Did you have time to check out the project I sent you?

@Adryan replying here as well as it might be useful for others.

I think I found and fixed the issue. The list of used classes was only sent when the project was closed by going to the dashboard. Now it gets saved whenever the project is saved (if it has changes). You will have to open every page and activate the design if needed, after that it should work ok.

The update will be out soon.

4 Likes

Hi @matjaz

The issue doesn’t seem to be fixed as far as I can see. Tailwind styles are half-broken for me unless Pinegrow’s Tailwind stylesheet is loaded dead last in the head. Flowbite exacerbates the issue, but yesterday I had the exact same issue with a theme export and that project doesn’t involve Flowbite. Currently I’m working on a plugin.

Is it possible to ensure that the Tailwind stylesheet has the highest possible order number when enqueued? It was very easy to fix in the theme yesterday, but not so much with the plugin… Basically I’m loading the Tailwind styles twice, with the second instance being last in the order, which will suffice for client meetings for the time being.

@Bryn in ideal world plugins should not load Tailwind stylesheets - a theme should load site-wide styles.

With Tailwind, the situation is more complex because Tailwind classes that are used by plugin blocks might not be included in the theme version of the Tailwind build. That’s beyond Pinegrow to solve though :slight_smile:

wp_enqueue_style function does not have a priority parameter. The only way would be to use Do not enqueue action and then add custom code into inc/custom.php or in plugin file that hooks into the wp_enqueue_styles with an appropriate hook priority.

Thanks for the reply @matjaz!

How can I not enqueue Tailwind with Pinegrow, so that I can only manually enqueue the stylesheet?

@Bryn add Do not enqueue action to the link element that includes the stylesheet. This should be done on the master page.

1 Like

So obvious in hindsight. Thanks @matjaz!