目次
Tailwindの設定ファイルに型を導入したい
configファイルの`module.exports = {`直前に以下を挿入することで解決できました
/**
* @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
*/
プロパティに対しても全て型が効くのconfigをかなり設定するときにはとても楽になりました。
値を柔軟に設定したい
configに書くほどでもないような「ここだけ少し変えたい!」という場面が多少あるかと思います。そんなときに、便利なのが、 角括弧(square brackets)を利用した表記です。書き方はそのままです。各括弧に指定したい値を入れるだけ。
border-bl-[6px]
`border-width`だけではなく他のプロパティにも使えるみたいで、「arbitrary values」と呼ばれています。
参考 -> https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
ラジオボタンやチェックボックスのカスタマイズ
ラジオボタンのカスタマイズもtailwindcssで十分いけました。
こういうやつですね。
input[type="radio"]:checked+label{
....
}
ラジオボタンがチェックされたら隣のラベルにcssをつけるというコードです。
このDOMの兄弟関係をtailwindcssで表現してくれるのが、v2.1+から導入された「Just-in-Time Mode」です。
tailwindでは、直前のDOMの状態に基づいてcssをつける変数を`peer`と言います。
以下のように、変化が生じる要素に`peer`というクラスを付与し、変化させたい要素に、変化のされ方も明示してクラスをつけます。
ここでは`peer-checked:`となっているので、「直前のinputがチェックされたら」という意味を表しています。
<input
defaultChecked={true}
type="radio"
id="radio-1"
name="radioSelect"
value="radio-1"
hidden
className="peer"
onChange={formik.handleChange}
/>
<div
className="w-6 h-6 rounded-full border border-teal-400 mr-3 relative peer-checked:before:content-[''] peer-checked:before:absolute peer-checked:before:w-4
peer-checked:before:h-4 peer-checked:before:bg-teal-500 peer-checked:before:rounded-full peer-checked:before:top-1/2 peer-checked:before:left-1/2 peer-checked:before:-translate-x-1/2 peer-checked:before:-translate-y-1/2"></div>
チェックボックスも同様です。
———————————————————————–
以下のサイトに例を示しています。
https://far-float.de/examples/file-uploader
ソースコード
https://github.com/farfloat/Blog/blob/main/src/pages/examples/file-uploader.tsx