How to do a proper CSS override for a page

[thdoan]

I'm trying to add a CSS override for the Options page (1), but I cannot do it without relying on !important since the injected CSS is below it (2):

Is there a way to inject the CSS above the <style> tag? Or how would you implement a CSS override for a page?

I'm using Svelte + Vite.

[abhishekZom]

You can dynamically inject a link tag before the style tag.

What CSS are you trying to override btw ?

Your question is not very clear.

Can you elaborate a little more ?

[thdoan]

@abhishekZom I'm trying to override body margin set by Tailwind CSS, which has this inside Options-bedbe114.css:

body {
  margin: 0;
}

I want to override only on the Options page by adding this to options.html:

<style>
body {
  margin: 1rem;
}
</style>

However, since Options-bedbe114.css is injected below <style> the override doesn't work. How do I configure it so that Options-bedbe114.css is injected above <style> in options.html?

[abhishekZom]

In that case you won't be able to. Using !important is fine here.

[thdoan]

@abhishekZom thank you for your help. I'll accept this as the answer...

@thdoan In that case you won't be able to. Using !important is fine here.