Tailwind 默认不启用 text-shadow 工具类，需在 tailwind.config.js 的 theme.extend.textShadow 中手动配置；禁用非官方插件，注意命名逻辑、响应式用法及深色模式适配。
text-shadow 在 Tailwind 中默认不可用，必须手动启用
Tailwind 默认不生成 text-shadow 工具类，不是漏装或配置错，而是设计如此——它只包含“高频、安全、跨浏览器稳定”的样式。想用文字阴影，得主动在 tailwind.config.js 里加进去。
实操建议：
- 打开
tailwind.config.js，在theme.extend下添加textShadow（注意拼写，不是textShadow的复数或驼峰变体） - 推荐用对象形式定义，方便后续扩展：
theme: { extend: { textShadow: { sm: '0 1px 2px rgba(0, 0, 0, 0.1)', DEFAULT: '0 2px 4px rgba(0, 0, 0, 0.2)', lg: '0 4px 8px rgba(0, 0, 0, 0.3)', none: 'none', } } } - 别直接改
theme.textShadow（不带extend），否则会覆盖内置的其他文本相关配置
插件方式：使用 @tailwindcss/typography 或自定义插件？
官方没有叫 “text-shadow 插件” 的独立包。网上搜到的 @tailwindcss/text-shadow 是社区非官方、已归档、不维护的项目，不要安装。它依赖旧版 PostCSS，和 Tailwind v3.3+ 冲突，装了会导致构建失败或样式不生效。
正确做法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 用上一节说的手动
theme.extend.textShadow—— 简单、可控、无额外依赖 - 如果项目已用
@tailwindcss/typography，它内部确实用了text-shadow（比如引用块的淡色文字），但那是封装在 prose 类里的，不对外暴露工具类，不能拿来给任意文字加阴影
class 名命名与实际 CSS 值的对应关系容易搞反
你写了 text-shadow-sm，但生成的 CSS 是 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) —— 这里的 sm 指的是“阴影尺寸小”，不是“文字尺寸小”。很多人误以为 text-shadow-sm 会作用于 text-sm 文字，其实完全无关。
常见混淆点：
-
text-shadow-none不等于没写这个 class，它显式设为none，能覆盖父级继承来的阴影 - 多个阴影值不能用空格分隔（如
text-shadow-sm md），Tailwind 不支持组合；要多层阴影，得自己写内联 style 或用插件生成复合值 - 响应式前缀如
md:text-shadow-lg有效，但注意：移动端默认没阴影，中屏才加，别假设它“渐进增强”
性能和可访问性隐患：别在大段正文或按钮文字上滥用
text-shadow 看似轻量，但在高密度文本（比如列表项、表格单元格）或低配设备上，叠加渲染会轻微拖慢重绘。更关键的是可访问性问题：
- 浅色文字 + 浅色背景 + 模糊阴影 = 对比度暴跌，可能低于 WCAG 4.5:1 要求
- 用
rgba(0,0,0,0.1)这类低透明度黑影，在深色模式下可能变成“灰蒙蒙一团”，反而降低辨识度 - 动画中动态切换
text-shadow（比如 hover 效果）易引发视觉震动，对光敏用户不友好
真要用，优先选高对比、硬边、单层阴影，例如 text-shadow: 0 1px 0 currentColor 这种“描边感”方案，比模糊投影更稳。
最常被忽略的一点：Tailwind 的 text-shadow 工具类不会自动适配深色模式。如果你用 dark:text-shadow-white，得确保对应的 textShadow 配置里定义了 white 这个 key，否则 class 不生成。
