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から始まるクラスを使用すると要素を丸くすることが可能です。
具体的には下記のような感じです。
| クラス | 適用されるCSS |
|---|---|
| rounded | border-radius: 0.25rem; |
| rounded-md | border-radius: 0.375rem; |
| rounded-lg | border-radius: 0.5rem; |
| rounded-xl | border-radius: 0.75rem; |
背景色をつける(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-[サイズ]で指定することができます。
具体的には下記のような感じです。
他にもサイズがあるので公式を見てみてください。
| クラス | 適用されるCSS |
|---|---|
| text-xs | font-size: 0.75rem; line-height: 1rem; |
| text-sm | font-size: 0.875rem; line-height: 1.25rem; |
| text-xl | font-size: 1.25rem; line-height: 1.75rem; |
| text-2xl | font-size: 1.5rem; line-height: 2rem; |
テキストの位置を指定する
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を使ってみたので、よく使ったクラスだけ列挙してみました。
画面レイアウトが楽になるので、使ったことがない方は是非試してみてください。
公式ドキュメントもわかりやすいので、調べるのも簡単で使いやすいです。
コメント