TailwindCSSでよく使うクラス11選！（幅・高さ・余白・パディングなど）

TailwindCSSを使って、ガッツリと画面を作成しました。

(ページ上部の「Quick search for anything」から検索できます）

今回、よく使ったクラスを紹介したいと思います。
簡単な説明を記載しています。TailwindCSSの雰囲気がなんとなくわかるかと思います。

幅を指定する

wから始まるクラスを使用すると、要素に幅を指定することが可能です。

固定の幅

w-0 〜　w-96まで指定することが可能です。
w-1だと0.25remになり、w-96だと24remになります。

<div class="w-12">
  test
</div>

1から96まで指定できますが、抜け番などもあるため詳しくは公式を参照してみてください。

幅をパーセンテージで指定する

w-1/2のように書いて指定することができます。

幅をフルサイズ指定

100パーセントで指定したい場合はw-fullを使用します。
w-screenを指定すると、100vwで横幅が指定されます。
vwはviewportに対する割合指定です。

高さを指定する

wと同じように、hから始まるクラスを使って、要素の高さを指定します。

固定の高さ

高さの方もh-0 〜　h-96まで指定することが可能です。
h-1だと0.25remになり、h-96だと24remになります。

<div class="h-12">
  test
</div>

幅と同じように、1から96まで指定できます。

高さをパーセンテージで指定する

幅と同じようにh-1/2のように書いて指定することができます。

高さをフルサイズ指定

h-fullで100パーセント指定になります。
幅の時と同じようにh-screenは100vhで縦幅が指定されます。

マージンを指定する

mから始まるクラスを使用すると、簡単に余白を指定することが可能です。

上下左右に同じマージンを指定する

m-0からm-96までの数値を使用して指定できます。
m-96を指定すると、margin: 24rem;を要素に対して指定していることになります。

上下にマージンを指定する

myを使用すると、上下にマージンを指定できます。
my-2とすると、上下に0.5remのマージンが取られます。

左右にマージンを指定する

mxを使用すると、左右にマージンを指定できます。
mx-2とすると、左右に0.5remのマージンが取られます。

上・下・左・右それぞれにマージンを指定する

それぞれにマージンを指定する場合は、m[t または l または r または b]-2のように指定します。

具体的には下記になります。
・mt-2で上方向に2(0.5rem)マージンをつける。
・ml-2で左方向に2(0.5rem)マージンをつける。
・mr-2で右方向に2(0.5rem)マージンをつける。
・mb-2で下方向に2(0.5rem)マージンをつける。

このようにmと「t,l,r,b」を組み合わせて、数値を入れると、指定した方向と数値に合わせて余白がとられます。
「t=top, l=left, r=right, b=bottom」の意味になります。

マイナスのマージンを指定する

-m-2など先頭にマイナスを入れるとマイナスのマージンになります。
-m-0から-m-96まで指定できます。上下左右それぞれにつけることも可能です。

パディングを指定する

パディングもマージンと同じような感じで使うことができます。
mを使っていたのをpから始まるクラスを使うとパディングになります。
マイナス指定がないところが違うところです。

上下左右に同じパディングを指定する

マージンと同じようにp-0からp-96までの数値を使用して指定できます。
最大値のp-96を指定すると、padding: 24rem;を要素に対して指定していることになります。

上下にパディングを指定する

pyを使用すると、上下にパディングを指定できます。
py-2とすると、上下に0.5remのパディングが指定されます。

左右にパディングを指定する

pxを使用すると、左右にパディングを指定できます。
px-2とすると、左右に0.5remのパディングが指定されます。

上・下・左・右それぞれにパディングを指定する

マージンと同じようにp[t または l または r または b]-2のように指定します。

マージンと同じように、下記のような感じで使えます。
・pt-2で上方向に2(0.5rem)パディングをつける。
・pl-2で左方向に2(0.5rem)パディングをつける。
・pr-2で右方向に2(0.5rem)パディングをつける。
・pb-2で下方向に2(0.5rem)パディングをつける。

枠線をつける(border)

borderから始まるクラスを使うと、枠線の幅が指定できます。
borderというクラスをつけると、要素にborder-width: 1px;を指定していることになります。

枠線の幅を変える

border-[数値]で幅を指定できます。
border-2だとborder-width: 2px;になります。

上下左右それぞれに枠線を指定する

border-[方向]-[位置]で指定することができます。

例えば下記のようになります。
・border-t-2で、要素の上の線がborder-top-width: 2px;が指定されたことになります。
・border-l-4で、要素の左の線がborder-left-width: 4px;が指定されたことになります。
・border-r-8で、要素の右の線がborder-right-width: 8px;が指定されたことになります。
・border-b-0で、要素の下の線がborder-bottom-width: 0px;が指定されたことと同じになります。（消えます）

枠線の色を指定する

border-[色]-[色の濃さ]で指定します。
border-red-500とすると赤色の枠線が指定されます。濃さは50〜900まで指定することができます。
詳しくは公式のこちらに書いています。

要素を丸くする

roundedから始まるクラスを使用すると要素を丸くすることが可能です。

具体的には下記のような感じです。

背景色をつける(bg)

bgから始まるクラスを使うと背景色をつけることができます。
bg-[色]-[色の濃さ]で指定することが可能です。

bg-red-500やbg-green-500のように使用することができます。
実際につけれる色は公式で確認してみてください。

透過する(opacity)

opacityから始まるクラスを使って透過します。

opacity-0からopacity-100までを指定することができます。
opacity-10だとopacity: 0.1;,opacity-50だとopacity: 0.5;といった感じです。

テキストのサイズを指定する(text-xx)

text-[サイズ]で指定することができます。

具体的には下記のような感じです。
他にもサイズがあるので公式を見てみてください。

テキストの位置を指定する

text-[文字位置]で指定できます。

下記の４つを使用することができます。
・text-leftでtext-align: left;が要素に指定されます。
・text-centerでtext-align: center;が要素に指定されます。
・text-rightでtext-align: right;が要素に指定されます。
・text-justifyでtext-align: justify;が要素に指定されます。

flexboxを使用してレイアウトする

要素にflexクラスを指定すると、子要素がflexレイアウトになります。
下記で、test1とtest2の要素が横並びになります。

<div class="flex">
  <div>test1</div>
  <div>test2</div>
</div>

並び方を指定する

justifyから始まるクラスを使用して指定します。

justify-centerを指定すると真ん中に配置されます。
justify-betweenを要素を均等に配置してくれます。

終わりに

TailwindCSSを使ってみたので、よく使ったクラスだけ列挙してみました。

画面レイアウトが楽になるので、使ったことがない方は是非試してみてください。
公式ドキュメントもわかりやすいので、調べるのも簡単で使いやすいです。