Tailwind CSS：精心设计导航设计

Question

我是CSS和VueJs新手，所以我正在创建选项卡面板设计+功能目前，我正在使用tailwindCSS插件我想要的设计是这样的：当前：CodePen我无法复制这个愿望，因为我错过了：元素之间的空格：我尝试使用flexspace-x-10或gridgrid-gap-20但它不起作用背景为灰色：我在<nav>内使用bg-gray-600进行尝试，但是原因而非结果点击时更改所选标签

P粉764785924 · Answer

你可以做的是直接在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*/;
}