javascript - React and tailwind button hidden because of global generated css - Stack Overflow

admin管理员组

文章数量:1240586

I am trying to render a custom blue button component on my screen in react. However, the following auto generated tailwind class from my out.css file is causing all buttons to have a transparent background. How can I disable this global logic only for buttons? If I change this file, it is overwritten on the next compile because I am running the following command when running my app:

tailwindcss -i ../main.css -o ../out.css --watch

out.css:

/*
! tailwindcss v3.2.4 | MIT License | 
*/

...

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

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

...

Here is inspecting dev tools:

• I am using tailwind 3.2.4
• I am already applying a custom tailwind class to all of my blue buttons (it is a shared component)

I am trying to render a custom blue button component on my screen in react. However, the following auto generated tailwind class from my out.css file is causing all buttons to have a transparent background. How can I disable this global logic only for buttons? If I change this file, it is overwritten on the next compile because I am running the following command when running my app:

tailwindcss -i ../main.css -o ../out.css --watch

out.css:

/*
! tailwindcss v3.2.4 | MIT License | https://tailwindcss
*/

...

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

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

...

Here is inspecting dev tools:

• I am using tailwind 3.2.4
• I am already applying a custom tailwind class to all of my blue buttons (it is a shared component)

• javascript
• html
• css
• reactjs
• tailwind-css

Share Improve this question Follow edited 16 hours ago isherwood 61.1k1616 gold badges120120 silver badges168168 bronze badges asked yesterday Quinn NolanQuinn Nolan 2911 silver badge33 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 1

If this issue affects multiple buttons and you want to prevent Tailwind from applying these global styles altogether, extend Tailwind’s base layer by adding this to your tailwind.config.js:

module.exports = {
  corePlugins: {
    appearance: false, // Disables the default button appearance reset
  },
  theme: {
    extend: {},
  },
};

Then, restart your Tailwind build process:

npx tailwindcss -i ../main.css -o ../out.css --watch

If you are using tailwindcss (based on your information). You should not change the output directly but by removing the tailwind class. And the custom CSS should be put on the main.css not directly on output.css.

Answering from your question (assuming you are using tailwind ver 3.x); in your main.css

// tailwind import 
// ...
// Put your class here

.btn-custom {
  //...
}

in your HTML file:

   <button class="btn-custom other-tailwind-css"> 
   ...
   </button>

You can add the className bg-blue-(50 | 500 | whatever weight) to override it prior to compilation.

<button className="bg-blue-500" />

To resolve the issue of buttons having a transparent background while using Tailwind CSS, you can override the global styles by applying specific utility classes directly to your button components. Instead of modifying the out.css file, which gets overwritten, you can use Tailwind's utility classes in your React component.

Here’s an example of how to create a blue button:

const BlueButton = () => {
  return (
    <button className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
      Click Me
    </button>
  );
};

In this code snippet, the bg-blue-500 class sets the background color to blue, while text-white ensures the text is visible. By applying these classes directly to your button, you effectively override the global styles without needing to change the out.css file. This approach maintains the integrity of your Tailwind setup while allowing for custom styling where needed.

本文标签： javascriptReact and tailwind button hidden because of global generated cssStack Overflow