Tailwind CSS: Merangka Reka Bentuk Navigasi

Question

Saya baru menggunakan CSS dan VueJ, jadi saya mencipta reka bentuk + fungsi panel tab

Pada masa ini, saya menggunakan pemalam CSS tailwind

Design yang saya nak macam ni:

Semasa: CodePen

Saya tidak boleh meniru hasrat ini kerana saya terlepas:

• Ruang antara elemen: Saya cuba menggunakan flex space-x-10 或 grid grid-gap-20 tetapi ia tidak berfungsi
• Latar belakang berwarna kelabu: Saya mencubanya <nav> 内使用 bg-gray-600 tetapi Sebab bukan hasil
• Tukar label yang dipilih pada klik

Answer 1

Apa yang boleh anda lakukan ialah menukar navigasi anda terus dalam CSS, menggunakan:

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