tailwindcss aspect ratio

@tailwindcss/aspect-ratio

要素に固定アスペクト比を与えるための構成可能なAPIを提供するプラグイン。

インストール

NPMからプラグインをインストールします。

npm install -D @tailwindcss/aspect-ratio

次に、 tailwind.config.jsファイルにプラグインを追加し、 aspectRatioコアプラグインを無効にして、Tailwind CSS v3.0に含まれるネイティブのaspect-ratio比ユーティリティとの競合を回避します。

 // tailwind.config.js
module . exports = {
  theme : {
    // ...
  } ,
  corePlugins : {
    aspectRatio : false ,
  } ,
  plugins : [
    require ( '@tailwindcss/aspect-ratio' ) ,
    // ...
  ] ,
} 

使用法

aspect-w-{n}とaspect-h-{n}クラスを組み合わせて、要素のアスペクト比を指定します。

 < div class =" aspect-w-16 aspect-h-9 " >
  < iframe src =" https://www.youtube.com/embed/dQw4w9WgXcQ " frameborder =" 0 " allow =" accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture " allowfullscreen > </ iframe >
</ div >

aspect-none使用して、アスペクト比の動作を削除します。

 < div class =" aspect-w-16 aspect-h-9 lg:aspect-none " >
  <!-- ... -->
</ div >

アスペクト比の動作を削除する場合、ネストされた要素にw-{n}またはh-{n}クラスがある場合、それらが一致するブレークポイントプレフィックスで再件名を使用していることを確認してください。

 < div class =" aspect-w-16 aspect-h-9 lg:aspect-none " >
  < img src =" ... " alt =" ... " class =" w-full h-full object-center object-cover lg:w-full lg:h-full " />
</ div >

これを現在実装する必要があるため（古いパディングボトムトリック）、親要素にアスペクト比を割り当て、その親の唯一の子をサイズしようとしている実際の要素を作成する必要があることに注意してください。

aspect-ratioプロパティが最新のブラウザでサポートされたら、Tailwind CSS自体に公式サポートを追加し、このプラグインを非難します。

最大16のアスペクト比クラスは、デフォルトで生成されます。

幅	身長
aspect-w-1	aspect-h-1
aspect-w-2	aspect-h-2
aspect-w-3	aspect-h-3
aspect-w-4	aspect-h-4
aspect-w-5	aspect-h-5
aspect-w-6	aspect-h-6
aspect-w-7	aspect-h-7
aspect-w-8	aspect-h-8
aspect-w-9	aspect-h-9
aspect-w-10	aspect-h-10
aspect-w-11	aspect-h-11
aspect-w-12	aspect-h-12
aspect-w-13	aspect-h-13
aspect-w-14	aspect-h-14
aspect-w-15	aspect-h-15
aspect-w-16	aspect-h-16

構成

tailwind.config.jsファイルのaspectRatioキーの下で、このプラグインによって生成される値とバリアントを構成できます。

 // tailwind.config.js
module . exports = {
  theme : {
    aspectRatio : {
      1 : '1' ,
      2 : '2' ,
      3 : '3' ,
      4 : '4' ,
    }
  } ,
  variants : {
    aspectRatio : [ 'responsive' , 'hover' ]
  }
} 

デフォルトのアスペクト比ユーティリティとの互換性

Tailwind CSS v3.0はネイティブのアスペクト比サポートを搭載していますが、これらの新しいユーティリティは優れていますが、 aspect-ratioプロパティはSafari 14ではサポートされていません。 Safari 14をサポートする必要がある場合、このプラグインは依然としてそれを行うための最良の方法です。

同じプロジェクトでこのネイティブのaspect-ratioユーティリティとこのプラグインを使用することは技術的には可能ですが、そうすることはあまり意味がありません。新しいネイティブのアスペクト比ユーティリティを使用できる場合は、このプラグインの代わりにそれらを使用してください。

ただし、プロジェクトで両方のアプローチを使用したい場合は、プラグインアプローチから新しいネイティブユーティリティにゆっくりと移行する方法として、次の値をtailwind.config.jsファイルに追加する必要があります。

 module . exports = {
  // ...
  theme : {
    aspectRatio : {
      auto : 'auto' ,
      square : '1 / 1' ,
      video : '16 / 9' ,
      1 : '1' ,
      2 : '2' ,
      3 : '3' ,
      4 : '4' ,
      5 : '5' ,
      6 : '6' ,
      7 : '7' ,
      8 : '8' ,
      9 : '9' ,
      10 : '10' ,
      11 : '11' ,
      12 : '12' ,
      13 : '13' ,
      14 : '14' ,
      15 : '15' ,
      16 : '16' ,
    } ,
  } ,
}

これは、デフォルトのaspectRatio値がこのプラグインの値によって上書きされているため、必要です。