Tailwind CSS: Crafting Navigation Design

Question

I'm new to CSS and VueJs so I'm creating a tab panel design + functionality Currently I'm using the tailwindCSS plugin The design I want is like this: Current: CodePen I can't replicate this wish because I'm missing the : between elements of spaces: I tried using flexspace-x-10 or gridgrid-gap-20 but it doesn't work Background is gray: I tried using bg-gray-600 inside <nav> but the cause and not the result changes when clicked Select tag

P粉764785924 · Answer

What you can do is change your navigation directly in CSS, using:

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