tailwind类无法在vue中使用自定义颜色

pgx2nnw8  于 2023-06-06  发布在  Vue.js
关注(0)|答案(1)|浏览(199)

我正在做一个Web应用程序,允许用户更改应用程序的口音颜色,并添加背景顺风类,用户选择的口音颜色debending,但它不工作,当我用途:style="”属性evry事情工作正常这里是我试图做的

<button
            class="h-full w-10/12 mt-4 text-lg rounded-md text-white disabled:bg-gray-300 dark:disabled:bg-gray-700"
            :disabled="isFormValid === false ? true : false"
            :class="isFormValid === true ? `bg-[${accentColor}]` : false"
            >
          Button
          </button>

这里是当使用:style="”属性时,它工作得很完美

<button
            class="h-full w-10/12 mt-4 text-lg rounded-md text-white disabled:bg-gray-300 dark:disabled:bg-gray-700"
            :disabled="isFormValid === false ? true : false"
            :style="
              isFormValid === true ? `background-color:${accentColor};` : false
            "
          >
            Button
          </button>

我确定accentColor返回的是一个字符串,但是我想知道tailwind是否不支持这个,或者我缺少了什么?

2admgd59

2admgd591#

这种情况不太可能发生。你可以试试bg-[#1da1f2]类。你的accentColor变量会不会漏掉#字符呢?

相关问题