3.x newly increased button, [type='button'], [type='reset'], [type='submit'] style influence

[jekip]

How to remove this default style Now it's affecting This kind of writing background-color: var(--color) tailwindcss The weights are higher than him

[jekip]

Settings corePlugins: { preflight: false, } It can be fixed But I also need other default styles

[adamwathan]

Can you explain the problem more clearly and show the old behavior compared to the new behavior so we can understand what has actually changed for you?

[jekip]

When I upgrade 3.0.0-alpha.1 Default base button style like button, [type='button'], [type='reset'], [type='submit'] It has a great impact on existing projects

if Settings corePlugins: { preflight: false } It can be fixed But I also need other default styles

[devinjameson]

Same issues for me with MUI. We want to transition to using Tailwind completely but during the transition we are using both MUI and Tailwind. This breaks our MUI buttons.

[ycjcl868]

same issue

[irodriguezjoonik]

Same issue with MUI? any idea?

[adamwathan]

Looks like you have your CSS in a bad order — you should make sure your .n-button class is defined after your base styles.

The order needs to be like this:

@tailwind base;
@tailwind components;

.n-button { /* ... */ }

@tailwind utilities;

Giving you control over this order is the reason Tailwind provides three layers for the styles.

Those styles are there in v2 as well, just organized very slightly differently but not in a way that should impact this:

https://unpkg.com/tailwindcss@2.2.19/dist/base.css

Going to convert this to a help discussion, but if there is a real issue here that I'm missing (there totally could be, sorry if so!) please open a new issue and follow the issue template, including providing a proper reproduction repository.

[jonasnilsberg]

background-color: transparent; is only added to button in the v2 version. In v3 it's also added to the [type='button'], [type='submit'], [type='reset'] attributes as well. This is what affects my code. Is it possible to remove the attribute styles in some way or form? @adamwathan

[johnkmzhou]

This doesn't work if you're using @import and postcss-import.

[johnkmzhou]

That being said, I just moved some classes to the @layer to fix it.

[saurabhbhatia]

This is how my imports look like. This was working with tailwind 2.2. With the 3 upgrade I'm facing the same issue. I don't think your solution works in my context @adamwathan . What do you reckon the correct order is ? I'm using rails 7 with esbuild to bundle Tailwind.

@import "./fonts.css";
@import "./typography.css";
@import "./components.css";
@import "./layouts.css";
@import './actiontext.css';

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

[saurabhbhatia]

Changing the above to this made it work for now. This seems inline with what @adamwathan mentioned -

@import "tailwindcss/base";
@import "tailwindcss/components";
/*Custom imports must go here*/
@import "./fonts.css";
@import "./typography.css";
@import "./components.css";
@import "./layouts.css";
@import './actiontext.css';
/*Remaining tailwind utilities*/
@import "tailwindcss/utilities";

[shawn1130]

I upgraded to 3.0 and the background colors on my MUI Button component went transparent. I don't want to completely disable the preflight. How can I only disable the button > background-color: transparent?

[jekip]

The latest version of 3.x I wonder if this problem still exists That's the problem On

moreover tailwindcss and vite cooperate It's not perfect And finally chose windicss I look forward to solving these problems once and for all

I liked it better in the end tailwindcss

[jonasnilsberg]

I have the same problem, but only when building my react app. Everything works when using development build.

[lukewarlow]

I also noticed this change, it looks to just be an update to the reset in V3 that now sets the background color to be transparent.

My fix was to just switch the order of imports and make sure my (legacy) custom CSS was imported after Tailwind so that it won.

[chouchoui]

Same problem with element-plus.
Now I have to set corePlugins: { preflight: false, } and add tailwind 2.x base css import into entry file.

[ManiuLtd]

I also encountered this problem, I hope there will be a solution

[whidy]

I make several ways to solve problem. If you have installed ElementPlus 1.3.0-beta.x and tailwindcss 3.0.x with vite 2.6.5, it might helps you.

1. If you are fully import ElementPlus, that should notice main.ts(or js) file, the css file import order, element-plus should be imported after tailwindcss. For example:

   import "@/assets/styles/index.scss"; // here is your tailwindcss file.
   import ElementPlus from "element-plus";
   import "element-plus/dist/index.css";

   that would be fine.

2. If you need On-demand Import(auto import) ElementPlus components, as offical guide, you could also import full ElementPlus css file after tailwindcss file, but it produce unnecessary and reduplicate css. So 3.x newly increased button, [type='button'], [type='reset'], [type='submit'] style influence #5969 (comment) can help you, but I just remove tailwindcss @tailwind base; and add my modified base css file(just remove line: background-color: transparent; at button, [type='button'], [type='reset'], [type='submit'])

