Tailwind 中直接写 .sr-only 类不生效，是因为其按需生成机制仅扫描 content 路径下 HTML/JSX 等源码中字面量出现的类名；手写 CSS 规则绕过构建流程，既无法触发响应式/暗色模式变体，也不被 PurgeCSS 识别，正确方式是通过 tailwindcss/plugin 包裹 addUtilities 注入。
为什么直接加 .sr-only 类不生效？
Tailwind 的按需生成机制只扫描 content 路径中实际出现的类名字符串。你在 CSS 文件里手写 .sr-only { position: absolute; clip: rect(0 0 0 0); }，但 HTML 模板里没写这个类，它压根不会进最终 CSS；即使写了，也绕过了响应式、dark:、hover: 等变体支持。
真正安全的方式是用插件注入——addUtilities 是唯一被 Tailwind 构建流程识别并正确处理的 API。
如何用 plugin + addUtilities 正确添加 .sr-only 和 .not-sr-only？
必须用 tailwindcss/plugin 包裹函数，否则 addUtilities 不可用，构建会报错：
- ❌ 错误：裸对象导出
module.exports = { '.sr-only': { position: 'absolute' } }
- ❌ 错误：裸函数导出
module.exports = ({ addUtilities }) => { addUtilities(...) }
- ✅ 正确：
const plugin = require('tailwindcss/plugin')
module.exports = plugin(({ addUtilities }) => {
addUtilities({
'.sr-only': {
position: 'absolute',
width: '1px',
height: '1px',
padding: '0',
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0, 0, 0, 0)',
whiteSpace: 'nowrap',
borderWidth: '0',
},
'.not-sr-only': {
position: 'static',
width: 'auto',
height: 'auto',
padding: '0',
margin: '0',
overflow: 'visible',
clip: 'auto',
whiteSpace: 'normal',
borderWidth: 'initial',
}
})
})
module.exports = { '.sr-only': { position: 'absolute' } }
module.exports = ({ addUtilities }) => { addUtilities(...) }
const plugin = require('tailwindcss/plugin')
module.exports = plugin(({ addUtilities }) => {
addUtilities({
'.sr-only': {
position: 'absolute',
width: '1px',
height: '1px',
padding: '0',
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0, 0, 0, 0)',
whiteSpace: 'nowrap',
borderWidth: '0',
},
'.not-sr-only': {
position: 'static',
width: 'auto',
height: 'auto',
padding: '0',
margin: '0',
overflow: 'visible',
clip: 'auto',
whiteSpace: 'normal',
borderWidth: 'initial',
}
})
})
addUtilities 只接受扁平对象，不支持嵌套或伪类（如 &:hover）。需要 hover 版本得手动展开：'.sr-only:hover' 或改用 addComponents。
怎样让自定义无障碍类支持 dark: 和响应式前缀？
Tailwind 不会自动为自定义类添加变体，必须显式声明：
- 响应式要写完整媒体查询键：
'@media (min-width: 768px)': { '.md\:sr-only': { ... } }（注意冒号前双反斜杠转义）
- 深色模式需组合选择器：
'.dark .dark\:sr-only': { position: 'absolute', ... }
- 如果要用
theme() 读取颜色等配置，确保对应路径已在 theme.extend 中声明，否则返回 undefined
'@media (min-width: 768px)': { '.md\:sr-only': { ... } }（注意冒号前双反斜杠转义）'.dark .dark\:sr-only': { position: 'absolute', ... }
theme() 读取颜色等配置，确保对应路径已在 theme.extend 中声明，否则返回 undefined
例如，想在深色模式下让某个可聚焦元素视觉上更明显，不能只靠 focus:ring-blue-500，还得补一句 dark:focus:ring-blue-300——否则焦点环在暗色背景上可能完全不可见。
最容易被忽略的三件事
插件加完后，content 数组必须覆盖所有使用该类的文件路径，否则类根本不会生成——哪怕配置全对，漏了 ./src/**/*.{tsx} 就等于没写。
立即学习“前端免费学习笔记（深入）”；
darkMode: 'class' 必须写在 tailwind.config.js 顶层，不是 theme.extend 里；且 元素必须有 dark 类， 上加无效。
所有涉及可访问性的交互状态（focus、focus-visible、disabled）都得手动加变体，Tailwind 默认只给基础工具类（如 text-、bg-）开这些开关，sr-only 这类辅助类不会自动获得。
