Move tab lables to center

[akvaskov]

Hi. Could you advise me how to center tab labels? In case if I have tab content, lables are aligned by left side.

And the second question if it's possible to put labels below the content?
Thank you in advance!

[saadeghi]

An empty tab will fill the space so you can add one in the beginning and one at the end to push the tabs to center:
https://play.tailwindcss.com/6pLZz8JleT

<div role="tablist" class="tabs tabs-bordered">
+  <span class="tab"></span>
  <a role="tab" class="tab">Tab 1</a>
  <a role="tab" class="tab tab-active">Tab 2</a>
  <a role="tab" class="tab">Tab 3</a>
+  <span class="tab"></span>
</div>

Let me know if you have a question.

[akvaskov]

Hi! Thank you for your suggestion. I've done as you adviced but the result is now not as really expected. Yes, tabs moved right but seems to much.

I don't know if it's a reason but please take a look at css of the fisrt empty tab:

.tab:not(input):empty {
    cursor: default;
    grid-column-start: span 9999;
}

[akvaskov]

Hi! Any comments how to fix too big left indention if add an empty tab in the beggingin?

[p4ulor]

Here is my solution, without hardcoded px, centers the tabs according to the text size and centers the content

https://play.tailwindcss.com/VCvPeK5dnP

But it doesnt work on v4 (for those unknown reasons), only in tailwindcss v3

[saadeghi]

Oh. In that case if you're using radio inputs it gets a little bit tricky. That's not something we implemented yet. But you can use a hacky class like this:
https://play.tailwindcss.com/MS3WEyEmwd

[akvaskov]

Hi, thanks! It works but suppose that there should be more elegant solution out of box in the future :) Thank you again!

[saadeghi]

there should be more elegant solution out of box in the future
Agreed 👍

[ismaelzsilva]

hi! It did work for me. There is a way to use parent div width instead tho? this feature is coming in v4? thank you!