如何使用TailwindCSS实现文本阴影效果

在网页设计中，文本阴影可以让标题更有层次感，但在TailwindCSS的默认工具类里并没有text-shadow这样的类。我们可以通过配置、任意值或插件来补充这个能力。

为什么TailwindCSS默认没有文本阴影

TailwindCSS的核心思想是提供高频使用的原子类，而文本阴影在不同设计里差异很大，官方选择不内置，留给用户自己扩展。实际开发中我们有三种常用方案。

方案一：在配置文件中扩展

打开项目里的 tailwind.config.js，在 theme.extend 里增加 textShadow 字段，之后就能用类似 drop-shadow 的写法生成类。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      textShadow: {
        sm: '1px 1px 2px rgba(0,0,0,0.3)',
        glow: '0 0 8px rgba(255,255,255,0.8)'
      }
    }
  }
}

配置后，在HTML里直接使用 text-shadow-sm 或 text-shadow-glow 即可。

方案二：使用任意值语法

如果不想改配置，可以用中括号写任意值，TailwindCSS会原样生成样式。

<h1 class="text-2xl font-bold [text-shadow:2px_2px_4px_rgba(0,0,0,0.5)]">
  带阴影的标题
</h1>

注意下划线代表空格，这样写适合临时调整。

方案三：使用插件

社区有 tailwindcss-textshadow 插件，安装后在配置里引入，就能用现成的类。

npm install tailwindcss-textshadow

// tailwind.config.js
module.exports = {
  plugins: [
    require('tailwindcss-textshadow')
  ]
}

小结

以上三种方式都能用TailwindCSS实现文本阴影。小项目推荐任意值，长期维护建议配文件或插件，保持代码整洁。

TailwindCSS文本阴影text-shadow修改时间：2026-07-27 19:57:10