Tailwindcss: Tailwind's preflight messes with material-design button ripple

[hossameldeen]

Reproduction

JSFiddle: https://jsfiddle.net/nh5c6pza/

Expected: On clicking the button, there should be a ripple effect.

Actual: No ripple effect.

How to know if preflight is involved: If you uncomment the preflight import, you'll see the ripple effect.

The code on JSFiddle in case the link breaks in the future.

<!-- Material Design -->
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

<!-- Tailwind CSS -->
<!-- Comment the first import (preflight) & ripple will work! -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/preflight.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/utilities.min.css" rel="stylesheet">

<button class="mdc-button" data-mdc-auto-init="MDCRipple">Click me!</button>

<script>window.onload = () => mdc.autoInit();</script>

Relevant

This comment on #564.

[hossameldeen]

Updates:

1. It's not just ripple. Another thing I tried that is messed up as well is Material's text field/area. If you want an example, please tell me.

2. I'm not a CSS guru, but taking hints from the linked comments, I've tried commenting these lines and the issues were gone. Understandably, the tailwind borders don't work anymore, though.
   https://github.com/tailwindcss/tailwindcss/blob/a7a95b15c85c0c8d9875240de9e2e94f05789ec0/css/preflight.css#L438-L443

So, for readers who want a fast workaround & are willing to give up tailwind borders (Update: You still can have tailwind borders, check @adamwathan's comment below):

• Instead of importing tailwind.min.css import just utilities.min.css (See Installation).
• Download preflight.css & edit it locally to comment the lines above & import it.
• Note: Not a CSS guru & made only a quick test of it. Not sure if other things will break or if this solves all (or any) problems.

[adamwathan]

Yeah this is an unfortunate consequence of trying to make border work without also adding border-solid.

Tailwind's borders will still work with that section removed but you'll have to add border-solid and an explicit border color any time you want to add a border:

<!-- with Preflight -->
<div class="border"></div>

<!-- without Preflight -->
<div class="border border-solid border-gray-300"></div>

[hossameldeen]

That's nice, thanks!

I've corrected my comment.

FYI, for other reasons, I decided not to use Material after all, so this is not an issue for me anymore.

Nothing more from my side, feel free to keep the issue open or to close it. Thanks for the help! :-)

[adamwathan]

Going to close this as a "no plans to fix" sort of thing, even though I admit it's annoying.

[alphabt]

@adamwathan I'm having the same issue with border messing with material design's ripple. Is there a way to disable border reset while loading the preflight?

[hossameldeen]

@alphabt I'd advise you to open a new issue as maintainers/fellow developers sometimes miss looking at closed issues :(

If you think it's more of a question not a new bug, you can open it on tailwind/discuss if you want, and link to this issue in your new issue.

[alphabt]

@hossameldeen Thanks for the advice, I'll do so in the future.

As for disabling border reset while loading preflight, Adam recommanded a workaround here https://github.com/tailwindcss/tailwindcss/issues/938#issuecomment-495935593

[hossameldeen]

Oops, didn't notice you'd opened a new issue already! xD

Great.

You're welcome :-)