tailwindでclassNameを使わずに値を受け取る
tailwindcssを使ってReactコンポーネントを書いていると、「コンポーネントの再利用性がない」という問題に当たることがあるけれど、その一部を解決する方法。
コンポーネントの一部の数値を可変にしたいとき、簡単に思いつく方法として
数値を受け取って\`w-${width}\`みたいに組み立てる
classNameを受け入れる
というのが考えられるが、
数値を受け取る方法はpurgecssでパージされてしまう
classNameを受け入れる方法は機能するが、一般論としてコンポーネントの拡張性を上げすぎると収拾がつかなくなりがち
FYI: CSSとコンポーネント設計に対する考察 - uhyo/blog
tosuke.iconとしては、コンポーネント利用者が<Component width="w-32"/>のように渡す方法を推していきたい。
classNameと同じじゃないかと思うかもしれないが、\`w-${number}\`のような型にすると幅指定しかできないという規約を表明することができるので、安全
色をいい感じに外側から渡したい(gray-200を指定したらhover:bg-gray-200 focus:bg-gray-200みたいになっててほしい)ときはどうしたらいいんでしょうか
bg-gray-200がコード中に出現したらhover:やfocus:、dark:hover:、dark:focus:などのプレフィックスが付いているクラスも出現してる扱いにする(パージしない)みたいなのが現実解なのかな
提案レベルだがtailwindの色指定をCSS変数でやるのは割とよさそうなんだよな