TailwindCSS：禁用的变体不起作用

Question

我正在尝试在 tailiwnd 中使用 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>

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

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

这里是链接：Upgrade Guide -Tailwind CSS 它会改变你可能想知道的其他事情。

Answer 3

现在可以使用新的即时 (JIT) 编译器默认启用所有变体。无需在每次想要添加新变体时更新 Tailwind 配置文件。

1.升级到 TailwindCSS 2.1 或更高版本

npm i -D tailwindcss@latest

2。在您的配置中启用 JIT 模式

// tailwind.config.js
module.exports = {
 mode: 'jit',
  purge: [
    // ...
  ],
  theme: {
    // ...
  }
  // ...
}

3.明确设置清除配置中的所有文件

JIT 编译器将查看所有这些文件（并且仅查看这些文件）以按需生成 CSS。如果此处未列出文件，则不会生成 CSS。

module.exports = {
  mode: 'jit',
 // These paths are just examples, customize them to match your project structure
 purge: [
   './public/**/*.html',
   './src/**/*.{js,jsx,ts,tsx,vue}',
 ],
  theme: {
    // ...
  }
  // ...
}

文档：https://tailwindcss.com/docs/just-in-time-mode

Answer 4

对我来说，这是因为我试图在 <div> 元素上使用 disabled。

将元素更改为 <button> 解决了该问题。