# @designbycode/tailwindcss-text-shadow 中文文档
规范地址：https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/
版本：2\.2\.1
npm 元数据更新时间：2024-11-20T18:03:19.058Z
中文译文更新时间：2026-11-13T05:47:45.943Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40designbycode/tailwindcss-text-shadow
原文对照：https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/?lang=original
项目主页：https://github.com/DesignByCode/tailwindcss-text-shadow#readme
源码仓库：https://github.com/DesignByCode/tailwindcss-text-shadow
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：22.8 kB，8 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：tailwindcss \>=3\.0\.0 \|\| \>=3\.0\.0-alpha\.1
- 首次发布：2023-08-04T23:26:43.002Z
- 最新版本发布：2024-11-20T18:03:18.895Z
- 近 30 天下载量：2173（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 0 个）
## 中文简介
用于中风的尾风工具
## 安装
```sh
npm install @designbycode/tailwindcss-text-shadow
```
也可以使用：`pnpm add @designbycode/tailwindcss-text-shadow`、`yarn add @designbycode/tailwindcss-text-shadow`、`bun add @designbycode/tailwindcss-text-shadow`
## README
[](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-installation)
## 尾风 CSS 文本阴影插件
[](https://nodei.co/npm/@designbycode/tailwindcss-text-shadow/)
[](https://badge.fury.io/js/@designbycode%2Ftailwindcss-text-shadow)    [](https://github.com/DesignByCode/tailwindcss-text-shadow/actions/workflows/test.yaml)  [](https://github.com/DesignByCode/tailwindcss-text-shadow/stargazers)
尾风CSS **文本阴影插件** 扩展默认工具类集 **尾风 CSS** 为您的网络项目提供方便的文本阴影定制。 使用此插件, 您可以使用工具应用自定义文本阴影 分类或根据预定义的步骤和颜色调色板定义自己的文本阴影变量.
## 目录
- [安装](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-installation)
- [使用 pnpm](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-using-pnpm)
- [使用 npm](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-using-npm)
- [使用线条](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-using-yarn)
- [设置](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-setup)
- [默认配置样式](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-default-configuration-styles)
- [使用](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-use)
- [视频教学](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-video-tutorial)
- [应用文本阴影](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-apply-text-shadows)
- [文本阴影模糊的修改符](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-text-shadow-blur-modifier)
- [文本阴影 x 和 Y 修改符](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-text-shadow-x-and-y-modifiers)
- [文本阴影颜色修改器](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-text-shadow-color-modifier)
- [文本阴影颜色不透明](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-text-shadow-color-opacity)
- [长影](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-long-text-shadow)
- [自定义](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-customization)
- [示例](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-example)
- [捐款](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-contributing)
- [许可证](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-license)
- [作者](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-author)
- [承认](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/#readme-acknowledgments)
## 安装
要使用此插件, 您需要在您的工程中安装 Tailwind CSS 。 如果您还没有安装 Tailwind CSS,请遵循这些步骤:
#### 使用 pnpm
```bash
pnpm add @designbycode/tailwindcss-text-shadow
```
#### 使用 npm
```bash
npm install @designbycode/tailwindcss-text-shadow
```
#### 使用线条
```bash
yarn add @designbycode/tailwindcss-text-shadow
```
### 设置
1. 将插件添加到您的 Tailwind CSS 配置 在您的尾风. config.js文件中,将插件添加到插件阵列中 :
```javascript
module.exports = {
// ...other configurations
plugins: [
// ...other plugins
require("@designbycode/tailwindcss-text-shadow"),
],
}
```
### 默认配置样式
2. 如果默认样式不适合您的偏好, 您可以使用以下配置选项不费力地自定义这些样式
```javascript
module.exports = {
// ...other configurations
require("@designbycode/tailwindcss-text-shadow"
)
({
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: "3px",
shadowOffsetX: "2px",
shadowOffsetY: "2px",
})
```
## 使用
### 视频教学
在下面的视频中看到动作插件 。 @ @ info
[](https://youtu.be/Xb0wAMAGAHE)
### 应用文本阴影
一旦插件被添加到您的 Tailwind CSS 配置中,您就可以使用所提供的工具类对您的 HTML 元素应用文本阴影 .
```html
Hello, Tailwind CSS!
```
### 文本阴影模糊的修改符
要让扩展或模糊 更大的增加 `.text-shadow-blur-{value}`
```html
Hello, Tailwind CSS!
```
### 文本阴影 x 和 Y 修改符
可用 Xy 轴移动阴影 `.text-shadow-x-{value}` 财务报告和审定财务报表 `.text-shadow-y-{value}`
```html
Hello, Tailwind CSS!
```
### 文本阴影颜色修改器
```html
Hello, Tailwind CSS!
```
在上述例子中 `` 元素将有一个红色文本阴影, x 偏移为 3px, y 偏移为 4px, 模糊半径为 2px 。 文本阴影类允许文本阴影样式,而文本阴影-x-md, 文本阴影-y-lg,以及 文本-阴影-blur-2类分别自定义了水平偏移,垂直偏移和模糊半径.
### 文本阴影颜色不透明
要改变文本- 阴影- 颜色的不透明性, 请使用以下方法 :
```html
Hello, Tailwind CSS!
Hello, Tailwind CSS!
Hello, Tailwind CSS!
```
> **3⁄4 ̄ ̧漯B** 新的实验长阴影特性
```javascript
module.exports = {
// ...other configurations
require("@designbycode/tailwindcss-text-shadow"
)
({
experimental: true, // 👈
})
```
> 注意最新版本不再需要实验了
### 长文本阴影
长的阴影是一个新的实验特征,我补充。 它产生影子 堆积到任何数量。 班级是 `.text-shadow-sm` 或者说 `.text-shadow-[steps]`
```html
Hello, Tailwind CSS!
Hello, Tailwind CSS!
```
[](https://youtu.be/quyJpz5dtcs)
## 自定义
您可以通过修改您的尾风. config.js文件中的主题来自定义可用的文本阴影选项. textShadowSteps属性 。 此对象中定义的步骤将用来生成文本每个方面的工具类 阴影.
### 示例
```javascript
// tailwind.config.js
module.exports = {
theme: {
prefix: 'text-shadow',
textShadowSteps: {
sm: "1px",
md: "2px",
lg: "3px",
xl: "4px",
0: "0",
1: "1px",
2: "2px",
3: "3px",
4: "4px",
},
},
}
```
在这个例子中,我们定制了文本 ShadowSteps 对象,只有 sm, md, lg,和 xl 四个步骤,并删除了其余的. 插件将相应生成工具类 .
### 更改类名前缀
如果你不喜欢用类名 `.text-shadow` 或者在应用程序中出现冲突,你可以把它修改成任何你想要的 `.textShadow`, (中文(简体) ), `ts` 或随所欲. 在主题设置中更改它 .
```typescript
// tailwind.config.js
module.exports = {
theme: {
prefix: 'ts',
},
}
```
### 使用
```html
```
## 捐款
欢迎为此插件贡献 ! 如果遇到任何问题,有特性请求,或想要改进插件,可以随意创建拉出请求,或在GitHub寄存器上提交问题.
### 贡献者
[](https://github.com/DesignByCode/tailwindcss-text-shadow/graphs/contributors)
## 许可证
本项目根据以下规定获得许可证: [麻省理工学院](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/LICENCE) 驾照 - 看 [自由主义](https://npmcn.com/package/%40designbycode/tailwindcss-text-shadow/LICENCE) 详细文件.
## 作者
## 克劳德·米堡
- 吉图布: [@ dedesignbycode( 代号)](https://github.com/designbycode)
- 无 : [@ dedesignbycode (英语)](https://www.npmjs.com/~designbycode_)
## 承认
- 这个插件的灵感来自使用Tailwind CSS的网页开发者的需求.
- 特别感谢Tailwind CSS团队创造了这样一个惊人的框架.
## 常见问题
### @designbycode/tailwindcss-text-shadow 是什么？
用于中风的尾风工具
### 如何安装 @designbycode/tailwindcss-text-shadow？
在项目目录运行 npm install @designbycode/tailwindcss-text-shadow，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：tailwindcss（\>=3\.0\.0 \|\| \>=3\.0\.0-alpha\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @designbycode/tailwindcss-text-shadow 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @designbycode/tailwindcss-text-shadow 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @designbycode/tailwindcss-text-shadow 可以商用吗？
@designbycode/tailwindcss-text-shadow 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @designbycode/tailwindcss-text-shadow 的下载量有多少？
根据 npm 官方下载统计，@designbycode/tailwindcss-text-shadow 在 2026/10/12 – 2026/11/10 这 30 天内被下载 2,173 次，日均约 72 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @designbycode/tailwindcss-text-shadow 还在维护吗？
最新版本 2\.2\.1 发布于 2024/11/21（2 年前）；至今共发布 20 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/08/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。