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

Question

CSS と VueJs は初めてなので、機能を備えたタブ パネルのデザインを作成しています

現在、tailwind CSS プラグインを使用しています

私が欲しいデザインは次のようなものです:

現在: CodePen

欠落しているため、このウィッシュをコピーできません:

• 要素間のスペース: flex space-x-10 または grid Grid-gap-20 を使用しようとしましたが、機能しません
• 背景が灰色です: <nav> 内で bg-gray-600 を使用しようとしましたが、 結果ではなく原因
• クリック時に選択したタグを変更します

Answer 1

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

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