search

07akioni / naive-ui-nuxt-demo

53 stars 23 forks source link

How to handle Tailwind's Preflight Style Override #3

Closed OrbisK closed 2 years ago

OrbisK commented 2 years ago

I am Not sure how to handle the Tailwind's Preflight Style Override.

I've tried:

// plgins/some-plugin.ts
import { defineNuxtPlugin } from '#app';

export default defineNuxtPlugin((nuxtApp) => {
    if (process.client) {
        const meta = document.createElement('meta')
        meta.name = 'naive-ui-style'
        document.head.appendChild(meta)
    }
});

Reproduction: https://github.com/random-rip/primebot-frontend

07akioni commented 2 years ago

Is this a CSR only app?

If it's an SSR app. Naive's style is inserted in HTML. So it's client side's responsibility to insert style in correct position.

07akioni commented 2 years ago
image

As you can see, naive's style is generated in server side so runtime inserted meta won't have effect. Also, tailwind preflight style is inserted in client side.

So the only way to solve your problem it to replace server generated style tag correctly in client side. I think you may write some code to replace them.