傾斜

Tailwind CSS version
v1.2.0+

変換を使用して要素を傾斜させるためのユーティリティ。

Class reference

Class
Properties
.skew-x-0--transform-skew-x: 0;
.skew-x-1--transform-skew-x: 1deg;
.skew-x-2--transform-skew-x: 2deg;
.skew-x-3--transform-skew-x: 3deg;
.skew-x-6--transform-skew-x: 6deg;
.skew-x-12--transform-skew-x: 12deg;
.-skew-x-12--transform-skew-x: -12deg;
.-skew-x-6--transform-skew-x: -6deg;
.-skew-x-3--transform-skew-x: -3deg;
.-skew-x-2--transform-skew-x: -2deg;
.-skew-x-1--transform-skew-x: -1deg;
.skew-y-0--transform-skew-y: 0;
.skew-y-1--transform-skew-y: 1deg;
.skew-y-2--transform-skew-y: 2deg;
.skew-y-3--transform-skew-y: 3deg;
.skew-y-6--transform-skew-y: 6deg;
.skew-y-12--transform-skew-y: 12deg;
.-skew-y-12--transform-skew-y: -12deg;
.-skew-y-6--transform-skew-y: -6deg;
.-skew-y-3--transform-skew-y: -3deg;
.-skew-y-2--transform-skew-y: -2deg;
.-skew-y-1--transform-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 ...">

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

Responsive

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

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

<img class="transform skew-y-0 sm:skew-y-12 md:-skew-y-12 lg:skew-x-6 xl:-skew-x-6...">

Customizing

Skew scale

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

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

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

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!