3. If vite can set package css file order, base on way 2, it might solve too, but it seem no config for vite, and never will.

4. Import!!! Maybe best solution, base on 2. On-demand Import(auto import), at last, just put tailwindcss file in index.html, it works too.

   <!-- your index.html --->
   <!DOCTYPE html>
   <html lang="zh">
     <head>
       <meta charset="UTF-8" />
       <link rel="icon" href="/favicon.ico" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Your site title</title>
     </head>
     <body>
       <div id="app"></div>
       <script type="module" src="/src/assets/styles/{your tailwindcss file}.scss"></script>
       <script type="module" src="/src/main.ts"></script>
     </body>
   </html>

   remember to remove your tailwindcss file in main.ts. And here part of vite.config.ts code:

   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   import AutoImport from "unplugin-auto-import/vite";
   import Components from "unplugin-vue-components/vite";
   import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
   export default defineConfig({
     plugins: [
       vue(),
       AutoImport({
         resolvers: [ElementPlusResolver()],
       }),
       Components({
         resolvers: [ElementPlusResolver()],
       }),
     ],
   // your other codes...

   You will see under dev mode, it works, wonderful step!!!

   Don't happy too early, production mode doesn't work! wtf : (

   Take it easy, after hours hardwork, a really one solution dansheng le (come out : ). Maybe not good, but it really succeed! the solution would not under list, need another headline.

Temporary Solution

Now, you need get ready with these files:

• index.html
• src/main.ts
• src/assets/styles/index.scss (my tailwindcss file)
• vite.config.ts
• src/tailwindcss.ts (optional, I will explain later)

Edit your html as below, /src/assets/styles/index.scss or /src/tailwindcss.ts, just keep one, I don't recommend create another ts file with scss import, of course as your need.

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your site title</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- <script type="module" src="/src/tailwindcss.ts"></script> -->
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Remeber a bit modify with main.ts

import "@/assets/styles/index.scss";

Here is my src/assets/styles/index.scss:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

// other basic style your project needs
@import './transition.scss';

/**
* element plus style reset
*/
.el-popper {
  max-width: 480px;
}

Most important one with vite.config.ts, here is mine:

import { resolve } from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import analyze from "rollup-plugin-visualizer";
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
  build: {
    rollupOptions: {
      plugins: [analyze()],
      output: {
        manualChunks(id) {
          // 更新日期：2022年06月09日
          // 下面这三行css代码打包的配置可以随你移除或者保留~移除后会自动生成一个css，和下面的示例图会有区别。
          if (id.includes("assets/styles/index.scss")) {
            return "tailwindcss";
          }
          if (id.includes("element-plus/theme-chalk/")) { // 当然也可以优化下这个判断，不过目前这样写足矣了。
            return "element-plus";
          }
        },
      },
    },
  },
  server: {
    proxy: {
      "/api": {
        target: "http://x.x.x.x:xx",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, "/api"),
      },
    },
  },
});

Please keep eyes on manualChunks part, two customize config, but what order here not effects the build result.

You ask me why this work, I'm not sure, but it really works. Maybe you could try and tell me it would or not work.

At last, I need to show what I have researched for this problem, vite has lots of issues about this similar questions, such as:

• Vite injects css assets in wrong order with dynamic import and css modules. vitejs/vite#3924
• fix(css): module css deep first insert vitejs/vite#6301
• test: Add failing tests for async css modules vitejs/vite#6044

It seems that will be fixed sooner or later.

And my solution mostly inspired by vitejs/vite#6375

relative issues: #6602

---

我目前有几个办法来解决。当前我使用的是ElementPlus 1.3.0-beta.x、tailwindcss 3.0.x、vite 2.6.5，如果你也差不多，可以参考下。

1. 需要全局使用ElementPlus，只需要在入口文件main.ts(js)中，保证css的导入顺序，ElementPlus在后面就可以覆盖了。
2. 如果是需要按需导入，那就麻烦了，按照ElementPlus官方的方法，实际上组件被优先打包，所以tailwindcss的样式随后，就覆盖了button的样式，那就可能需要重复再导入一次ElementPlus的css文件，这个非常不好，只能算曲线救国的方法，因此可以如3.x newly increased button, [type='button'], [type='reset'], [type='submit'] style influence #5969 的兄弟的方法，灵活处理。
3. 如果vite能控制css打包顺序那就是最好的，不过我找了关于rollup的相关option，包括同步异步打包之类的，并没有什么收获，因为上面的英文版已经详细介绍了可能有用的解决方案，虽然英文很蹩脚，解决方案很奇葩，但是有效，并且无副作用，我觉得还是可以参考一下的。这里就不在复述这个奇技淫巧了。

---

Update: June 9th

