Tailwind CSSを使い始めて3ヶ月ほど経った。
スタイルに対応したクラス以外に、特殊なクラスや書き方があったのでメモ。
- 環境
- 子要素にスタイルを指定
- テキストの省略
- スペーサー
- 要素間のボーダー
- important にする
- 負数
- 色の透過率を指定
- before/after
- その他の疑似要素、疑似クラス
- 公式ドキュメントを検索しても結果が出ない場合
- 振り返り
環境
Tailwind CSS v3.1.6。Reactと併用する前提で記載している。
子要素にスタイルを指定
以下のStack Overflowやブログに記載があるが、クラス名として [&...] のように記述することで、子要素にスタイルを指定できる。半角スペースは _ で代用。
「arbitrary variants」と呼称されている。外部コンポーネントを使う場合に便利。
// Swiperのページネーションの色変更 <div id={paginationId} className="[&_.swiper-pagination-bullet-active]:bg-black" />
テキストの省略
テキストの省略表示 ( text... ) 用のユーティリティーが用意されている。
1行テキストの省略
truncate で設定可能。
以下のスタイルが指定される。
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
複数行テキストの省略
@tailwindcss/line-clamp プラグインを導入することで、 line-clamp-行数 が使えるようになる。
https://tailwindcss.com/docs/plugins#line-clamp
3行目以降は省略する場合、 line-clamp-3 のように指定。以下のスタイルが指定される。
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 行数;
スペーサー
space-[x|y]-サイズ で、子要素間のスペースを指定可能。
また、フレックスレイアウトやグリッドレイアウトを使用している場合、 gap を使う。
要素間のボーダー
並んだ要素の間にボーダーを付けることはよくあるが、 divide から始まるクラスで指定可能。
以下のように使用する。
<div class="divide-y divide-black divide-solid"> <div>01</div> <div>02</div> <div>03</div> </div>
important にする
! をクラス名の前に付与することで、 important にできる。Important modifierという模様。
<div className="!bg-white">...</div>
外部コンポーネントを使う場合に便利。
tailwind.config.js で important: true を指定することで、Tailwind CSSのすべてのクラスをimportantにすることもできる。
負数
マイナスの値を使いたい場合、クラス名の先頭に - を付与する。
ネガティブマージンは、 -mt-2 のようになる。
画像の位置調整などで用いる transform: translateY(-50%) は、 -translate-y-1/2 。
色の透過率を指定
色指定するクラス名の後ろに /パーセンテージ を指定すると、透過してくれる。
例えば bg-black/60 は、 background-color: rgb(0 0 0 / 0.6) に解釈される。
before/after
before:クラス 、 after:クラス で記述可能。
contentは before:content-[値] や after:content-[値] 。よくある空のcontent指定は className="before:content-['']" や className='after:content-[""]' 。
その他の疑似要素、疑似クラス
こちらに記載あり。接頭語としてクラス名に付与する。
first, last は それぞれ :first-child, :last-child 。:first-of-type, :last-of-type はそのまま first-of-type, last-of-type 。
first, last, odd, even なども使用できる。
公式ドキュメントを検索しても結果が出ない場合
使い方とは異なるが、時々ハマるのでメモ。
公式ドキュメントのQuick searchは、CSSのプロパティ名で検索しても引っかからないことがある。
例えば overflow-wrap は、 Word Break としてクラス化されているが、 overflow-wrap でQuick searchしても Word Break は検索結果に含まれない。
Tailwind CSSで付けられたクラス名などを検索対象としている模様。
Tailwind側のクラス名を覚える以外の解決方法がなさそうなので、Quick searchで見つからなければGoogleで inurl:https://tailwindcss.com/docs 付きで検索している。
振り返り
クラス指定する要素を起点とし、子要素に対してもスタイル指定できるため、やろうと思えばかなり自由度が高かった。
Reactでコンポーネント化する前提だが、不満なく使えている。
Quick searchのプロパティ名検索さえできるようになれば完璧か。
