【Tailwind和訳】SIZING/Width
この記事について
この記事は、SIZING/Widthの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Width
クラスとプロパティの対応表
要素の幅を設定するためのユーティリティ
| クラス | プロパティ |
|---|---|
w-0 |
width: 0px; |
w-px |
width: 1px; |
w-0.5 |
width: 0.125rem; |
w-1 |
width: 0.25rem; |
w-1.5 |
width: 0.375rem; |
w-2 |
width: 0.5rem; |
w-2.5 |
width: 0.625rem; |
w-3 |
width: 0.75rem; |
w-3.5 |
width: 0.875rem; |
w-4 |
width: 1rem; |
w-5 |
width: 1.25rem; |
w-6 |
width: 1.5rem; |
w-7 |
width: 1.75rem; |
w-8 |
width: 2rem; |
w-9 |
width: 2.25rem; |
w-10 |
width: 2.5rem; |
w-11 |
width: 2.75rem; |
w-12 |
width: 3rem; |
w-14 |
width: 3.5rem; |
w-16 |
width: 4rem; |
w-20 |
width: 5rem; |
w-24 |
width: 6rem; |
w-28 |
width: 7rem; |
w-32 |
width: 8rem; |
w-36 |
width: 9rem; |
w-40 |
width: 10rem; |
w-44 |
width: 11rem; |
w-48 |
width: 12rem; |
w-52 |
width: 13rem; |
w-56 |
width: 14rem; |
w-60 |
width: 15rem; |
w-64 |
width: 16rem; |
w-72 |
width: 18rem; |
w-80 |
width: 20rem; |
w-96 |
width: 24rem; |
w-auto |
width: auto; |
w-1/2 |
width: 50%; |
w-1/3 |
width: 33.333333%; |
w-2/3 |
width: 66.666667%; |
w-1/4 |
width: 25%; |
w-2/4 |
width: 50%; |
w-3/4 |
width: 75%; |
w-1/5 |
width: 20%; |
w-2/5 |
width: 40%; |
w-3/5 |
width: 60%; |
w-4/5 |
width: 80%; |
w-1/6 |
width: 16.666667%; |
w-2/6 |
width: 33.333333%; |
w-3/6 |
width: 50%; |
w-4/6 |
width: 66.666667%; |
w-5/6 |
width: 83.333333%; |
w-1/12 |
width: 8.333333%; |
w-2/12 |
width: 16.666667%; |
w-3/12 |
width: 25%; |
w-4/12 |
width: 33.333333%; |
w-5/12 |
width: 41.666667%; |
w-6/12 |
width: 50%; |
w-7/12 |
width: 58.333333%; |
w-8/12 |
width: 66.666667%; |
w-9/12 |
width: 75%; |
w-10/12 |
width: 83.333333%; |
w-11/12 |
width: 91.666667%; |
w-full |
width: 100%; |
w-screen |
width: 100vw; |
w-min |
width: min-content; |
w-max |
width: max-content; |
Auto
要素の幅をブラウザに計算させて選択させるには、w-autoを使います。特定の幅の設定を解除するためにも使用できます。
<div class="w-24 md:w-auto ..."></div>
Screen Width
要素がビューポートの幅全体に広がるようにするには、w-screenを使用します。
<div class="h-12 w-screen"></div>
Fixe Width
要素の幅を固定するには、w-{number}またはw-pxを使用します。
<div>
<div class="w-8 ..."></div>
<div class="w-12 ..."></div>
<div class="w-16 ..."></div>
<div class="w-24 ..."></div>
</div>
Fluid Width
w-{fraction}またはw-fullを使用して、要素の幅をパーセンテージベースで設定します。
<div class="flex ...">
<div class="w-1/2 ... ">w-1/2</div>
<div class="w-1/2 ... ">w-1/2</div>
</div>
<div class="flex ...">
<div class="w-2/5 ...">w-2/5</div>
<div class="w-3/5 ...">w-3/5</div>
</div>
<div class="flex ...">
<div class="w-1/3 ...">w-1/3</div>
<div class="w-2/3 ...">w-2/3</div>
</div>
<div class="flex ...">
<div class="w-1/4 ...">w-1/4</div>
<div class="w-3/4 ...">w-3/4</div>
</div>
<div class="flex ...">
<div class="w-1/5 ...">w-1/5</div>
<div class="w-4/5 ...">w-4/5</div>
</div>
<div class="flex ...">
<div class="w-1/6 ...">w-1/6</div>
<div class="w-5/6 ...">w-5/6</div>
</div>
<div class="w-full ...">w-full</div>
レスポンシブ
特定のブレイクポイントにおいて要素の幅を制御するには、既存の width ユーティリティーに{screen}:というプレフィックスを追加します。例えば、要素にmd:w-fullというクラスを追加すると、中程度の画面サイズ以上でw-fullのユーティリティーが適用されます。
<div class="w-1/2 md:w-full ...">
<!-- ... -->
</div>
Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。
カスタマイズ
width スケール
デフォルトでは、Tailwind の width スケールは、デフォルトスペーシングスケールと、幅に特化したいくつかの追加の値を組み合わせたものです。
tailwind.config.jsファイルのtheme.spacingまたはtheme.extend.spacingセクションで、padding、margin、width、height のすべてのスペーシングスケールを一度にカスタマイズすることができます。
theme: {
extend: {
+ spacing: {
+ '72': '18rem',
+ '84': '21rem',
+ '96': '24rem',
+ }
}
}
}
幅を個別にカスタマイズするには、tailwind.config.jsファイルのtheme.widthセクションを使用します。
module.exports = {
theme: {
extend: {
+ width: {
+ '1/7': '14.2857143%',
+ '2/7': '28.5714286%',
+ '3/7': '42.8571429%',
+ '4/7': '57.1428571%',
+ '5/7': '71.4285714%',
+ '6/7': '85.7142857%',
+ }
}
}
}
デフォルトテーマのカスタマイズについては、テーマのカスタマイズに関するドキュメントをご覧ください。
バリアント
デフォルトでは、width ユーティリティーに対しては、レスポンシブバリアントのみが生成されます。
tailwind.config.jsファイルのvariantsセクションにあるwidthプロパティを変更することで、どのバリアントが width ユーティリティーのために生成されるかをコントロールすることができます。
例えば、このコンフィグは hover と focus のバリエーションも生成します。
module.exports = {
variants: {
extend: {
// ...
+ width: ['hover', 'focus'],
}
}
}
無効化
プロジェクトで width ユーティリティーを使用しない場合は、設定ファイルのcorePluginsセクションでwidthプロパティをfalseに設定することで、ユーティリティーを完全に無効にすることができます。
module.exports = {
corePlugins: {
// ...
+ width: false,
}
}
Discussion