Need help for CSS inject order example
maicss opened this issue · 6 comments
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
nuxt/nuxt#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!
- If you use unocss, you can use feature
attributify.p-0It has a higher priority thanclass. - Or you can override it by
class="p-0!". - You can set
--el-main-padding: 0for 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.
Attribute p-0 not working neither.
So sad. I will use div instead.
But I cannot override CSS vars, this is a massive problem.
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?
You need add your class .xxx instead of :root.
For performance reasons, we didn't let all variables are exposed globally.
OK, get it, thanks.