@layer
カスタムスタイルがどのレイヤーに属するか指定できます。定義したカスタムスタイルが指定したレイヤーに自動的に移動します。
メリット
- CSSを記述する順序による問題が発生しずらくなる。
- 未使用のCSSは本番ビルド時にパージされるようになる。(JIT時なら開発環境でもそうなる。)
ユースケース
HTMLタグにまとめて同じクラスを適用できます。(例えば、「h2はこのデザインにする」など。)、かなり使用頻度が高い場合はこれを使ったりもします。
実装例
自分でカスタムCSSを作成する際にどのレイヤーに属するかを以下3つの区分で分類できます。なお、以下の三つはデフォルトでも存在しているレイヤーになります。
- base
- components
- utilities
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@layer base { h1: { @apply text-xl2; } } @layer components { div: { @apply text-xl4; } } @layer utilities { @variants hover: { ... } } |
@variantsとは?
疑似クラスごとのCSSを適用できます。ユーティリティごとに擬似クラスが使える選択肢は決まっています(例えば、paddingなどは擬似クラスをデフォルトで使えない。)が、variantsを使うことで拡張することができます。
例
1 2 3 4 5 |
@variants hover { .rotate-0 { transform: rotate(xxx); } } |
設定ファイル
例えば、paddingでhoverを使えるようにするには以下のように記述します。
1 2 3 4 5 |
module.export = { variants: { padding: ['hover'], } } |
トランジションとは?
「時間的変化」のことです。
例
「ボタンにマウスオーバーした際に色を変えたい」という要件があった場合に、すぐに変化させるのではなく時間をかけて変化させたいケース
どうやって変化させるか
delay
マウスをホバーしてから開始するまでの時間を遅らせる。
duration
何秒かに渡ってゆっくり変化させる。
Timing
ease-in
ゆっくり開始して後からスピードを上げる。
ease-out
早く開始してゆっくり変化させる。
Tailwindの場合
元々CSSではかなり設定できる項目が多いですが、Tailwindではかなり厳選して以下の4つのみが使えるようになっています。
- 色
- 透明度
- 影
- transform(変化)
トランスフォームとは?
変換や、変形のことです。CSSではかなり細かく設定できますが、TailwindCSSでは厳選されています。
デザインのポイント
hoverなどの特定の場合などに設定したりもします。
Origin
原点、どこを原点として回転させるかなどの起点のことです。真ん中、上下左右、斜めの9パターンあるのでどれかを選びます。
TailwindCSSでの変形パターン
色々変形パターンはあるのですが、TailwindCSSでは以下の4つが扱えます。
Rotate
回転、角度0が基準
Skew(スキュウ)
歪み(ゆがみ)、角度0が基準
Scale
拡大縮小、100が基準
Translate
移動、0が基準
アニメーション
仕組み
数秒の間の繰り返しで、始点と終点のCSSを指定します。通常は、transformと組み合わせて使います。
tailwindでは厳選して以下の4つが使えます。
spin
ローディングのように表示できます。
ping
何かと通信しているかのような表示ができます。
pulse
薄くしたり濃くしたりを繰り返します。(ローディングの表現方法の一つです。)
bounce
バウンドしているかのような表現ができます。
この記事へのコメントはありません。