【Tailwind CSS】basis-1/2が反映されない場合の対処方法

はじめに

プログラミング学習中の@kat_logと申します。

Tailwind CSSにて、basis-1/2等、flexが反映されない問題に直面したのですが、解決したため共有です。

結論

それぞれの子要素をdivで囲むと解決しました。

具体的なコード

変更前

<div class="flex justify-center">
    <%= image_tag "man.png", class: "basis-1/2" %>
    <%= image_tag "woman.png", class: "basis-1/2" %>
</div>

basis-1/2が反映されず、画像が途切れています…

変更後

<div class="flex justify-center">
  <div>
    <%= image_tag "man.png", class: "basis-1/2" %>
  </div>
  <div>
    <%= image_tag "woman.png", class: "basis-1/2" %>
  </div>
</div>

basis-1/2が反映され、きれいに表示されるようになりました！

おわりに

お読みいただきありがとうございました！
どなたかの参考になれば嬉しいです。

素材