Streaming live at 10am (PST)

Help with tab styling


I’m using the “Tabs” component but whenever I change the content in one tab pane it changes the text in all my other tab panes.

I also can’t see any other tab panes even though I have 4…

Am I missing something, or did Webflow allow me to change a styling attribute that shouldn’t be changed for this component?

Please help!

Here is my public share link:


You break the layout

First tab in many cases is a game of display: none;and display: block toggle by JS. HTML-JS-CSS basic example:

In any js plugin you can not Change the core style/markup!! In your case you add style named: Tab Pane and change the core style “display: none;” (The plugin JS use this property) to "display: flex" Thats it :slight_smile: This is enough to break the layout (Now you dont toggle from hidden to block ).

If you want to add flex/grid insidetab-pan-X add div wrapper inside tab-pan than add any style you want


First - remove this class from the 4 tab panes. Than change the text (in all four tabs you have the same content).

Related tutorial:


This fixed the issue, but once again:

Webflow, why do you allow me to change something that should not be changed…

I can’t set column widths… why can I change tab display properties?

Come on…


I agree but sometimes you want to change other properties (bg color, and so on). You can add this issue to wishlist or idea like.

closed #5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.