Tailwind CSS を導入する

動機

CSS + CSS Modules
- 乗り換えは楽？
- Media query に変数が使えないのがつらい
コンポーネント系の CSS in JS
- コンポーネントベースのものはマークアップと密結合されるので使うのを避けたい (ロックインされる)
- 薄い wrapper を使う案もあるが、そこまでするならそういう責務を持ったコンポーネントに軽く Tailwind 書けば良くないですか？という気持ちもある (そんなに単純ではない？)
- 使ったことがないのでここは後々検討すれば良さそう……
vanilla-extract
- わりと有力だったが、.css.ts に書かなければいけない仕様がつらかった
Kuma UI
- 良さそうだけどやっぱりロックインされないか不安
- 新しすぎる？今採用するのはリスクが大きいかも
Tailwind CSS + Tailwind Variants
- 最有力、モダンな技術で単純に興味がある
- モダンかつエコシステムが整ってきていて、長く便利に使えそう
- かなり懸念点はあったものの、後述の理由によりこれを使いたい

同じファイルにスタイルとマークアップをまとめられる
- Vitest 使えばテストも一箇所に書けそう、問題は Storybook か？
- Storybook、既にメンテつらくて死にかけているので捨ててもいいかも (話が脱線しました)
ユーティリティクラスが「それやるよね！」みたいなまとまり方をしていて良い
- px- で左右 padding みたいな
バンドルサイズを減らせる
使えるサイズが限定されているので、間違った方向に凝る必要がなくなりそう
単純に記述量が少ないので、パッと書けそう
- もちろん CSS も補完が効くのでそこまで関係ないと思われるが、補完の候補から選ぶのに時間がかかることありませんか？
(Tailwind に限った話ではないが) Reset CSS が効く
- 思わぬデフォルトスタイルシートが邪魔してくることがあるので、リセットしてくれた方がありがたい
- 今のスタイルは破壊されるけど

負債になりそう
- もう既にウンコードのCSSでそうなっているので死んだら乗り換える的な気持ちでやれば良さそう
- Tailwind 自体これ系のデファクトになりそうな空気感がある(要出典)、しばらくはメンテされるだろうし腐る心配はないと思う
クラス名が汚い
- 普通ユーザはクラス名見ないし、CSS Modules でも別にクラス名は綺麗でない
クラス名の略称がつらそう
- 分かるが、短いものはよく使うものなので慣れかもしれない
- だいたい、CSS も margin: 3px 5px みたいなやつどっちが上下でどっちが左右なのか分からないし、ドキュメント読まないとプロパティを理解できない点ではどっちも同じだと思う
JSXが読みにくくなる
- Tailwind Variants使えばマークアップとスタイル切り離せるのでよさそう (そういう目的のライブラリではないけど)
クラス名が長すぎる
- 適切にコンポーネント分割すればよさそう
CSSほどの自由度はなさそう
- 自由度ありすぎるとカオスになるから逆に良いかも
ロックインされそう
- はい
- prefix つければ剥がしやすくなるのである程度はマシになると思う (tw-)

[x] #60
- これにより壊れた箇所は CSS 側で修正していく
[x] #61
- IntrinsicElements: p, h1, h2, div のようなやつ
- これにスタイルをつけた wrapper を作ることで global の HTML タグを汚染せずに済む
- スタイルを打ち消したりしなくて済むので、よりセマンティックなHTMLに近づく (class が全然セマンティックではないが)
[ ] #62