如何正确与tailwindcss集成

[seepine]

例如在card使用tailwindcss时header-class="p-2"，样式会被card的覆盖无法生效

按tailwindcss官方vite+vue文档引入

main.ts

import './assets/css/index.css'

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

[seepine]

尝试了官方说的几种方式，并没有什么变化
https://www.naiveui.com/zh-CN/os-theme/docs/style-conflict

[jahnli]

!important

[seepine]

p-2 是tailwindcss的类，不是自己写的，如何!important

[jahnli]

p-2 是tailwindcss的类，不是自己写的，如何!important

p-2!

[seepine]

p-2!

啊tailwindcss有这种用法吗？使用了并没有作用

<n-card content-class="p-2!" >

[seepine]

不过这倒是一个思路，官方文档是加在前面

也可以在 tailwind.config.ts中添加，让所有的都加上 !important
https://tailwindcss.com/docs/configuration#important

module.exports = {
  important: true,
}

[jahnli]

有，好像是前后都可以

[seepine]

难道新版本废弃了，我的版本如下，目前是只有!p-2生效，p-2!没有生效

"vue": "^3.4.29",
"vite": "^5.3.1",
"tailwindcss": "^3.4.10",
"postcss": "^8.4.42",
"autoprefixer": "^10.4.20",

[jahnli]

难道新版本废弃了，我的版本如下，目前是只有!p-2生效，p-2!没有生效

"vue": "^3.4.29",
"vite": "^5.3.1",
"tailwindcss": "^3.4.10",
"postcss": "^8.4.42",
"autoprefixer": "^10.4.20",

我最近在用 unocss 我不确定最新 tailwindcss 的改动，既然生效就前面，不过不建议所有的都加 !import

[seepine]

是目前就特殊地方添加!，全局怕其他地方有冲突，感谢