73008


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

[code]

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    .radio-button:checked + label {
        @apply bg-indigo-500;
    }
    
[/code]

[code]

    <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>
    
[/code]

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

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

[code]

    class="radio-button:bg-indigo-300 radio-button:text-white"
    
[/code]

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


CC BY-SA 4.0
2020-12-30T10:07:34.480
72984
2021-01-01T07:44:03.590
2020-12-30T12:46:34.500
34267
34267
question
html css
tailwind cssでradioをボタンのように表示したい


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

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

[code]

    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`
                    })
                })
            }
        ],
    }
    
[/code]

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

[code]

    ～～
    .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 {
    ～～
    
[/code]

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

[code]

    radio-button:bg-indigo-500
    radio-button:text-white
    
[/code]

[code]

    <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>
    
[/code]

英語ですがここら辺を参考にしました。  
<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」は任意の文字列です。

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

[code]

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


CC BY-SA 4.0
2021-01-01T07:28:52.890
73008
2021-01-01T07:44:03.590
2021-01-01T07:44:03.590
34267
34267
72984
answer