Even though solve the button style, but conflict still there, so I think we should make sure keep tailwindcss style first, and do not modify it, espacially disable preflight. Try to let other style(maybe UI framework) override it.

[whidy]

写了一篇文章，总结了一下，需要中文版的可以看看《Vite中ElementPlus和TailwindCSS最佳实践（一）》

[bstivenprz]

I solved this creating custom classes with @apply and using !important in the end. This overwrite default styles just like !important in CSS.

For someone like me that haved this problem ;)

[assoft]

Excluding classes may be the solution. (May not be applicable for different scenarios)

Example:

button:not(.x-class, .y-class, .z-class),
[type='button']:not(.x-class, .y-class, .z-class),
[type='reset']:not(.x-class, .y-class, .z-class),
[type='submit']:not(.x-class, .y-class, .z-class) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

I have no solution for this situation other than manually editing the generated css!

I'm sure a lot of people will be pleased if a solution can be found to this.

[assoft]

My solution on Laravel-mix (laravel, vue, naive-ui, tailwindcss)

Requirements:

• replace-in-file: https://www.npmjs.com/package/replace-in-file

webpack-mix.js

const mix = require('laravel-mix');
const replaceFile = require('replace-in-file');

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .alias({
        '@': 'resources/js',
    })
// Change spesific style definitions after build
.after(() => {
        try {
            const result = replaceFile.sync({
                files: './public/css/app.css',
                from: [/button,/g, /\[type='button'\],/g, /\[type='reset'\],/g, /\[type='submit'\]/g, /:-moz-focusring/g],
                to: ['button:not(.n-button),', '[type="button"]:not(.n-button),', '[type="reset"]:not(.n-button),', '[type="submit"]:not(.n-button)', ':-moz-focusring:not(.n-button, .n-select, .n-input, .n-checkbox, .n-date-picker, .n-base-selection, .n-base-selection-tags, .n-base-selection-label, .n-base-selection-input-tag__input, .n-switch, .n-radio-input, .n-base-close)'],
            })
            console.log(result);
        } catch (error) {
            console.error(error);
        }
    });

[Gustavo-Cauzzi]

I can assure that the same issue still happens with MUI in the current version of tailwind (3.1.2). I don't want to disable the preflight interely because the missing of the default styles breaks most of the application. Does anyone discovered a way to safely disable/override the default button style?

[syed-haroon]

Even i faced the same issue but I am using Vue3 + element-ui-plus, after spending more than 6 hours my solution is to set :native-type='null':

<el-button type='primary' round @click='handleClick' :native-type='null'>Click Me</el-button>

but this is kinda "hack", this either need to be fixed by Tailwind or by element-ui team. Anyhow, for now enjoy ;)

[f-o-w-l]

This is also breaks the AntDesign component library. Sad that this has been an issue for so long without being addressed.

[f-o-w-l]

That would be great if it worked, but unfortunately it does not help the situation.

Given my App.global.css:

The following CSS is produced in both the dev and prod build, with the incorrect ordering shown.

I don't want to use another component or styling library, and I definitely don't want to litter my code with !importants, so for now I'm downgrading and staying at version 2.

[jamesbhatta]

Check this out #5934 (comment)

[adamwathan]

@f-o-w-l it does work and the mistake you are making is explained in detail in the documentation: https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

[f-o-w-l]

Thanks for your help! Unfortunately it's still not working for me. The same button is still showing the same styles after adding the postcss-import package and including it as the first plugin in my postcss.config.js. Adding require('postcss-import') before require('tailwindcss'), require('autoprefixer') in my webpack config's rule for postcss-loader options.postcssOptions.plugins also did not help.

I thought maybe the problem would be because I'm using an older version of electron+electron-builder etc based on electron-react-boilerplate@2.3.0. However, I started a new project based on the electron-react-boilerplate@4.6.0, and I was not able to successfully get tailwindcss v3 imported and working at all, i.e. no styles, after trying all possible combinations of using and not using require in my postcss.config.js and in webpack.config.renderer.dev.ts, and including or not including postcss-import, with or without require, in the postcss-loader rule in my webpack config.

Oh well! Still happy with v2 =)

[Kusou1]

This solution does not apply to every scenario. I use other component libraries, and if I need to use on-demand loading, I can't use such a simple control

[tlerbao]

I also have the same problem: Tailwindcss and vant ui, which is automatically introduced on demand using unplugin-vue-components, have found the button style conflict problem. I don't know if there is a solution now?

[yar2001]

Ant Design 5.0 use css-in-js to generate button style instead of Less. However, the new generated style has pseudo-class function :where(), which make the style specificity lower than tailwind preflight, even if the Ant Design style is defined after Tailwind.

Is there any way to solve this problem?