[SOLVED] How do I change where in the <head> Laravel injects CSS

How do I change where in the <head> Laravel injects CSS

I am using Laravel 10 with VueJS and InertiaJS. I am also using TailWind and Naive UI for styling and components.

My problem is that TailWind Base is overriding some of the Naive UI classes. The solution when using Vue and Naive UI on there own is to add the following meta tag to the end of the head section.

<head>
...
<meta name="naive-ui-style">
</head>

The issue with Laravel is that it is injecting the CSS at the end of the of the <head>, after my custom meta tag.

I have tried using the Inertia <Head> option in my Layout vue component, but that also adds an inertia="" property to the meta tag, which seems to break Naive UI's ability to see the tag.

<meta name="naive-ui-style" inertia="">

Is it possible to change where in the head Laravel injects CSS or anyway to remove the inertia="" property from the meta tags generated by Inertia?

UPDATE One way around the problem is to remove @tailwind base; from my CSS. is there a way for me to load this separately higher up in the <head> section?

Solution

According to NaiveUI

You may find adding a meta tag to your static html files doesn't work (naive's style would still be overriden), since your toolchain may always insert tailwind's style at the end of the head tag. In this situation, you need to insert the meta tag dynamically right before the app is mounted.

Add these lines into your entrypoint (app.js) - this should fix it

const meta = document.createElement('meta')
meta.name = 'naive-ui-style'
document.head.appendChild(meta)