Tailwind 4.1 原生支持 text-shadow 类，≤3.x 需用 @designbycode/tailwindcss-text-shadow 插件；自定义须通过 theme.extend.textShadow，避免覆盖内置配置，并注意深色模式适配。
text-shadow 在 Tailwind 4.1 里已原生支持，但需确认版本
如果你用的是 Tailwind CSS 4.1（2026 年起默认稳定版），text-shadow 工具类已内置，无需插件。但多数项目仍卡在 3.x，此时调用 text-shadow 类会报错或无效果——不是你写错了，是版本不匹配。
验证方式：在任意元素上加 class="text-shadow"，打开浏览器开发者工具检查 computed 样式里是否有 text-shadow 声明。没有？大概率是版本太低。
- 运行
npm list tailwindcss或pnpm list tailwindcss确认是否 ≥ 4.1 - 若为 3.x，升级前先查 官方升级指南，注意
tailwind.config.js中content字段格式变更 - 升级后，
text-shadow、text-shadow-sm、text-shadow-lg等直接可用，且支持dark:text-shadow-md和响应式变体
用插件扩展 text-shadow（Tailwind ≤ 4.0 必须走这步）
主流选择是 @designbycode/tailwindcss-text-shadow，它比老版 tailwindcss-textshadow 更稳定、支持深色模式和响应式，且不污染全局 theme.textShadow 配置。
安装后，在 tailwind.config.js 的 plugins 数组里引入：
module.exports = {
plugins: [
require('@designbycode/tailwindcss-text-shadow'),
],
}
⚠️ 容易踩的坑：
- 别漏掉
require()的括号，写成require('@designbycode/...')而非字符串 - 插件必须放在
plugins数组里，不能塞进theme.extend或content - 若同时用了其他阴影插件（如旧版
tailwindcss-textshadow），删干净再装，否则 class 冲突
自定义 text-shadow 值要改 theme.extend.textShadow，不是 theme.textShadow
想加 text-shadow-xl 或覆盖默认模糊值？必须通过 theme.extend.textShadow 注入，否则会清空 Tailwind 内置的所有文本阴影配置（包括插件提供的基础类）。
正确写法：
module.exports = {
theme: {
extend: {
textShadow: {
xl: '0 8px 24px rgba(0, 0, 0, 0.4)',
'2xl': '0 12px 32px rgba(0, 0, 0, 0.5)',
none: 'none',
}
}
}
}
错误写法（会丢掉插件自带的 sm/md 等）：
// ❌ 不要这样写
theme: {
textShadow: { ... } // 覆盖了整个 theme.textShadow，插件失效
}
- 所有自定义 key（如
xl）会自动转成类名text-shadow-xl -
none是保留项，用于显式清除阴影，建议始终保留 - 值必须是合法 CSS
text-shadow语法，不支持函数（如theme('colors.blue.500')）直接嵌入，需手写 rgba 或颜色名
text-shadow 插件的 blur/x/y 控制类在实际项目中很少用
像 text-shadow-blur-2、text-shadow-x-1 这类动态控制类，听起来灵活，但上线后基本被弃用——原因很实在：
- 设计系统里文字阴影通常只有 2–3 种固定组合（比如标题用
text-shadow-lg，按钮文字用text-shadow-sm），没必要暴露原子级调节 - blur 值为 0–4 像素时人眼几乎看不出差异；x/y 偏移超过 2px 就容易让文字“发虚”，失去可读性
- 这些类会显著增大生成的 CSS 体积（每个值都生成独立规则），而实际使用率低于 5%
更务实的做法：在 theme.extend.textShadow 里预设好业务需要的全部组合，例如：
headline: '2px 2px 6px rgba(0, 0, 0, 0.3)', subtle: '0 1px 1px rgba(0, 0, 0, 0.15)', glow: '0 0 8px rgba(59, 130, 246, 0.4)'
然后用 text-shadow-headline 这种语义化类名，既可控又易维护。
真正容易被忽略的是深色模式下的对比度适配——比如 text-shadow 在 dark:bg-slate-900 上可能完全看不见，得额外加 dark:text-shadow-sm 或换浅色阴影值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
