【tailwindcss和訳】TRANSFORMS/Skew

この記事について

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

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

Skew

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

クラス	プロパティ
skew-x-0	--tw-skew-x: 0deg;
skew-x-1	--tw-skew-x: 1deg;
skew-x-2	--tw-skew-x: 2deg;
skew-x-3	--tw-skew-x: 3deg;
skew-x-6	--tw-skew-x: 6deg;
skew-x-12	--tw-skew-x: 12deg;
-skew-x-12	--tw-skew-x: -12deg;
-skew-x-6	--tw-skew-x: -6deg;
-skew-x-3	--tw-skew-x: -3deg;
-skew-x-2	--tw-skew-x: -2deg;
-skew-x-1	--tw-skew-x: -1deg;
skew-y-0	--tw-skew-y: 0deg;
skew-y-1	--tw-skew-y: 1deg;
skew-y-2	--tw-skew-y: 2deg;
skew-y-3	--tw-skew-y: 3deg;
skew-y-6	--tw-skew-y: 6deg;
skew-y-12	--tw-skew-y: 12deg;
-skew-y-12	--tw-skew-y: -12deg;
-skew-y-6	--tw-skew-y: -6deg;
-skew-y-3	--tw-skew-y: -3deg;
-skew-y-2	--tw-skew-y: -2deg;
-skew-y-1	--tw-skew-y: -1deg;

使用方法

まず、transform ユーティリティでトランスフォームを有効にし、次に skew-x-{amount} と skew-y-{amount} ユーティリティでスキュー角度を指定して、要素を歪めます。

<img class="transform skew-y-0 ..." />
<img class="transform skew-y-3 ..." />
<img class="transform skew-y-6 ..." />
<img class="transform skew-y-12 ..." />

レスポンシブ

特定のブレークポイントにおける要素のスキューを制御するには、既存のスキュー・ユーティリティーに{screen}: というプレフィックスを加えます。例えば、md:skew-6 を使用すると、中程度の画面サイズ以上でのみ skew-6 ユーティリティが適用されます。

<div class="transform md:skew-6 ..."></div>
。

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

カスタマイズ

スキュースケール

デフォルトでは、Tailwind は 7 つの汎用的なスキューユーティリティを提供しています。これらを変更、追加、削除するには、Tailwind のテーマ設定の skew セクションをカスタマイズします。

tailwind.config.js

  module.exports = {
    theme: {
      extend: {
        skew: {
+        '25': '25deg',
+        '60': '60deg',
        }
      }
    }
  }

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

バリアント

デフォルトでは、Responsive、hover、focus の各バリアントのみが串刺しユーティリティ用に生成されます。

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

例えば、この設定では active と group-hover のバリアントも生成されます。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+      skew: ['active', 'group-hover'],
      }
    }
  }

無効化

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

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+    skew: false,
    }
  }