ライフプロのヒント

最近、TailWindCSSはバージョン3.0をリリースしました、そして、フレームワークは非常に人気があります.あなたはきれいなコードのすべての小さなトリックを知っていますか?


1アスペクト比
きれいなUIは、すべてのカードと画像を完全にすべてのデバイス間でサイズを設定する必要があります.あまりにも多くの画面サイズが敏感なスケーリングユニットを使用するようにem , rem , % , or vh/vw プラットフォームでメディアを歪めさせる
メディアのサイズを強制的にピクセルで非自明ですが、どのように応答比を強制しますか?おそらく、プロファイルのバナーは1500 x 500ピクセルですが、ユーザーのアップロードされたコンテンツは、ユーザーの経験に挑戦を維持することができます.答えはアスペクト比のコンテナです.

デモ:https://play.tailwindcss.com/GOv5fZhyL3

<iframe class="w-full aspect-video ..." 
        src="https://www.youtube.com/ ...">
</iframe>

アスペクト比は、コンテナの幅に成長している間、比率を16:9 . 幅のあるノード1920 の高さがあります1080 一方、携帯電話でスケールする320x180 .
より多くの比率の設定ファイルをカスタマイズすることもできます.

module.exports = {
  theme: {
    extend: {
      aspectRatio: {        
        '4/3': '4 / 3',
        'banner': '1500/500'      
      },
    },
  },
  plugins: [],
}

Inset位置決め
現在、ブラウザの79 %しかCSSアスペクト比プロパティをサポートしていません.幸運にも、パディング・ボトムハックを使用するアスペクト比のためのテールウインド・プラグインがあります.これはインターンが便利になるときです.
Aspect ratio plugin
Can I use aspect-ratio?
それが絶対的な位置決めのための速記であるので、Insetテクニックはアスペクト比容器でうまく動きます.おそらく、完全に正方形の要素は入れ子になったスクロールコンテンツを必要とします.最も速い解決法は、完全な幅と完全な高さで子要素に絶対的な位置決めを使用することです.以前は、子要素を正しく位置させるために、いくつかのクラス名を取るでしょう.

しかし、Tuwind開発者は、このテクニックは一般的です知っている.現在、単一のユーティリティクラスはすべてのポジショニングを処理します.セットは全体の親ノードを満たすか、または部分的に満たすでしょう.
デモ:https://play.tailwindcss.com/4ZTlx80ryN

<!-- Pin to top left corner -->
<div class="relative aspect-square ...">
  <div class="absolute left-0 top-0 h-1/2 w-1/2 ...">01</div>
</div>

<!-- Span top edge -->
<div class="relative aspect-square ...">
  <div class="absolute inset-x-0 top-0 h-1/2 ...">02</div>
</div>

<!-- Pin to top right corner -->
<div class="relative aspect-square ...">
  <div class="absolute top-0 right-0 h-1/2 w-1/2 ...">03</div>
</div>

<!-- Span left edge -->
<div class="relative aspect-square ...">
  <div class="absolute inset-y-0 left-0 w-1/2 ...">04</div>
</div>

<!-- Fill entire parent -->
<div class="relative aspect-square ...">
  <div class="absolute inset-0 ...">05</div>
</div>

<!-- Span right edge -->
<div class="relative aspect-square ...">
  <div class="absolute inset-y-0 right-0 w-1/2 ...">06</div>
</div>

<!-- Pin to bottom left corner -->
<div class="relative aspect-square ...">
  <div class="absolute bottom-0 left-0 h-1/2 w-1/2 ...">07</div>
</div>

<!-- Span bottom edge -->
<div class="relative aspect-square ...">
  <div class="absolute inset-x-0 bottom-0 h-1/2 ...">08</div>
</div>

<!-- Pin to bottom right corner -->
<div class="relative aspect-square ...">
  <div class="absolute bottom-0 right-0 h-1/2 w-1/2 ...">09</div>
</div>

分割リストスタイリング
Tailwindは完璧ではなく、多くの場合、ブートストラップのような他の人気のフレームワークのリストスタイルに合わせてカスタムCSSを必要とします.アイコンのデザインは、各リストの項目の間の境界線を配置します.
スタイル、テーブル、flexbox、またはグリッドのような複雑な構造を必要とせずにリスト項目間の明確な区別を示しているので、好ましいです.さらに、リストはブラウザ全体で互換性があります.
カスタムCSSを書くことなく、どのように、あなたはすぐに流行風のbootstrapのようなスタイルリストですか?シンプルで、divide ユーティリティ.

デモ:https://play.tailwindcss.com/YpbjZdaJoU

<ul class="divide-y border">
  <li class="p-3">a</li>
  <li class="p-3">b</li>
  <li class="p-3">c</li>
  <li class="p-3">d</li>
</ul>

また、他の境界線のような境界線重量と色を変更することができます.ただし、代わりに分割プレフィックスを使用します.

<ul class="divide-y-2 border-2 border-red-500 divide-red-500">
  <li class="p-3">a</li>
  <li class="p-3">b</li>
  <li class="p-3">c</li>
  <li class="p-3">d</li>
</ul>

結論
私のポストを読んでくれてありがとう.ここで、コードに含まれるユーティリティクラスの数を減らす方法をいくつか知っています.上記のすべてのテクニックを使用した最終製品です.https://play.tailwindcss.com/LmcYBNmbHl

ボーナス
新しいTailWindCSS 3.0の機能の深さのビデオ.(所属しない)