© 2021 Addapter Inc.

BLOG

Tailwindcss 最近学んだこと

コーディング2022/04/04
blog_author
なーこ
ブログ サムネイル

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

トップへのスクロールボタン