【TailwindCSS】書き方のテクニックメモ

はじめに

このブログを制作する中で遭遇した記述パターンの備忘録です。

画面のど真ん中に要素を配置する

<div class="h-screen w-screen flex justify-center items-center">
  <p>center</p>
</div>

ユーティリティクラス名	説明
h-screen	画面の高さ100%
w-screen	画面の幅100%
flex	要素を横に配置する
justify-center	要素を縦軸で真ん中に配置
items-center	要素を縦軸で真ん中に配置

要素を均等に配置する

<div class="flex justify-between">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
</div>

ユーティリティクラス名	説明
justify-between	要素を均等に配置する

はみ出たテキストの末尾を…で置き換える

<p class="truncate">
  looooooooooooooooooooooooooooooooooooooooooooooooooooooooooong sentence
</p>

ユーティリティクラス	説明
truncate	はみ出たテキストを…で置き換える

svgの色を変える

svgタグのfill属性とstroke属性に”currentColor”を指定することで、Tailwind CSSのtext-colorで色を変えることができる。

<svg fill="currentColor" stroke="currentColor">...</svg>