Tailwind CSS: Navigationsdesign erstellen

Question

Ich bin neu in CSS und VueJs, also erstelle ich ein Tab-Panel-Design + Funktionalität

Derzeit verwende ich das Tailwind-CSS-Plugin

Das Design, das ich möchte, ist so:

Aktuell: CodePen

Ich kann diesen Wunsch nicht kopieren, weil ich Folgendes verpasst habe:

• Abstand zwischen Elementen: Ich habe versucht, flex space-x-10 或 grid grid-gap-20 zu verwenden, aber es funktioniert nicht
• Hintergrund ist grau: Ich habe es ausprobiert <nav> 内使用 bg-gray-600 aber Ursache, nicht Ergebnis
• Ausgewähltes Label per Klick ändern

Answer 1

你可以做的是直接在CSS中更改你的导航，使用：

nav {
    width: max-content; /*This gonna set a fixed width, it is necessary*/
    display: flex;
    gap: 20px; /*increase as much you want to stay like your template, it is the space between the elements in your flex*/
    background: #ccc; /*Just put your color directly*/
    border-radius: 20px; /*Just put your radius*/;
}