【tailwindcss和訳】TRANSFORMS/Scale

この記事について

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

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

---

Scale

トランスフォームによる要素のスケーリングのためのユーティリティ。

クラス	プロパティ
scale-0	--tw-scale-x: 0;<br>--tw-scale-y: 0;
scale-50	--tw-scale-x: .5;<br>--tw-scale-y: .5;
scale-75	--tw-scale-x: .75;<br>--tw-scale-y: .75;
scale-90	--tw-scale-x: .9;<br>--tw-scale-y: .9;
scale-95	--tw-scale-x: .95;<br>--tw-scale-y: .95;
scale-100	--tw-scale-x: 1;,<br>--tw-scale-y: 1;
scale-105	--tw-scale-x: 1.05;<br>--tw-scale-y: 1.05;
scale-110	--tw-scale-x: 1.1;<br>--tw-scale-y: 1.1;
scale-125	--tw-scale-x: 1.25;<br>--tw-scale-y: 1.25;

使い方

要素のスケールを制御するには、まず transform ユーティリティでトランスフォームを有効にし、次に scale-{percentage}、scale-x-{percentage}、scale-y-{percentage} ユーティリティでスケールを指定します。

<img class="transform scale-75 ..." />
<img class="transform scale-100 ..." />
<img class="transform scale-125 ..." />
<img class="transform scale-150 ..." />

レスポンシブ

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

<div class="transform scale-100 md:scale-75"></div>

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

カスタマイズ

スケールの値

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

tailwind.config.js

  module.exports = {
    theme: {
      scale: {
        '0': '0',
+       '25': '.25',
        '50': '.5',
        '75': '.75',
        '90': '.9',
-       '95': '.95',
        '100': '1',
-       '105': '1.05',
-       '110': '1.1',
        '125': '1.25',
        '150': '1.5',
+       '200': '2',
      }
    }
  }

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

バリアント

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

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

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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