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

[Caalb]

I noticed that you are having the same problem as mine, you are using the Naive UI framework, to fix this, in your main.js (where you initialize Vue) add this:

[peter-brennan]

I can confirm that this works for Naive UI Framework

const meta = document.createElement('meta');
meta.name = 'naive-ui-style';
document.head.appendChild(meta);

[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最佳实践（一）》

[chai-xulong]

多谢大佬指点迷津

[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?

[akhilgoel0007]

Hi Gustavo, The most effective way to override the preflight styling will be to provide custom styling using @mui/material/styles library.. For example

import { styled } from '@mui/material/styles'
import Button, { ButtonProps } from '@mui/material/Button'

const PrimaryButton = styled(Button)<ButtonProps>({
    backgroundColor: 'red !important',
    '&:hover': {
        backgroundColor: 'blue !important',
    },
});

<PrimaryButton variant='contained' onClick={() => console.log("Perform some action!")}>
    Show
</PrimaryButton>

The above code shows how to custom style a button, in this case I have provided custom styles with "!important" property to override the "background-color: transparent" property in the preflight module (for both normal and on hover case). Similarly, we can make more components with custom styles and keep them in a separate file (e.g, button.jsx) and import these custom styled components to use wherever needed in the project!

[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 ;)

UPDATE:
Don't use ":native-type='null'" unless you know what you are doing, the simple fix was to define .el-button { background-color: var(--el-button-bg-color); in a file and call the file after tailwind.css file is called.

// example:
import '@/assets/styles/tailwind.css';
import '@/assets/styles/main.scss'; // add in this file

[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.

[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

[sunriseateast]

I faced same problem of background-color:transparent while using Tailwind with vite .Without disabling corePlugins[]. We can simply set corePlugins: {
backgroundColor: true,
} into tailwind.config.js

[calpa]

It works! tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	theme: {
		extend: {},
	},
	plugins: [],
	corePlugins: {
		preflight: false,
	}
}

[deviprsd]

A solution without turning off preflight is desirable

[Caalb]

I noticed that you are having the same problem as mine, you are using the Naive UI framework, to fix this, in your main.js (where you initialize Vue) add this:

[vanekj]

I am using Nuxt 3 with Naive UI and I "fixed" this using vite-plugin-filter-replace package. My nuxt.config.ts file looks like this,

import replace from 'vite-plugin-filter-replace'

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    '@bg-dev/nuxt-naiveui',
  ],
  vite: {
    plugins: [
      replace([{
        // Fixes issue with Tailwind preflight where Naive UI buttons were transparent
        filter: ['node_modules/tailwindcss/tailwind.css'],
        replace: source => source.replace(/(background-color: transparent;)/, '/* $1 */'),
      }]),
    ],
  }
})

[raufabr]

Not an ideal solution but I've temporarily got it working with inline styles.

Hoping for a fix to be able to disable preflight buttons only as an option.

  const [bgColor, setBgColor] = useState('#145A3E');
<Button
        onMouseEnter={() => setBgColor('#1ab579')}
        onMouseLeave={() => setBgColor('#145A3E')}
        style={{backgroundColor: bgColor}}
        // type="submit"
        sx={{
          px: '2rem',
          borderRadius: '24px',
          color: 'white',
          transition: '0.3s all ease-in-out',
        }}
        disabled={disabled ?? fetcherIsNotIdle}
      >
        {children}
</Button>

[renny-ren]

I ended up adding a new button class

.button-primary {
  background-color: #1F883D;
}

and apply to my button:

<button className="button-primary"></button>

which overwrites the default transparent background color.

[promyth3us]

Spent 4 hours arguing with chatgpt about this and decided to ask google and found you guys talking about this, after deciding to do something not recommended, I just changed the color after inspecting it and recognizing the issue is this transparent class tailwind.css1

~/public/build/assets/app-375e9f6d.css

[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}

to

[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:#0d6efd;background-image:none;}

just changed the color, and it seems to work fine - I am just learning all this it's all new to me. Any feedback would be greatly appreciatted.

[HealYouDown]

I am a bit shocked that this issue is not yet resolved, as it screws with many frontend frameworks...

For anyone coming here in the future, I recommend the following, as it's the least amount of work to do:

1. Disable preflight in your tailwind config

/** @type {import('tailwindcss').Config} */
export default {
  content: ["..."],
  corePlugins: {
    preflight: false,
  },
  theme: {},
  plugins: [],
}

2. Add a preflight.css file to your styles folder and copy the content from https://unpkg.com/tailwindcss@latest/src/css/preflight.css in it

3. Remove the background-color and background-image properties

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */

  /* background-color: transparent;  2 */
  /* background-image: none;  2 */
}

