TailwindCSS：禁用的变体不起作用

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

如果按钮被禁用，我想更改按钮外观，我已阅读文档，它说默认情况下未启用“禁用”变体。所以我修改了 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>

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

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

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

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