Tailwind CSSについて

こんにちは！
今回は、このブログサイトを制作するときに使用したTailwind CSSについて、基礎的な部分を簡単にまとめていきたいと思います。

Tailwind CSSとは

初めの記事でも簡単に書きましたが、Tailwind CSSはユーティリティファーストなCSSフレームワークの一つです。あらかじめ用意されたクラス名をHTMLに直接記述することで、素早くスタイルを適用できるのが特徴です。Tailwind CSSを使うと、CSSファイルをあまり書かずに、HTML側でデザインの調整ができるようになります。

<h1 class="text-base font-bold text-red-800">こんにちは、ブログへようこそ！</h1>

例えばこんな感じに書きます。すると、

このように出力されます。一つずつ説明していきます。
text-baseは文字サイズのクラスです。text-baseは16pxのようです。他にも、text-sm（14px）やtext-lg（18px）などがあります。そして、text-[20px]のように直接サイズを指定することもできます。font-boldは太さを指定していて、text-red-800は文字色で、text-【色名】-【濃さ（100〜900）】という形で指定します。

このような感じで、どんどんクラスを書いていきデザインを作っていくのがTailwind CSSです。とてもたくさんのクラスがあり、ほとんどのデザインを作れます。

基本的なクラス

ここからはよく使いそうなクラスを簡単にまとめていきます。

// margin
m-4 //上下左右すべてに 1rem のマージンを設定
mt-4 //上にマージン 1rem 
mb-4 //下にマージン 1rem
ml-4 //左にマージン 1rem
mr-4 //右にマージン 1rem

mt-[30px] //数値を指定

// 軸でまとめて指定
mx-4　//左右にマージン　1rem（x軸）
my-4　//上下にマージン　1rem（y軸）

よく使うmarginは上記のように書きます。paddingも同じような指定ができます。

// padding　同じように書ける
p-4,pt-4,pb-4,pl-4,pr-4
pt-[20px]
px-4,py-4

次にレイアウトに関わるクラスです。

// position
relative //相対位置
absolute //親のrelative基準

//例
<div class="absolute top-4 left-2">左上に配置</div>

// flexbox
flex //flexboxを適用
items-center //子要素を縦方向中央揃え
justify-between //左右に等間隔
flex-wrap //折り返し
gap-4 //スペース（1rem）

// display
block //ブロック要素
inline-block //インラインブロック
inline //インライン
hidden //表示しない

こんな感じのクラスで指定します。簡単にかけて便利です。
最後にその他のクラスで僕がよく使うと思ったものをまとめます。

// 枠線
border
border-{color} //色指定
border-t,border-b,border-l,border-r //上下左右の指定

//例
<div class="border border-blue-600">ボーダーライン</div>

//　ホバー
hover:scale-105 //ホバー時に拡大（5%）
hover:bg-blue-500 //ホバー時に背景色が変わる

// アニメーション
transition //すべての変化にスムーズな動きを追加
transition-transform //transform系（拡大・移動など）を滑らかに
duration-300 //アニメーション時間を0.3秒に
ease-in-out //動き始めと終わりを滑らかに

//例
<button class="bg-blue-500 text-white px-4 py-2 
  hover:bg-blue-600 hover:scale-105 transition duration-300">
  ホバーボタン
</button>

最後に

今回はTailwind CSSについて簡単にまとめていきました。
まだまだ勉強不足で知らないクラスも多いと思いますが、これから少しずつ覚えたり使ってみたりしていきたいです。このブログサイトにもいろいろ使っているのでぜひ確認してみてください。