You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have been using Tailwind CSS with my project. Today when I tried to integrate this package into my project and make use of material design components, I ran into an issue with ripple effect on buttons, in which the ripple effect just didn't fire.
Looking into the issue, I discovered that something in the preflight.css has meddled with the functionality. More specifically, the
* {
border-style: solid;
}
rule has crippled the ripple effect not only on buttons, but also the ripple effect altogether.
Tested on:
Chrome 80.0.3987.163 on macOS 10.15.3
Elm 0.19.1
A work-around is potentially to unset tailwind's border style for class .mdc-ripple-surface--test-edge-var-bug.
aforemny
changed the title
Ripple effect crippled by some setting global border-style to solid
Ripple effect incompatible with Tailwind CSS
Jun 6, 2020
I have been using Tailwind CSS with my project. Today when I tried to integrate this package into my project and make use of material design components, I ran into an issue with ripple effect on buttons, in which the ripple effect just didn't fire.
Looking into the issue, I discovered that something in the
preflight.css
has meddled with the functionality. More specifically, therule has crippled the ripple effect not only on buttons, but also the ripple effect altogether.
Tested on:
Chrome 80.0.3987.163 on macOS 10.15.3
Elm 0.19.1
A minimal example:
The text was updated successfully, but these errors were encountered: