Tailwind CSS: ナビゲーションデザインの作成

Question

私は CSS と VueJs を初めて使用するので、タブ パネルのデザインと機能を作成しています。 現在、tailwindCSS プラグインを使用しています。 私が望むデザインは次のようなものです。 現在: CodePen がないため、この希望を再現できません。スペースの要素間の: flexspace-x-10 または Gridgrid-gap-20 を使用しようとしましたが、機能しません 背景が灰色です: <nav> 内で bg-gray-600 を使用しようとしましたが、結果ではなく原因ですクリックすると変更 タグを選択

P粉764785924 · Answer

次のコマンドを使用して、CSS でナビゲーションを直接変更できます。

ナビ{ width: max-content; /*これは固定幅を設定します、それは必要です*/ ディスプレイ: フレックス; gap: 20px; /*テンプレートと同じように増やしたいだけ増やしてください。これは、フレックス内の要素間のスペースです*/ 背景: #ccc; /*色を直接入力するだけ*/ border-radius: 20px; /*半径を入力するだけ*/; }