Tailwind CSS : création d'une conception de navigation

Question

Je suis nouveau sur CSS et VueJs, je crée donc un design de panneau à onglets + fonctionnalité

Actuellement, j'utilise le plugin CSS tailwind

Le design que je veux est comme ceci :

Actuel : CodePen

Je ne peux pas copier ce souhait car j'ai raté :

• Espace entre les éléments : j'ai essayé d'utiliser flex space-x-10 或 grid grid-gap-20 mais ça ne marche pas
• Le fond est gris : je l'ai essayé <nav> 内使用 bg-gray-600 mais Parce que ce n'est pas un résultat
• Modifier l'étiquette sélectionnée en cliquant

Answer 1

Ce que vous pouvez faire, c'est modifier votre navigation directement en CSS, en utilisant :

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