Remove background-color: transparent from default button styles

[htutwaiphyoe]

This background-color: transparent is overwriting other backgroud color CSS of button.

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

I have to be disabled preflight in config and add default reset CSS in global.css file manually to get my button background color work.
https://unpkg.com/tailwindcss@3.0.24/src/css/preflight.css

[huykon]

I have same concern

[alex-krasikau]

Do you set other backgrounds using the Tailwind classes, like bg-gray-800, or using your custom classes?

If the second is the case, make sure, that you import the Tailwind CSS file first, before your custom CSS file.

[huykon]

Hi @alex-krasikau, let me explain my case. I'm writing a react app using tailwind to attach to the a website (NO using tailwind), the website is working normally before my app was attached. so I don't want tailwind override my css in same page. Do you know any way to do it?

[alex-krasikau]

In your case disabling preflight may help - https://tailwindcss.com/docs/preflight#disabling-preflight

[huykon]

Thanks your way, it's good but I need to code more =))

[blamarvt]

For me the problem was really a problem of CSS (?) precedence. On a base install of Tailwind if you have:

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

button {
   @apply bg-blue-500;
}

You're going to be very frustrated because the background of your type=submit buttons are going to remain transparent.

If you change the button style to:

button[type="submit"] {
   @apply bg-blue-500
}

...then all is well.

It makes sense in retrospect that the most specific definition wins it's just a bit counterintuitive for me!

[venudyavan]

This background-color: transparent is overwriting other backgroud color CSS of button.

button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 /
background-color: transparent; / 2 /
background-image: none; / 2 */
}
corePlugins: {
preflight: false,
}
It is not working

[Alvindelito]

I had this issue as well until I moved my custom classes to inside of the extend object in tailwind.config.js

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        ivory: "#FFFFEF",
        beige: "#F5F4DB",
        white: "#FFF",
        yellow: "#F7F59D",
        gray: "#D6D5D3",
      },
      fontFamily: {
        'header': ["Chonburi", "serif"],
        'body': ["Montserrat", "sans-serif"]
      }
    },
  },
  plugins: [],
}

I am using react vite and did not have to set preflight to false

[bschm0622]

Anyone know how to fix this in Tailwind 4? facing the same issue....

[wongjn]

Consider providing a git repo that reproduces the undesired behavior.