TailwindCSS overwriting Naive UI styles

[sumitkolhe]

---

• Operating System: Darwin
• Node Version: v16.14.0
• Nuxt Version: 3.0.0-rc.11
• Nitro Version: 0.5.4
• Package Manager: yarn@1.22.18
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -
• "@huntersofbook/naive-ui-nuxt": "^0.3.2",

---

<template>


  <NConfigProvider>
    <NGlobalStyle />
    <main>
    hello world
    </main>
  </NConfigProvider>
</template>

Tailwind overwrites Naive-ui's styles even after following https://www.naiveui.com/en-US/os-theme/docs/style-conflict

[productdevbook]

https://stackblitz.com/edit/nuxt-starter-zb2imp?file=README.md

Can you redo everything and post it here and share me ?

Thank you

[sumitkolhe]

@productdevbook here's the reproduction -

https://stackblitz.com/edit/nuxt-starter-mah2ws?file=app.vue

[productdevbook]

0.3.10-beta.8 iam push beta version, please test (your plugins delete first)

[sumitkolhe]

@productdevbook it works with 0.3.10-beta.8. Naive-ui styles are applied properly, though now you cannot customize styles with tailwindcss. one way to make it work is to add !important to tailwind classes to override naive-ui styles.

// tailwind.config.js
module.exports = {
  important: true,
}

[productdevbook]

// tailwind.config.js

  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './app.vue',
    './assets/**/*.scss',
    './assets/**/*.css',
  ],

your added ?

[sumitkolhe]

I'm using @nuxtjs/tailwindcss module which adds this automatically - https://tailwindcss.nuxtjs.org/

[productdevbook]

https://stackblitz.com/edit/nuxt-starter-6ybojo?file=app.vue

it is working ? what not working

[sumitkolhe]

https://stackblitz.com/edit/nuxt-starter-svfhtp?file=app.vue adding new styles to naive-ui components doesn't work, but i think that's fine.

[MAXOUXAX]

Hey @productdevbook, I believe this is still not fixed :/
Please see my reproduction: https://stackblitz.com/edit/nuxt-starter-orf6gt?file=app.vue

[productdevbook]

@nuxtjs/tailwindcss package-lock.json dont see

[hi-reeve]

got the same issue, please reopen this @productdevbook
this happen on hmr does not have any problem when first opened, but then when we edit something, this happen

[hi-reeve]

overriding tailwindcss default button background solve this, but i dont think we should override every style that conflicting with tailwindcss

[renatosaz]

I manage to solve the same issue using vitesse with unocss simply removing the code below from reset/tailwind.css

button, [type='button'], [type='reset'], [type='submit'] {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}

This class is generated by tailwind engine and should be removed inside node_modules, now we have to find where tailwind css is located to be able to remove this and fix all the conflict at once.

[renatosaz]

To fix this issue:
remove '@nuxtjs/tailwindcss' from defineNuxtConfig in nuxt.config.ts
install @unocss/nuxt : pnpm add @unocss/nuxt
add '@unocss/nuxt' to defineNuxtConfig in nuxt.config.ts

This fixes the issue and also improve performance of tailwind by 20 times

[MAXOUXAX]

To fix this issue: remove '@nuxtjs/tailwindcss' from defineNuxtConfig in nuxt.config.ts install @unocss/nuxt : pnpm add @unocss/nuxt add '@unocss/nuxt' to defineNuxtConfig in nuxt.config.ts

This fixes the issue and also improve performance of tailwind by 20 times

I'm sorry but that's just not the way to fix this issue.
The problem is that NaiveUI stylesheet doesn't take priority over Tailwind's default stylesheet.

Tailwind classes should still work on NaiveUI components, but NaiveUI components stylesheet should take priority over the default Tailwind stylesheet, which as we've seen, sets the background-color of buttons to transparent.

[anton-liam]

related tusen-ai/naive-ui#3733

[Denoder]

2 options I have for this is:

1. Create a plugin and mount the style meta, this will give priority towards naive, but then tailwind will end up neeing to use! for all styles:

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hook('app:beforeMount', () => {
        if (process.server) return;

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

2. (which is what I use) have the user change the tailwindcss themselves to accommodate naive, this is an easier approach:

@tailwind base;

@layer base {
    button, [type='button'], [type='reset'], [type='submit'] {
        background-color: var(--n-color)
    }
}

@tailwind components;
@tailwind utilities;

[MAXOUXAX]

Sadly those 2 options are not solutions to the problem:

• First one as you stated will totally override Tailwind styles, which means styling everything using important selectors, which is a PITA :/
• Second one will also override regular buttons background-color, even if they're not related to Naive, and this should only be a hacky and temporary "solution"

[Denoder]

okay then another potential solution would be to implement huntersofbook/huntersofbook#1

but alternating from that create a style element with:

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hook('app:beforeMount', () => {
        if (process.server) return;

        const naive = document.createElement('style')
        naive.textContent = `
        button:is(.n-button), 
        [type='button']:is(.n-button), 
        [type='reset']:is(.n-button), 
        [type='submit']:is(.n-button) {
            background-color: var(--n-color)
        }`
        document.head.appendChild(naive)
    })
})

and if you wanna manage that with a plugin, use a runtime config property to set the cls prefix if you've got a naive config with a different cls prefix.

[qindongliang]

The real reason is that tailwind has a preset default style of Preflight, which is friendly to new projects, but when we integrate tailwindcss into existing projects, it will cause style conflicts, we only need to disable this tailwindcss Preflight The style settings in your tailwind.config.js or tailwind.config.cjs

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

Refer to tailwind css official website for explanation：
https://tailwindcss.com/docs/preflight#disabling-preflight

[productdevbook]

@qindongliang thank you yes, thats true fixed.

add readme

[productdevbook]

https://stackblitz.com/edit/nuxt-starter-pxdal5

check demo settings