要素の幅を設定するためのユーティリティ

Class reference

Class
Properties
.w-0width: 0;
.w-1width: 0.25rem;
.w-2width: 0.5rem;
.w-3width: 0.75rem;
.w-4width: 1rem;
.w-5width: 1.25rem;
.w-6width: 1.5rem;
.w-8width: 2rem;
.w-10width: 2.5rem;
.w-12width: 3rem;
.w-16width: 4rem;
.w-20width: 5rem;
.w-24width: 6rem;
.w-32width: 8rem;
.w-40width: 10rem;
.w-48width: 12rem;
.w-56width: 14rem;
.w-64width: 16rem;
.w-autowidth: auto;
.w-pxwidth: 1px;
.w-1/2width: 50%;
.w-1/3width: 33.333333%;
.w-2/3width: 66.666667%;
.w-1/4width: 25%;
.w-2/4width: 50%;
.w-3/4width: 75%;
.w-1/5width: 20%;
.w-2/5width: 40%;
.w-3/5width: 60%;
.w-4/5width: 80%;
.w-1/6width: 16.666667%;
.w-2/6width: 33.333333%;
.w-3/6width: 50%;
.w-4/6width: 66.666667%;
.w-5/6width: 83.333333%;
.w-1/12width: 8.333333%;
.w-2/12width: 16.666667%;
.w-3/12width: 25%;
.w-4/12width: 33.333333%;
.w-5/12width: 41.666667%;
.w-6/12width: 50%;
.w-7/12width: 58.333333%;
.w-8/12width: 66.666667%;
.w-9/12width: 75%;
.w-10/12width: 83.333333%;
.w-11/12width: 91.666667%;
.w-fullwidth: 100%;
.w-screenwidth: 100vw;

Auto

.w-autoを使用して、ブラウザに要素の幅を計算させて選択させます。

.w-auto on block element
.w-auto on inline-block element
<div class="w-auto ..."></div>
<div class="w-auto inline-block ..."></div>

Screen Width

.w-screenを使用して、要素をビューポートの幅全体に広げます。

<div class="w-screen bg-gray-400 h-4"></div>

Fixed Width

要素を固定幅に設定するには、.w-{number}または.w-pxを使用します。

.w-0

.w-px

.w-1

.w-2

.w-3

.w-4

.w-5

.w-6

.w-8

.w-10

.w-12

.w-16

.w-20

.w-24

.w-32

.w-40

.w-48

.w-56

.w-64

<div class="w-0 ..."></div>
<div class="w-px ..."></div>
<div class="w-1 ..."></div>
<div class="w-2 ..."></div>
<div class="w-3 ..."></div>
<div class="w-4 ..."></div>
<div class="w-5 ..."></div>
<div class="w-6 ..."></div>
<div class="w-8 ..."></div>
<div class="w-10 ..."></div>
<div class="w-12 ..."></div>
<div class="w-16 ..."></div>
<div class="w-20 ..."></div>
<div class="w-24 ..."></div>
<div class="w-32 ..."></div>
<div class="w-40 ..."></div>
<div class="w-48 ..."></div>
<div class="w-56 ..."></div>
<div class="w-64 ..."></div>

Fluid Width

.w-{fraction}または.w-fullを使用して、要素をパーセンテージベースの幅に設定します。

.w-1/2
.w-1/2
.w-2/5
.w-3/5
.w-1/3
.w-2/3
.w-1/4
.w-3/4
.w-1/5
.w-4/5
.w-1/6
.w-5/6
.w-full
<div class="bg-gray-200 p-4">
  <div class="flex mb-4">
    <div class="w-1/2 p-2 bg-gray-400 text-center">.w-1/2</div>
    <div class="w-1/2 p-2 bg-gray-500 text-center">.w-1/2</div>
  </div>
  <div class="flex mb-4">
    <div class="w-2/5 p-2 bg-gray-400 text-center">.w-2/5</div>
    <div class="w-3/5 p-2 bg-gray-500 text-center">.w-3/5</div>
  </div>
  <div class="flex mb-4">
    <div class="w-1/3 p-2 bg-gray-400 text-center">.w-1/3</div>
    <div class="w-2/3 p-2 bg-gray-500 text-center">.w-2/3</div>
  </div>
  <div class="flex mb-4">
    <div class="w-1/4 p-2 bg-gray-400 text-center">.w-1/4</div>
    <div class="w-3/4 p-2 bg-gray-500 text-center">.w-3/4</div>
  </div>
  <div class="flex mb-4">
    <div class="w-1/5 p-2 bg-gray-400 text-center">.w-1/5</div>
    <div class="w-4/5 p-2 bg-gray-500 text-center">.w-4/5</div>
  </div>
  <div class="flex mb-4">
    <div class="w-1/6 p-2 bg-gray-400 text-center">.w-1/6</div>
    <div class="w-5/6 p-2 bg-gray-500 text-center">.w-5/6</div>
  </div>
  <div class="w-full p-2 bg-gray-400 text-center">.w-full</div>
</div>

Responsive

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

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

<div class="bg-gray-400 p-4 text-center">
  <div class="w-1/2 sm:w-auto md:w-full lg:w-32 xl:w-3/4 ...">
    Responsive Element
  </div>
</div>
Responsive Element

Customizing

Width scale

デフォルトでは、Tailwindの幅スケールは、デフォルトの間隔スケールと、幅に固有のいくつかの追加値の組み合わせです。

tailwind.config.jsファイルのtheme.spacingまたはtheme.extend.spacingセクションで、パディング、マージン、幅、高さの間隔スケールを一度にカスタマイズできます。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        spacing: {
+         '72': '18rem',
+         '84': '21rem',
+         '96': '24rem',
        }
      }
    }
  }

幅を個別にカスタマイズするには、tailwind.config.jsファイルのtheme.widthセクションを使用します。

  // tailwind.config.js
  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%',
        }
      }
    }
  }

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

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!