TailwindCSS breaks Plotly modebar layout

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?

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

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

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

@robertclaus

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

Fix plotly menubar

@brendanmatkin

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;
}

This no longer seems to be an issue starting with plotly.js v3.1.0; when using a version of plotly.js >= 3.1.0 in the linked codepen, the modebar renders as expected.

Most likely the fix can be attributed to the modebar changes in #7492.

Navigation Menu

Repository navigation

TailwindCSS breaks Plotly modebar layout #5828

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

TailwindCSS breaks Plotly modebar layout #5828

Description

Activity

tashburn commented on Dec 21, 2021

brendanmatkin commented on Mar 23, 2023

gvwilson commented on Jul 5, 2024

robertclaus commented on Jul 19, 2024

gvwilson commented on Jul 19, 2024

guillaume-mueller commented on Apr 28, 2025

emilykl commented on Aug 30, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions