【Tailwindcss】「@layer」、「@variants」、トランジション、トランスフォーム、アニメーションについて

@layer

カスタムスタイルがどのレイヤーに属するか指定できます。定義したカスタムスタイルが指定したレイヤーに自動的に移動します。

メリット

CSSを記述する順序による問題が発生しずらくなる。
未使用のCSSは本番ビルド時にパージされるようになる。(JIT時なら開発環境でもそうなる。）

ユースケース

HTMLタグにまとめて同じクラスを適用できます。（例えば、「h2はこのデザインにする」など。）、かなり使用頻度が高い場合はこれを使ったりもします。

実装例

自分でカスタムCSSを作成する際にどのレイヤーに属するかを以下3つの区分で分類できます。なお、以下の三つはデフォルトでも存在しているレイヤーになります。

base
components
utilities

@layer base {
  h1: {
    @apply text-xl2;
  }
}

@layer components {
  div: {
    @apply text-xl4;
  }
}

@layer utilities {
  @variants hover: {
    ...
  }
}

@layer base {

h1: {

@apply text-xl2;

}

@layer components {

div: {

@apply text-xl4;

}

@layer utilities {

@variants hover: {

...

}

@variantsとは？

疑似クラスごとのCSSを適用できます。ユーティリティごとに擬似クラスが使える選択肢は決まっています（例えば、paddingなどは擬似クラスをデフォルトで使えない。）が、variantsを使うことで拡張することができます。

例

@variants hover {
  .rotate-0 {
    transform: rotate(xxx);
  }
}

@variants hover {

.rotate-0 {

transform: rotate(xxx);

}

設定ファイル

例えば、paddingでhoverを使えるようにするには以下のように記述します。

module.export = {
  variants: {
    padding: ['hover'],
  }
}

module.export = {

variants: {

padding: ['hover'],

}

トランジションとは？

「時間的変化」のことです。

例

「ボタンにマウスオーバーした際に色を変えたい」という要件があった場合に、すぐに変化させるのではなく時間をかけて変化させたいケース

どうやって変化させるか

delay

マウスをホバーしてから開始するまでの時間を遅らせる。

duration

何秒かに渡ってゆっくり変化させる。

Timing

ease-in

ゆっくり開始して後からスピードを上げる。

ease-out

早く開始してゆっくり変化させる。

Tailwindの場合

元々CSSではかなり設定できる項目が多いですが、Tailwindではかなり厳選して以下の4つのみが使えるようになっています。

色
透明度
影
transform(変化）

トランスフォームとは？

変換や、変形のことです。CSSではかなり細かく設定できますが、TailwindCSSでは厳選されています。

デザインのポイント

hoverなどの特定の場合などに設定したりもします。

Origin

原点、どこを原点として回転させるかなどの起点のことです。真ん中、上下左右、斜めの９パターンあるのでどれかを選びます。

TailwindCSSでの変形パターン

色々変形パターンはあるのですが、TailwindCSSでは以下の4つが扱えます。

Rotate

回転、角度0が基準

Skew（スキュウ）

歪み（ゆがみ）、角度0が基準

Scale

拡大縮小、100が基準

Translate

移動、0が基準

アニメーション

仕組み

数秒の間の繰り返しで、始点と終点のCSSを指定します。通常は、transformと組み合わせて使います。

tailwindでは厳選して以下の4つが使えます。

spin

ローディングのように表示できます。

ping

何かと通信しているかのような表示ができます。

pulse

薄くしたり濃くしたりを繰り返します。（ローディングの表現方法の一つです。）

bounce

バウンドしているかのような表現ができます。