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

Question

Je suis nouveau sur CSS et VueJs, donc je crée un design de panneau d'onglets + fonctionnalité Actuellement, j'utilise le plugin tailwindCSS Le design que je veux est comme ceci : Actuel : CodePen Je ne peux pas reproduire ce souhait car il me manque les espaces : entre les éléments : j'ai essayé d'utiliser flexspace-x-10 ou gridgrid-gap-20 mais cela ne fonctionne pas. L'arrière-plan est gris : j'ai essayé d'utiliser bg-gray-600 dans <nav> mais la cause et non le résultat change lorsque vous cliquez sur Sélectionner la balise

P粉764785924 · Answer

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