TailwindCSS:禁用的变体不起作用 [英] TailwindCSS: disabled variant not working

问题描述

我正在尝试在 tailiwnd 中使用 disabled 变体，但它似乎不起作用.我不知道该怎么办.

如果按钮被禁用，我想更改按钮外观，我已经阅读了文档，它说默认情况下未启用禁用"变体.所以我修改了我的 tailwind.config.js，现在它看起来像这样:

module.exports = {清除:[]，主题: {延长: {}，},变体:{延长: {不透明度:['禁用']}},插件:[]，}

我的页面中有这个代码，两个按钮看起来一样:

 
<按钮类型=按钮"class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none disabled:opacity-50";tabindex=-1">提交<按钮类型=按钮"class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md disabled:opacity-50";禁用 tabindex=-1">提交

我已经重新编译了我的代码并删除了我所有的浏览器缓存，但它仍然不起作用.我还需要做任何其他事情才能使其正常工作吗?

解决方案

我通过 play.tai​​lwindcss.com 找到了解决方案:

这是我必须在 tailwind.config.js 文件中使用的语法:

module.exports = {清除:[]，主题: {延长: {}，},变体:{不透明度:({ after }) =>之后(['禁用'])},插件:[]，}

I am trying to use disabled variant in tailiwnd, but it does not seem to work. I do not know what to do.

I want to change button apperance if it is disabled, I have read the documentation and it says 'disabled' variant in not enabled by default. So I modify my tailwind.config.js and now it looks like this:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      opacity: ['disabled']
    }
  },
  plugins: [],
}

I have this code in my page, both buttons look the same:

  <div class="text-center space-x-8">
    <button type="button" class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none disabled:opacity-50" tabindex="-1">
      Submit
    </button>
    <button type="button" class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md disabled:opacity-50" disabled tabindex="-1">
      Submit
    </button>
  </div>

I already re-compiled my code and deleted all my browsers caché, but it still does not work. Do I have to do anything else for this to work?

解决方案

I found the solution by using play.tailwindcss.com:

This is the syntax I have to use in the tailwind.config.js file:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {
    opacity: ({ after }) => after(['disabled'])
  },
  plugins: [],
}

这篇关于TailwindCSS:禁用的变体不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！