TailwindCSS：禁用的变体不起作用

Question

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

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

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

我的页面中有此代码，两个按钮看起来都一样：

  <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>

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

Answer 1

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

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

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

Answer 2

我遇到了这个问题，并将 Tailwind CSS 更新到最新版本修复了它。

npm install tailwindcss@latest postcss@latest autoprefixer@latest

链接如下：升级指南 -Tailwind CSS它将改变您可能需要注意的其他事情。