💨

【tailwindcss和訳】TRANSFORMS/Rotete

2021/11/02に公開

この記事について

この記事は、TRANSFORMS/Roteteの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。


Rotete

トランスフォームで要素を回転させるためのユーティリティ。

クラス プロパティ
rotate-0 --tw-rotate: 0deg;
rotate-1 --tw-rotate: 1deg;
rotate-2 --tw-rotate: 2deg;
rotate-3 --tw-rotate: 3deg;
rotate-6 --tw-rotate: 6deg;
rotate-12 --tw-rotate: 12deg;
rotate-45 --tw-rotate: 45deg;
rotate-90 --tw-rotate: 90deg;
rotate-180 --tw-rotate: 180deg;
-rotate-180 --tw-rotate: -180deg;
-rotate-90 --tw-rotate: -90deg;
-rotate-45 --tw-rotate: -45deg;
-rotate-12 --tw-rotate: -12deg;
-rotate-6 --tw-rotate: -6deg;
-rotate-3 --tw-rotate: -3deg;
-rotate-2 --tw-rotate: -2deg;
-rotate-1 --tw-rotate: -1deg;

使い方

要素を回転させるには、まず transform ユーティリティーでトランスフォームを有効にし、次に rotate-{angle}ユーティリティーで回転角度を指定します。

Image from Gyazo

<img class="transform rotate-0 ..." />
<img class="transform rotate-45 ..." />
<img class="transform rotate-90 ..." />
<img class="transform rotate-180 ..." />

レスポンシブ

特定のブレークポイントで要素の回転を制御するには、既存の rotate ユーティリティーに{screen}: というプレフィックスを追加します。例えば、md:rotate-90 を使用すると、中程度のスクリーンサイズ以上で rotate-90 ユーティリティを適用することができます。

<div class="transform rotate-45 md:rotate-90"></div>

Tailwind のレスポンシブデザイン機能についての詳細は、レスポンシブデザインのドキュメントをご覧ください。

カスタマイズ

ローテートスケール

デフォルトでは、Tailwind は 7 つの汎用回転ユーティリティを提供しています。これらを変更、追加、削除するには、Tailwind の設定の theme.rotate セクションを編集します。

tailwind.config.js
  module.exports = {
    theme: {
      rotate: {
-       '-180': '-180deg',
        '-90': '-90deg',
-       '-45': '-45deg',
        '0': '0',
        '45': '45deg',
        '90': '90deg',
+       '135': '135deg',
        '180': '180deg',
+       '270': '270deg',
      }
    }
  }

デフォルトのテーマをカスタマイズする方法については、テーマのカスタマイズに関するドキュメントを参照してください。

バリアント

デフォルトでは、レスポンシブバリアント、ホバーバリアント、フォーカスバリアントのみが回転ユーティリティのために生成されます。

tailwind.config.js ファイルの variants セクションにある rotate プロパティを変更することで、rotate ユーティリティのために生成されるvariantsをコントロールすることができます。

例えば、この設定では、アクティブとグループホーバーのバリアントも生成されます。

tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+      rotate: ['active', 'group-hover'],
      }
    }
  }

無効化

プロジェクトで rotate ユーティリティを使用する予定がない場合は、設定ファイルの corePlugins セクションで rotate プロパティを false に設定することで、完全に無効にすることができます。

tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+    rotate: false,
    }
  }

Discussion

ログインするとコメントできます