Tailwind CSS: Merangka Reka Bentuk Navigasi

Question

Saya baru menggunakan CSS dan VueJs jadi saya mencipta reka bentuk panel tab + fungsi Pada masa ini saya menggunakan pemalam tailwindCSS Reka bentuk yang saya mahukan adalah seperti ini: Semasa: CodePen Saya tidak boleh meniru hasrat ini kerana saya hilang the : between elements spaces: Saya cuba menggunakan flexspace-x-10 atau gridgrid-gap-20 tetapi ia tidak berfungsi Latar belakang berwarna kelabu: Saya cuba menggunakan bg-gray-600 di dalam <nav> tetapi punca dan bukan hasilnya berubah apabila diklik Pilih teg

P粉764785924 · Answer

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