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