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/[email protected]/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.

[Brent-Knigge]

Here is a button that does not display properly. I took it directly from the first example here (for React). https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/modal-dialogs

<button
                  type="button"
                  onClick={() => setOpen(false)}
                  className="bg-red-600 inline-flex w-full justify-center rounded-md  px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 sm:ml-3 sm:w-auto"
                >
                  Deactivate
</button>

A work-around for this issue is to use the ! symbol in front of bg-*. I.e. !bg-red-600

Hope this helps

[rozsazoltan]

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

I don't quite understand what your problem is right now without reproduction. If the basic question is about the discussion, then the answer is using @layer:

• Remove background-color: transparent from default button styles #12063 (comment)
• From v4 the reset style cannot be overridden by TailwindCSS classes

If the question is about color declaration, then the answer is a CSS-first configuration.

• How to use custom color themes in TailwindCSS v4
• New configuration option in v4
• Which TailwindCSS v4 namespace matches a given TailwindCSS v3's theme keys?

[rozsazoltan]

• From v4 the reset style cannot be overridden by TailwindCSS classes

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

• Why doesn't the last added class override the previous property?
  • Overwrite Tailwind classes
  • Why doesn't dynamic Tailwind class override static class in my element?