Tailwind CSS：精心设计导航设计

Question

我是 CSS 和 VueJs 新手，所以我正在创建选项卡面板设计 + 功能

目前，我正在使用 tailwind CSS 插件

我想要的设计是这样的：

当前：CodePen

我无法复制这个愿望，因为我错过了：

• 元素之间的空格：我尝试使用 flex space-x-10 或 grid grid-gap-20 但它不起作用
• 背景为灰色：我在 <nav> 内使用 bg-gray-600 进行尝试，但是 原因而非结果
• 点击时更改所选标签

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