Button组件的样式会与tailwindcss的preflight冲突

[Xy2002]

• I'm sure this does not appear in the issue list of the repository

基本信息

• 依赖包名 及 版本: @arco-design/web-vue@2.17.0
• 系统版本: macOS
• 浏览器版本: chrome98.0.4758.109
• 复现地址: https://codepen.io/Marshall_W/pen/gOXQyQZ

预期结果

希望能解决与tailwindcss的样式冲突

复现步骤

当Button组件的type为primary且没有设置status时，tailwindcss的preflight会将组件type=primary预设的样式覆盖为background-color:transparent，但设置status时，显示正常

[xuxucode]

<a-form-item required> 有类似情况，* 号会显示在 label 上方:

[xuxucode]

tailwindcss preflight 基于 modern-normalize 添加了 button、svg 等样式，arco 基于 normalize.css，两者冲突和多余，禁用 preflight 后就好了:

// tailwind.config.js
module.exports = {
+  corePlugins: {
+    preflight: false,
+  },

然而 preflight 中的有些样式还是必要的，比如 border-style，需要手动添加，否则 class="border" 不起作用。

[IsLand-x]

可以这样改一下源码，提高权重。

[Xy2002]

tailwindcss preflight 基于 modern-normalize 添加了 button、svg 等样式，arco 基于 normalize.css，两者冲突和多余，禁用 preflight 后就好了:

// tailwind.config.js
module.exports = {
+  corePlugins: {
+    preflight: false,
+  },

然而 preflight 中的有些样式还是必要的，比如 border-style，需要手动添加。

后续发现调换import顺序就好了。如果直接禁用tailwindcss preflight会导致我的项目需要大量修改样式

// src/main.ts
import './index.css' //tailwindcss directives
import '@arco-design/web-vue/dist/arco.css'

[IsLand-x]

tailwindcss preflight 基于 modern-normalize 添加了 button、svg 等样式，arco 基于 normalize.css，两者冲突和多余，禁用 preflight 后就好了:

// tailwind.config.js
module.exports = {
+  corePlugins: {
+    preflight: false,
+  },

然而 preflight 中的有些样式还是必要的，比如 border-style，需要手动添加。

后续发现调换import顺序就好了。如果直接禁用tailwindcss preflight会导致我的项目需要大量修改样式

// src/main.ts
import './index.css' //tailwindcss directives
import '@arco-design/web-vue/dist/arco.css'

这样做是引入全量样式，项目体积会变大吧？

[Xy2002]

tailwindcss preflight 基于 modern-normalize 添加了 button、svg 等样式，arco 基于 normalize.css，两者冲突和多余，禁用 preflight 后就好了:

// tailwind.config.js
module.exports = {
+  corePlugins: {
+    preflight: false,
+  },

然而 preflight 中的有些样式还是必要的，比如 border-style，需要手动添加。

后续发现调换import顺序就好了。如果直接禁用tailwindcss preflight会导致我的项目需要大量修改样式

// src/main.ts
import './index.css' //tailwindcss directives
import '@arco-design/web-vue/dist/arco.css'

这样做是引入全量样式，项目体积会变大吧？

是的，但是因为是不那么重要的项目，所以怎么方便怎么来🤣，不是特别需要考虑项目体积

[hyp530]

请问，使用unplugin-vue-components按需引用arco，normlize.css污染了整体样式，怎么降低normlize.css的优先级呢？

[xuxucode]

@flsion 在 tailwindcss 越来越流行的情况下，建议 arco-design 替换掉 normlize.css 而使用 modern-normalize，两者保持更好的兼容性。

[flsion]

@flsion 在 tailwindcss 越来越流行的情况下，建议 arco-design 替换掉 normlize.css 而使用 modern-normalize，两者保持更好的兼容性。

好的，我来调研一下看看