スケール

Tailwind CSS version
v1.2.0+

変換を使用して要素をスケーリングするためのユーティリティ。

Class reference

Class
Properties
.scale-0--transform-scale-x: 0; --transform-scale-y: 0;
.scale-50--transform-scale-x: .5; --transform-scale-y: .5;
.scale-75--transform-scale-x: .75; --transform-scale-y: .75;
.scale-90--transform-scale-x: .9; --transform-scale-y: .9;
.scale-95--transform-scale-x: .95; --transform-scale-y: .95;
.scale-100--transform-scale-x: 1; --transform-scale-y: 1;
.scale-105--transform-scale-x: 1.05; --transform-scale-y: 1.05;
.scale-110--transform-scale-x: 1.1; --transform-scale-y: 1.1;
.scale-125--transform-scale-x: 1.25; --transform-scale-y: 1.25;
.scale-150--transform-scale-x: 1.5; --transform-scale-y: 1.5;
.scale-x-0--transform-scale-x: 0;
.scale-x-50--transform-scale-x: .5;
.scale-x-75--transform-scale-x: .75;
.scale-x-90--transform-scale-x: .9;
.scale-x-95--transform-scale-x: .95;
.scale-x-100--transform-scale-x: 1;
.scale-x-105--transform-scale-x: 1.05;
.scale-x-110--transform-scale-x: 1.1;
.scale-x-125--transform-scale-x: 1.25;
.scale-x-150--transform-scale-x: 1.5;
.scale-y-0--transform-scale-y: 0;
.scale-y-50--transform-scale-y: .5;
.scale-y-75--transform-scale-y: .75;
.scale-y-90--transform-scale-y: .9;
.scale-y-95--transform-scale-y: .95;
.scale-y-100--transform-scale-y: 1;
.scale-y-105--transform-scale-y: 1.05;
.scale-y-110--transform-scale-y: 1.1;
.scale-y-125--transform-scale-y: 1.25;
.scale-y-150--transform-scale-y: 1.5;

使用方法

最初に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 ...">

TailwindはCSSカスタムプロパティを使用して変換を実装するため、注意してください。 変換ユーティリティはIE11のような古いブラウザではサポートされていません。プロジェクトに変換が必要で、古いブラウザをサポートする必要がある場合は、独自のユーティリティを追加またはその他のカスタムCSSを使用してください。

Responsive

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

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

<img class="transform scale-100 sm:scale-150 md:scale-75 lg:scale-125 xl:scale-100 ...">

Customizing

Scale values

デフォルトでは、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',
      }
    }
  }

デフォルトテーマのカスタマイズについてはテーマのカスタマイズをご覧ください。

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive, hover and focus バリアントはscale utilitiesのために作られます。

あなたはどのバリアントがscale utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのscaleプロパティを修正することによってコントロールできます。

例として、この設定は also active and group-hover バリアントを作ります。

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

無効にする

もしscale utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのscale propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!