Tailwind CSS reset causes the background for the main button to be white

Questions / Help
,
1

Hey guys!

The Tailwind CSS reset causes the default background color for the main CTA button to become white, making the button look weird, and the text unreadable. When you hover the button, the background becomes blue, as expected.

Screen Shot 2022-06-22 at 20.05.52
Screen Shot 2022-06-22 at 20.05.522142×1430 170 KB

I prepared a public codepen to demo the behaviour:

2

Hey, thanks for the report. We will look into this.

3

Hey @proposales,

This is known bug/feature of tailwind’s preflight, see preflight button reset in v3 inconsistent with v2 · Issue #6602 · tailwindlabs/tailwindcss · GitHub

I would suggest to use custom preflight build without background-color: transparent as someone said at comments.

Or you can override button styles after preflight import, like:

.uploadcare--button_primary {
  background: #157cfc;
}
4

Im getting the exact same issue and I tried to add

.uploadcare--button_primary { background: #157cfc; } to the page, but it didn't work, how can I just change the HTML page for this to work?
5

Hello Jay. This workaround should be a working option. Could you please share the link to the page you’re building if it’s already on the web?

6

sorry, just saw this, yes the link is here: 88stacks
i had to comment out part of tailwind to make the page even work, so you don’t really see the error here,. ill get a workalone option up.