目次
前回について
前回はtailwind cssの概要について触れました。【前回】tailwind cssについて
tailwind cssの導入
tailwind cssの導入には何種類か手段があり、中にはプロジェクトで使用するフレームワークごとに詳しく説明されてたりします。tailwind css の導入手順
普段使用するときはtailwind cssのファイル一式をインストールしてから使用します。理由としてはCDNでネットワークを介してtailwind cssを読み込むと、そのファイル分だけ全体の読み込み速度が遅くなってしまうからです。
ただ、今回はCodePenでサンプルを作成するため、cdnで読み込んでいきます。
一般的なtailwind css
前回もお話ししましたが、tailwind cssでは数値があらかじめ決められています。そのため、コンポーネント化して使用しやすくなります。テーマとjitモードとマイナス値
使いたいカラーコードをあらかじめテーマとして設定しておくことで同じカラーを呼び出すことができます。今回はカラーですが、他にも自分で自由に使用したいcssプロパティをあらかじめ名前をつけて設定しておくことができます。また、あらかじめ決められた数値ではなく、実数で直接使用したい場合は、jitモードで数値を指定します。さらに、マイナス値を指定したい場合は、プロパティの頭にマイナスを付けるとマイナスの数値を設定することができます。
（jitモードの時は[]内にマイナス値を設定することもできます。）
設定する数値が二つ以上あるとき
gridの数値や、gapで縦と横が異なる場合、またcalc()で計算した値を入力したい場合など、一つのプロパティに二つの異なる数値を設定する必要がある時は、一工夫必要です。まず、tailwind cssではスペースが使えません。スペースを使用するとクラスとして認識されなくなります。tailwind cssで文字と文字の間を示すにはアンダースコア（アンダーバー）を使います。アンダーバーを使用した部分はtailwind cssではスペースだと認識され、二つ以上の値を設定することが可能になります。
疑似要素
疑似要素は反映させたい要素にbefore:またはafter:を最初につけて設定します。cssで疑似要素を設定する場合、最初に「content: '';」と空の要素を設定しないといけませんが、tailwind cssでは最初から空の要素が設定されているので、わざわざcontentを設定する必要はありません。ホバーとグループ化・ペア化
ホバーやチェック時のプロパティを設定することもできます。cssと同じように最初にhover:やchecked:をつけて書きます。ただ、この書き方だと、ホバーした要素自体にしかプロパティを設定することができません。ボタンにホバーした時に中にあるテキストの色を変えることはできません。そこで使用するのがグループプロパティです。親要素に当たるものにgroupを設定します。そして子要素にgroup-hover:と設定することで、親要素がホバーした時に合わせて子要素にも変化をもたらすことができます。
同じようなものにペア化があります。個人的にはinput要素とlabel要素が隣り合っている時などに使用しています。input要素にpeerを設定し、label要素にpeer-checked:でチェック時のプロパティを設定します。そうすることで、input要素がチェックになったら隣り合うlabel要素を変化させることができます。
レスポンシブについて
tailwind cssのレスポンシブはSPファーストで書かれます。画面幅の小さいものからレスポンシブ対応していくので、PC時のホバーアニメーションをSP時に取り消す必要がありません。レスポンシブのタイミングは既に何種類かで分けられています。個別に設定することもできますが、今回はILで使用しているテンプレートと同じ値があったのでそのまま使用します。
レスポンシブのプロパティは最初にmd:をつけます。「md:~」にすることで、795px以上の時、つまりPC表示時のプロパティを設定することができます。
まとめ
今回はcodepenでtailwind cssを実際に書いてみました。今回の記事で使用したcodepenでは一切cssを書くことなくコーディングしています。tailwind cssには独自のルールがありますが、覚えてしまえば簡単にコーディングすることができ、箇所箇所で細かい修正をすることができるので、いたずらにmodifierを増やしてコーディングしなくて良くなるのが個人的にはとても助かってます。
最後までお読みいただきありがとうございました。
また来月のLabでお会いしましょう。
それではまた。
