element-plus: [Bug Report] tailwind css has conflict with el-button

Just import Tailwind css before Element Plus component:

import { createApp } from 'vue'
import './css/app.css' // <- This contains @import 'tailwindcss/base'; etc...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
...

I wrote it like this

// tailwind.config.js
   plugins: [
        function ({ addBase }) {
            addBase({
                ".el-button": {
                    "background-color": "var(--el-button-bg-color,var(--el-color-white))"
                }
            });
        }
    ]

最近有个同事出现了这个问题，我把我写的关于此问题的文章发给了他。顺便想看看搜索引擎收录情况。于是看到了几篇相关的文章，都是针对el-button处理。

互联网上最新的几篇文章：

• https://blog.csdn.net/weixin_45042868/article/details/123909412
• https://juejin.cn/post/7084614555598323719

如果仍然对样式冲突问题有疑惑，不妨试试我这个：

解决（solve）: https://github.com/whidy/elementplus-tailwindcss-best-practice

这个仓库在测试的时候用的还是beta，不过同事刚问我的时候我看了，在当前版本 2.1.9 中依然适用。

如果想了解细节，也欢迎阅读这个最佳实践的文章（标题有点大，本来想写一系列的，结果懒了~）

感谢你的分享😁，在这之前我的解决方案是： 1.禁用掉默认开启的preflight 2.新建preflight.css文件，把源文件中受影响的样式注释掉，然后重新引入到项目中。

看了你的文章之后，我认为解决问题的核心是把element-plus动态引入的css文件独立分离出来并放到最后载入以防止被覆盖， 那么在受影响的项目中，不需要禁用preflight，也不需要把main.js中import的css文件放到index.html中， 只需要一步

build: {
  rollupOptions: {
    output: {
      // eslint-disable-next-line consistent-return
      manualChunks(id) {
        if (id.includes('element-plus/theme-chalk/')) {
          return 'element-plus'
        }
      }
    }
  }
}

即可

But how to deal with On-demand Import, as use unplugin-vue-components and unplugin-auto-import to import components automatically, the style of the component is automatically imported when used, so the order of the CSS cannot be specified.

最近有个同事出现了这个问题，我把我写的关于此问题的文章发给了他。顺便想看看搜索引擎收录情况。于是看到了几篇相关的文章，都是针对el-button处理。

互联网上最新的几篇文章：

• https://blog.csdn.net/weixin_45042868/article/details/123909412
• https://juejin.cn/post/7084614555598323719

如果仍然对样式冲突问题有疑惑，不妨试试我这个：

解决（solve）: https://github.com/whidy/elementplus-tailwindcss-best-practice

这个仓库在测试的时候用的还是beta，不过同事刚问我的时候我看了，在当前版本 2.1.9 中依然适用。

如果想了解细节，也欢迎阅读这个最佳实践的文章（标题有点大，本来想写一系列的，结果懒了~）

感谢您的回复和整理！ 在看了您整理的链接和您的总结后，受益匪浅！ 感受到了开源社区的快乐。

But how to deal with On-demand Import, as use unplugin-vue-components and unplugin-auto-import to import components automatically, the style of the component is automatically imported when used, so the order of the CSS cannot be specified.

I haven’t tried but you can disable Tailwind’s Preflight and import its modified version:

Disable Preflight first:

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

then create a preflight.css from https://unpkg.com/browse/tailwindcss@3.0.23/src/css/preflight.css, remove line 188 (which causes the conflict) and import to your project.

Just import Tailwind css before Element Plus component:

import { createApp } from 'vue'
import './css/app.css' // <- This contains @import 'tailwindcss/base'; etc...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
...

Thank you very much This solution worked for me Make sure the element loading order is after import "./index.css"; to solve the problem

最近有个同事出现了这个问题，我把我写的关于此问题的文章发给了他。顺便想看看搜索引擎收录情况。于是看到了几篇相关的文章，都是针对el-button处理。

互联网上最新的几篇文章：

• https://blog.csdn.net/weixin_45042868/article/details/123909412
• https://juejin.cn/post/7084614555598323719

如果仍然对样式冲突问题有疑惑，不妨试试我这个：

解决（solve）: https://github.com/whidy/elementplus-tailwindcss-best-practice

这个仓库在测试的时候用的还是beta，不过同事刚问我的时候我看了，在当前版本 2.1.9 中依然适用。

如果想了解细节，也欢迎阅读这个最佳实践的文章（标题有点大，本来想写一系列的，结果懒了~）

Some people are trying to use addBase to add some base styles, but this method may not be suitable for this problem. addBase is usually used to add basic global styles, such as body or h1-h6 styles, you should use addComponents.

So I wrote it like this

// tailwind.config.js
plugins: [
    function({addComponents}) {
      const newStyles = {
        '.el-button, .el-message-box button, button': {
          backgroundColor: "var(--el-button-bg-color,val(--el-color-white))",
        }
      }

      addComponents(newStyles, {
        respectPrefix: false,
        respectImportant: false,
      })
    }
  ]

This also solves the problem with the button style inside the ElMessageBox component

You can also create an index.scss with

@import "tailwindcss/base"; // @tailwind base;
@import "tailwindcss/components"; // @tailwind components;
@import "./element-plus-theming"; // Your Element Plus overrides
@import "tailwindcss/utilities"; // @tailwind utilities;

I wrote it like this

// tailwind.config.js
   plugins: [
        function ({ addBase }) {
            addBase({
                ".el-button": {
                    "background-color": "var(--el-button-bg-color,var(--el-color-white))"
                }
            });
        }
    ]

It seems doesn‘t work