1

tailwind cssをインストールして使っています。
inputのradioをボタンのように装飾表示して、クリックしたら色が変化するようにしたいのでこのようにしました。

@tailwind base;
@tailwind components;
@tailwind utilities;

.radio-button:checked + label {
    @apply bg-indigo-500;
}
<div>
    <input id="radio1" class="radio-button hidden" name="aaa" type="radio" value="ボタン1" checked/>
    <label for="radio1" class="px-4 py-2 bg-indigo-300">ボタン1</label>
    <input id="radio2" class="radio-button hidden" name="aaa" type="radio" value="ボタン2" />
    <label for="radio2" class="px-4 py-2 bg-indigo-300">ボタン2</label>
</div>

これでできるようになったのですが問題が一つあります。
背景色や文字色はtailwindで使えるものを自由に指定できるようにしたいのですが、どうすればよいでしょうか。(この例ではbg-indigo-500で固定になってしまいます)

例えばこんな感じで使えればいいのですが。

class="radio-button:bg-indigo-300 radio-button:text-white"

tailwind.config.jsになんらかの修正を加えれば可能なのでしょうか。

1 件の回答 1

1

自己レスですが解決しました。
他に困っている方もいるみたいなのでここに記します。

まずtailwind.config.jsに下記を追記してコンパイルします。

module.exports = {
    ~~
    variants: {
        extend: {
            backgroundColor: ['checkedLabel'],
            textColor: ['checkedLabel'],
        }
    },
    plugins: [
        function({ addVariant, e }) {
            addVariant('checkedLabel', ({ modifySelectors, separator }) => {
                modifySelectors(({ className }) => {
                    return `.${e(`radio-button${separator}${className}`)}:checked + label`
                })
            })
        }
    ],
}

そうすると出力されたcssファイルに各色用の定義がたくさんできます。

~~
.radio-button\:bg-indigo-500:checked + label {
  --tw-bg-opacity: 1;
  background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
}

.radio-button\:bg-indigo-600:checked + label {
~~

使い方は質問で例えたやり方そのまんまが可能です。

radio-button:bg-indigo-500
radio-button:text-white
<div>
    <input id="radio1" class="radio-button:bg-indigo-500 radio-button:text-white hidden" name="aaa" type="radio" value="ボタン1" checked/>
    <label for="radio1" class="px-4 py-2 bg-indigo-300">ボタン1</label>
    <input id="radio2" class="radio-button:bg-indigo-500 radio-button:text-white hidden" name="aaa" type="radio" value="ボタン2" />
    <label for="radio2" class="px-4 py-2 bg-indigo-300">ボタン2</label>
</div>

英語ですがここら辺を参考にしました。
https://tailwindcss.com/docs/configuring-variants
https://tailwindcss.com/docs/hover-focus-and-other-states#creating-custom-variants
https://tailwindcss.com/docs/plugins#adding-variants

尚、「radio-button」や「checkedLabel」は任意の文字列です。

一応念のため、もう自由に色指定できるので@tailwind3行の下に書いたこれは不要です。

.radio-button:checked + label {
    @apply bg-indigo-500;
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。