怎样在Tailwind CSS中配置无障碍访问专属CSS样式？-css教程-PHP中文网

tailwind 中直接写 .sr-only 类不生效，是因为其按需生成机制仅扫描 content 路径下 html/jsx 等源码中字面量出现的类名；手写 css 规则绕过构建流程，既无法触发响应式/暗色模式变体，也不被 purgecss 识别，正确方式是通过 tailwindcss/plugin 包裹 addutilities 注入。

怎样在tailwind css中配置无障碍访问专属css样式？

为什么直接加 `.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',
    }
  })
})

addUtilities 只接受扁平对象，不支持嵌套或伪类（如 &:hover）。需要 hover 版本得手动展开：'.sr-only:hover' 或改用 addComponents。