👌

[tailwind] flex使用時に要素の幅を調整するやり方

2023/04/10に公開

結論

flexとspace-x-{value}を使用する。

https://tailwindcss.com/docs/space#add-horizontal-space-between-children

ただgapとの違いが現状分かっていません。

サンプルコード

<div class="flex space-x-2">
  <button class="px-4 py-2 font-bold text-white rounded bg-brand-primary">
    テスト・テスト1
  </button>
  <button  class="px-4 py-2 font-bold bg-white border rounded border-brand-primary text-brand-primary">
    テスト・テスト2
  </button>
</div>

Discussion