[CSS] class was overwritten by tailwindcss3 Preflight

[uruz-7]

TuSimple/naive-ui version (版本)

2.24.6

Vue version (Vue 版本)

3.2.29

Browser and its version (浏览器及其版本)

Chrome Version 97.0.4692.99 (Official Build) (x86_64)

System and its version (系统及其版本)

macOS 12.1 (21C52)

Node version (Node 版本)

v16

Reappearance link (重现链接)

https://github.com/uruz-7/tailwindcss3-naive-ui-reproduction

Reappearance steps (重现步骤)

pnpm install 
pnpm vite

Expected results (期望的结果)

background color is not overwritten

Actual results (实际的结果)

background color is overwritten

Remarks (补充说明)

This issue (#1808) still occurs with latest version "naive-ui": "2.24.6", "tailwindcss": "3.0.16".
这个issue(#1808)在最新版本里仍可重现。

Tailwind css preflight: https://tailwindcss.com/docs/preflight

[Sepush]

you can use the following solution.
可以尝试一下这个解决方案。
https://www.naiveui.com/en-US/os-theme/docs/style-conflict
https://www.naiveui.com/zh-CN/os-theme/docs/style-conflict

[uruz-7]

It worked. Thanks!

[weizhiwen]

you can use the following solution. 可以尝试一下这个解决方案。 https://www.naiveui.com/en-US/os-theme/docs/style-position https://www.naiveui.com/zh-CN/os-theme/docs/style-position

链接失效了

[Sepush]

you can use the following solution. 可以尝试一下这个解决方案。 https://www.naiveui.com/en-US/os-theme/docs/style-position https://www.naiveui.com/zh-CN/os-theme/docs/style-position

链接失效了

updated

[weizhiwen]

you can use the following solution. 可以尝试一下这个解决方案。 https://www.naiveui.com/en-US/os-theme/docs/style-position https://www.naiveui.com/zh-CN/os-theme/docs/style-position

链接失效了

updated

打开是官网首页

[07akioni]

https://www.naiveui.com/zh-CN/os-theme/docs/style-conflict

[AaronConlon]

还有一招，从tailwind入手，不引入@base的preflight.css，单独下载一份修改需要修改的地方。
https://unpkg.com/tailwindcss@3.2.4/src/css/preflight.css

[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

[al3xnag]

The problem can be solved by using css layers:

// An anonymous css layer is enough here to make Tailwind Preflight lower priority than NaiveUI styles.
@layer {
  @tailwind base;
}

@tailwind components;
@tailwind utilities;

Probably this solution can be added to the docs https://www.naiveui.com/en-US/os-theme/docs/style-conflict.