TailwindCSS breaks Plotly modebar layout

[wuyuanyi135]

When using Plotly together with TailWindCSS I noticed that the mode bar's layout is not correct: Here is the codepen for reproducing this error.

I could confirm this was caused by the following rule that override the display property of .main-svg.

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}

I could fix this by adding this to override the CSS normalization behavior.

svg {
    display: inherit;
}

I noticed that the display property was block anyway. I don't understand how this inconsistency is caused. Do you think this is a bug?

[tashburn]

I have this issue too, but svg{ display: inherit; } does not fix it for me.

[brendanmatkin]

This is a fix:

.js-plotly-plot .plotly .modebar svg {
	display: inline;
}

or in svelte (which I'm using):

:global(.js-plotly-plot .plotly .modebar svg) {
	display: inline;
}

this is due to tailwind using css remedy style reset. The discussion about changing svg to block is here.

[gvwilson]

Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for several years, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Thanks for your help - @gvwilson

[robertclaus]

I happened to run into this today and it's quite awkward. Since TailwindCSS is pretty popular, this is probably worth taking a look at.

TailwindCSS 3.4.3 Plotly 2.33.0 react-plotly.js 2.6.0

[gvwilson]

thanks @robertclaus - I'll see if we can get this into one of the upcoming work cycles.

[guillaume-mueller]

I have the same issue but the fix is not enough. I use Tailwind v4.

Without preflight:

With preflight:

With preflight and @brendanmatkin's fix:

Any idea ?

EDIT: I just found that adding vertical-align: baseline; fixes it.

Final code:

.js-plotly-plot .plotly .modebar svg {
    display: inline;
    vertical-align: baseline;
}