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になんらかの修正を加えれば可能なのでしょうか。