Open5ヶ月前にコメント追加3

便利なTailwind CSSのクラスをメモしていく

Size

widthとheightが同じ値の場合に一括で指定できるクラス。

<div class="w-10 h-10">content</div>

sizeを使用する例

<div class="size-10">content</div>

％指定やfit-contentの指定もできる・

<div class="size-1/2">content</div>

<div class="size-fit">content</div>

下記のような横ならびのコンテンツで、コンテンツ間のborderをいれる時に役立つクラス

それぞれの要素にborder-rightを指定する方法

<div class="grid grid-cols-3">
  <a class="border-r">Home</a>
  <a class="border-r">About</a>
  <a class="">Contact</a>
</div>

divideを使用した例

<div class="grid grid-cols-3 divide-x">
  <a>Home</a>
  <a>About</a>
  <a>Contact</a>
</div>

border同様、色や線種の指定もできる。
↓白線+波線のborderになる

<div class="grid grid-cols-3 divide-x divide-white divide-dashed">
  <a>Home</a>
  <a>About</a>
  <a>Contact</a>
</div>

テキストエリアにフォーカスしたときのアウトラインの色を指定できるクラス。

<textarea class="caret-pink-500"></textarea>