Need help for CSS inject order example

[maicss]

With a nuxt project has modules: nuxt/tailwind, nuxt/elementPlus, how to control css order? My project inject css order like: tailwind, my-project-style-sheet, element-plus.

Similar problem: https://stackoverflow.com/questions/76022416/nuxt-3-how-to-change-the-order-of-css-style-in-the-head https://github.com/nuxt/nuxt/issues/13874

tailwind inject order config: https://tailwindcss.nuxtjs.org/getting-started/options#injectposition but this not working

I cloned this project, add el-main tag to root if component Examlpes.vue, and add class p-0 to it:

expect to change el-main padding to 0, but I got:

Can you help me with it, thanks!

[YunYouJun]

• If you use unocss, you can use feature attributify. p-0 It has a higher priority than class.
• Or you can override it by class="p-0!".
• You can set --el-main-padding: 0 for inline style.

Of course, they may not seem like the most elegant solution.

Finally, I think you can use div directly for layout without having to stick to el-main. The internal implementation of el-main is very simple and is essentially just a div. If you have a custom situation, div is a better choice.

[maicss]

Attribute p-0 not working neither.

So sad. I will use div instead.

But I cannot override CSS vars, this is a massive problem.

[YunYouJun]

But I cannot override CSS vars, this is a massive problem.

It should be work for me to test. Can you tell me how to reproduce it?

[maicss]

https://codesandbox.io/p/github/maicss/element-plus-nuxt-starter/main?file=%2Fassets%2Fscss%2Findex.scss%3A18%2C8&workspaceId=5483f102-686e-45d2-9b36-a15a3415c4bc

[YunYouJun]

You need add your class .xxx instead of :root.

For performance reasons, we didn't let all variables are exposed globally.

[maicss]

OK, get it, thanks.