4. Add the preflight.css file to the top of your global.css (or whatever you named it)

@import "preflight.css";

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

@import "other css files"

[rudolfolah]

Agreed, I've run into this issue when using Chakra UI and PrimeReact. Thank you for providing this preflight CSS!

[nanwy]

thanks, that was work

[dongnguyenvie]

thanks, it work for now

[LeulAria]

thanks, this is working took me 3hrs of debugging to land here.

[Fawwaz-2009]

For those wondering is causing this, it is most likely a a package that you installed has globals styles that override the tailwind global CSS. In my case it was the ProseMirror package

[wiidede]

I am using Vite. So i just use vite plugin's transform to remove the button bg code.
Note that I am using @unocss/reset(If use unocss, just import tailwind-compat.css). But maybe similar to tailwind
Just add a custom plugin into vite.config.ts like:

plugins: [
  {
    name: 'remove-button-bg-reset',
    transform(src, id) {
      if (id.includes('@unocss/reset/tailwind.css')) {
        return {
          code: src.replace(/(background-color:\s?transparent;)(.*\n?\s*)(background-image:\s?none;)/, '/* $1 */$2/* $3 */ '),
        }
      }
    },
  },
]

The effect you can see in vite-plugin-inspect:

[MeonisRP]

I can confirm the issue is still there and makes Antd and Tailwind incompatible! Any provided solution is basically a hack. Hope this gets fixed asap

[CEN-Smart]

The issue can be solved by setting coreplugin:{
preflight: false
}

In the tailwind config.js

[LeulAria]

no man this will remove all preflight

[Guan-Erjia]

you can use pnpm patch tailwindcss, then make change with prompt on the commend line, Then it will make a patch folder in the rootfolder in the project, It record the change you made, and effect when you run "pnpm install" command

[raphaelsoul]

#12735

a PR to fixing this was merged. But this fix is still not released. The latest version(3.4.1) for now does not contain this fix.

[raphaelsoul]

a workround for me with antd now

// antd ProForm component
submitter={{ submitButtonProps: { style: { background: 'var(--ant-color-primary)' } } }}

Don't forget enable cssVar feature

<ConfigProvider theme={{ cssVar: true }}></ConfigProvider>

[LeulAria]

God just landed here what's is the problem here i mean why is this not removable @tailwindcss please help damn

button, [type='button'], [type='reset'], [type='submit']

[adamwathan]

We've reduced the specificity of these selectors in Tailwind CSS v3.4.2:

#12735

Still stand by comments I've made in other discussions about how there will inevitably be conflicts you have to workaround when importing two CSS frameworks into the same project, but those changes should at least help a bit in this case.

[YoannBuzenet]

Hello,
I'm using only one css framework, tailwind, with nextjs. I still have this issue.

I followed the tailwind documentation about setting up a global.css file with :

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

What should I do to have my

.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

not being overriden by

button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

?

My component:

"use client";

import { FunctionComponent } from "react";
import { AriaButtonProps, useButton } from "react-aria";
import { useRef } from "react";

type ButtonProps = AriaButtonProps & {
  isFullWidth?: boolean;
  isReversedColor?: boolean;
  classNameButton?: string;
  isRed?: boolean;
  isGreen?: boolean;
};

const Button: FunctionComponent<ButtonProps> = (props) => {
  let ref = useRef();
  let { buttonProps } = useButton(props, ref);

  const { children, isFullWidth, isReversedColor, isDisabled, isRed, isGreen } =
    props;

  const isDisabledColors = `bg-slate-300`;
  const classnamesColorBasic = `text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900`;
  const classnamesColorReversed = `text-blue-800 bg-white hover:bg-blue-900 hover:text-white focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900`;
  const classnamesRedColorBasic = `text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:focus:ring-red-900`;
  const classnamesGreenColorBasic = `text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:focus:ring-green-900`;

  let colorButton;
  if (isDisabled) {
    colorButton = isDisabledColors;
  } else if (isReversedColor) {
    colorButton = classnamesColorReversed;
  } else if (isRed) {
    colorButton = classnamesRedColorBasic;
  } else if (isGreen) {
    colorButton = classnamesGreenColorBasic;
  } else {
    colorButton = classnamesColorBasic;
  }

  const pointer = isDisabled ? "cursor-not-allowed" : "cursor-pointer";

  return (
    <button
      {...buttonProps}
      className={`inline-flex items-center justify-center px-6 py-3.5 text-base text-center rounded-lg ${colorButton} ${
        props.classNameButton
      } ${isFullWidth && "w-full"} ${pointer}`}
    >
      {children}
    </button>
  );
};

export default Button;

The behavior:

Edit:
Doing that works: !bg-blue-700 hover:!bg-blue-800 but I have to put it everywhere ^^"