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