App.css loading before plugin stylesheets

radicle
1

WooCommerce and other plugins seem to beloading before app.css.I tried changing the priorityin AssetsServicesProviders but cant seem to figure out how to load app.css last

2

Hey @ben99! app.css already loads last by default:

<link rel="stylesheet" href="http://radicle.test/content/plugins/woocommerce/packages/woocommerce-blocks/build/wc-blocks-vendors-style.css?ver=1696864033">
<link rel="stylesheet" href="http://radicle.test/content/plugins/woocommerce/packages/woocommerce-blocks/build/wc-all-blocks-style.css?ver=1696864033">
<link rel="stylesheet" href="http://radicle.test/content/plugins/woocommerce/assets/css/woocommerce-layout.css?ver=8.1.1">
<link rel="stylesheet" href="http://radicle.test/content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css?ver=8.1.1" media="only screen and (max-width: 768px)">
<link rel="stylesheet" href="http://radicle.test/content/plugins/woocommerce/assets/css/woocommerce.css?ver=8.1.1">
<link rel="stylesheet" href="http://radicle.test/dist/css/app.cf7c2b.css">
3

What seems to be actually happening is, the WooCommerce styles take priority over my tailwind classes

4

Can you be more specific and also show your code?

FWIW, the first thing I do on a new WooCommerce project is disable all core WooCommerce styles and a lot of their scripts as well.

5

Im not sure what specific code you would want to see, if I add tailwind styles to a something like the Related posts - for example I want to make the image smaller by applying a tailwind class, the WooCommerce styles take precendence. However I am coming around to the idea of disabling the WooCommerce styles, this seems like it will be the best approach in the long run. Thanks!

6

I just wanted to see your actual implementation with code to see if anything sticks out and so I can troubleshoot what’s going on with the styles on my local dev. There could maybe even be some TW config changes you could make to make their styles more specific to take precedence over core Woo styles

But disabling WC styles is the way to go for a less painful experience with implementing Tailwind/styling WC in general :+1: You can sprinkle in Tailwind classes directly to the WooCommerce templates, and also utilize some filters they expose for some markup that doesn’t exist in their PHP templates

I’ll use occasionally use @apply in an actual stylesheet depending on the scenario

7

This sounds like the WC selectors have higher specificity. Tailwind doesn’t do anything special to counteract that, and in fact Tailwind styles tend to have low specificity. Ben’s (confusing designation in this thread, I admit) suggestion to just disable WC is probably the way to go.

8

Thanks all I went with disabling WooCommerce, its been a lot less painful I will use this route going forward. I didnt want to do this originally as I have a couple of templates that are staying "as is’ with the exception of soem colour changes but I have an idea for those