Tailwind でアスペクト比プラグインを設定するにはどうすればよいですか?

Tailwind Deasupekuto Bipuraguinwo She Dingsurunihadousurebayoidesuka



Tailwind では、アスペクト比はビデオや画像などの要素の幅と高さの比率です。 Tailwind CSS では、CSS のアスペクト比プロパティを使用して要素に必要なアスペクト比を設定するアスペクト比ユーティリティのネイティブ サポートが導入されました。ただし、このプロパティは古いブラウザではサポートされていません。したがって、ユーザーはアスペクト比プラグインを使用してこれらのブラウザをサポートできます。このプラグインは 2 つのクラスを導入します。 アスペクト-w-{n} ' そして ' アスペクト-h-{n} 」を組み合わせて、要素に固定のアスペクト比を与えることができます。

この記事ではTailwindでアスペクト比プラグインを設定する方法を解説します。





Tailwind CSS でアスペクト比プラグインを設定するにはどうすればよいですか?

Tailwind でアスペクト比プラグインを設定するには、以下の手順を参照してください。



  • アスペクト比プラグインをプロジェクトにインストールする
  • 「tailwind.config.js」ファイルにアスペクト比プラグインを追加し、「 側面 」コアプラグイン
  • HTML プログラムでアスペクト比プラグイン クラスを使用する
  • HTML Web ページを表示して出力を確認します。

ステップ 1: Tailwind プロジェクトにアスペクト比プラグインをインストールする



まず、ターミナルを開いて以下のコマンドを実行して、プロジェクトにアスペクト比プラグインをインストールします。



アスルと @ 追い風 / アスペクト比



ステップ 2: Tailwind 構成ファイルでアスペクト比プラグインを構成する

次に、「tailwind.config.js」ファイルを開き、アスペクト比プラグインを追加し、「 側面 」コアプラグインを使用して競合を回避します。

module.exports = {
コンテンツ： [ 「./index.html」 】 、

コアプラグイン: {
アスペクト比： 間違い 、
} 、

プラグイン: [
必要とする ( '@tailwindcss/アスペクト比' ） 、
】 、
} ;

ステップ 3: HTML プログラムでアスペクト比プラグインを使用する

次に、HTML プログラムを作成し、その中でアスペクト比プラグインを利用します。たとえば、「 アスペクト-w-16 ' そして ' アスペクト-h-9 16:9 のアスペクト比を維持するためのプログラム内のクラス:

< 体 >
< ディビジョン クラス = 「アスペクト-w-16 アスペクト-h-9」 >
< iframe 送信元 = 「https://www.youtube.com/embed/NX_NW6bt6_s」
枠線 = 「0」 許可する = 「加速度センサー; 自動再生;
クリップボード書き込み;暗号化されたメディア。ジャイロスコープ;
ピクチャー・イン・ピクチャー」 フルスクリーンを許可する > iframe >
ディビジョン >
体 >

ここ：

  • ”
    ” 要素は 2 つのアスペクト比プラグイン クラスを使用しています。つまり、” アスペクト-w-16 ' そして ' アスペクト-h-9 ”。これらのクラスは、16:9 の固定アスペクト比を持つコンテナを作成するために利用されます。
  • ”