启用prefix后Tailwind响应式类tw-md:hidden失效问题

当你在tailwind.config.js中设置prefix:"tw-"后，使用tw-md:hidden这类写法不会生效，因为Tailwind的响应式断点前缀（如md:）不需要加自定义前缀，正确的类名结构应该是断点前缀在前，自定义前缀在后。

正确写法示例 #

将原来的代码：

<div class="tw-md:hidden">hello</div>

修改为：

<div class="md:tw-hidden">hello</div>

配置文件无需修改 #

你的tailwind.config.js配置本身是正确的，保持如下即可：

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [],
  prefix:"tw-"
}

原理说明 #

自定义prefix是作用于Tailwind核心工具类（比如hidden）的，而响应式断点修饰符（sm:/md:/lg:等）属于独立的前缀，需要放在自定义prefix的前面，最终类名格式为[断点前缀]:[自定义前缀][工具类名]。

内容的提问来源于stack exchange，提问作者Hexgear