使用顺风创建导航设计 css

Question

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

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

我想要的设计是这样的：

当前：CodePen

我无法复制欲望，因为我错过了：

Space 元素之间：我尝试使用 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*/;
}

使用顺风创建导航设计 css

Create nav design using tailwind css

css

vue.js

tailwind-css