Tailwind CSSを学習しているメモ
MITなBootstrapテンプレートをゴニョゴニョして今ひとつな管理画面テンプレートを場当たり的なCSSとjQueryでカオスになる人生に終わりを告げたいので、Svelte/Reactでリスキリングしている。
というわけで、CSSの再学習にちょうどよいなと思ったのが、ユーティリティのCSSがたくさん詰まっているTailwind。ショートハンドなクラス名の意味や指定を学びつつ、今どきのCSSだとこうやって書くんだなという文法の整理をしている。
確かに覚えないといけないCSSクラスはいっぱいあるけど、チートシート的なサイトはいっぱいあるのでそこまで辛くない。CSS in JSみたいなハードコアなやり方に比べると良さげ。
flexを知らないと何も出来ないな
ちょっとレイアウトを組もうとすると、display:flexをちゃんと知らないと何も出来ないね。まぁ大して覚えることもないけど。
focusなんて疑似要素忘れてた
Tabなどでinput要素にフォーカスが当たった時のものだ。思い出した。
odd,evenなんかも用意してある
<tr class="odd:bg-white even:bg-slate-50"> みたいな書き方ができる。便利〜。
インプット要素のスタイリング
- disable
- invalid
- required
- checked
formのinput要素の状態に応じてスタイリングをまとめて組むことができるみたい。
一旦終わり。随時追記。
