Tailwind CSS如何实现文字阴影效果_使用text-shadow插件扩展CSS视觉-css教程-PHP中文网

tailwind 默认不启用 text-shadow 工具类，需在 tailwind.config.js 的 theme.extend.textshadow 中手动配置；禁用非官方插件，注意命名逻辑、响应式用法及深色模式适配。

tailwind css如何实现文字阴影效果_使用text-shadow插件扩展css视觉

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 文字，其实完全无关。