# @designbycode/tailwindcss-text-stroke 中文文档 规范地址：https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/ 版本：1\.3\.0 npm 元数据更新时间：2024-11-22T14:04:54.042Z 中文译文更新时间：2026-11-12T01:15:53.272Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40designbycode/tailwindcss-text-stroke 原文对照：https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/?lang=original 项目主页：https://github.com/DesignByCode/tailwindcss-text-stroke#readme 源码仓库：https://github.com/DesignByCode/tailwindcss-text-stroke ## 关键信息（来自 npm 元数据） - 包体积（解压后）：17 kB，7 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：tailwindcss \>=3\.0\.0 \|\| \>=3\.0\.0-alpha\.1 - 首次发布：2023-08-04T19:30:19.734Z - 最新版本发布：2024-11-22T14:04:53.817Z - 近 30 天下载量：6132（2026-10-12 至 2026-11-10，npm 官方下载统计） - 已发布版本数：7（近 12 个月 0 个） ## 中文简介 用于中风的尾风工具 ## 安装 ```sh npm install @designbycode/tailwindcss-text-stroke ``` 也可以使用：`pnpm add @designbycode/tailwindcss-text-stroke`、`yarn add @designbycode/tailwindcss-text-stroke`、`bun add @designbycode/tailwindcss-text-stroke` ## README [![Title banner](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/banner.svg)](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/#readme-installation) ## 尾风 CSS 文本插件 [![npm version](https://badge.fury.io/js/@designbycode%2Ftailwindcss-text-stroke.svg)](https://badge.fury.io/js/@designbycode%2Ftailwindcss-text-stroke) ![npm](https://img.shields.io/npm/dt/%40designbycode/tailwindcss-text-stroke) ![NPM](https://img.shields.io/npm/l/%40designbycode%2Ftailwindcss-text-stroke) ![npm bundle size](https://img.shields.io/bundlephobia/min/%40designbycode%2Ftailwindcss-text-stroke) ![ts](https://badgen.net/badge/Built%20With/TypeScript/blue) [![GitHub stars](https://img.shields.io/github/stars/DesignByCode/tailwindcss-text-stroke?style=social)](https://github.com/DesignByCode/tailwindcss-text-stroke/stargazers) [![NPM](https://nodei.co/npm/@designbycode/tailwindcss-text-stroke.png)](https://nodei.co/npm/@designbycode/tailwindcss-text-stroke/) 使用此插件在您的 Tailwind CSS 工程中添加自定义文本中键功能 。 它允许您使用基于 WebKit 的浏览器支持的 CSS 属性在文本周围应用类似大纲的中键 . ## 目录 - [安装](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/#readme-installation) - [使用 pnpm](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/#readme-using-pnpm) - [使用 npm](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/#readme-using-npm) - [使用线条](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/#readme-using-yarn) - [设置](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/#readme-setup) - [使用](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/#readme-use) - [示例](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/#readme-example) - [带有修饰符](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/#readme-with-modifiers) - [捐款](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/#readme-contributing) - [许可证](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/#readme-license) - [作者](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/#readme-author) - [承认](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/#readme-acknowledgments) ## 安装 要使用此插件, 您需要通过 pnpm, npm 或纱线安装 . #### 使用 pnpm ```bash pnpm add @designbycode/tailwindcss-text-stroke ``` #### 使用 npm ```bash npm install @designbycode/tailwindcss-text-stroke ``` #### 使用线条 ```bash yarn add @designbycode/tailwindcss-text-stroke ``` 首先,确保您在您的项目中安装了 Tailwind CSS 。 如果没有,则按照正式文件安装. 下一步,需要您 Tailwind CSS 配置文件中的插件(通常命名为尾风.config.js) . ## 设置 1. 首先,确保您在您的项目中安装了 Tailwind CSS 。 如果没有,则按照正式文件安装. 2. 下一步,需要您 Tailwind CSS 配置文件中的插件(通常命名为尾风.config.js) . ```javascript module.exports = { // ...other configurations plugins: [ // ...other plugins require("@designbycode/tailwindcss-text-stroke"), ], }; ``` 一旦您需要插件并添加到插件阵列中,您就可以在您的 HTML 模板中使用新的文本中键工具. ## 使用 Text Stroke 插件为具有中风效果的文本样式提供以下工具类: - `.text-stroke`: 设置默认文本中键样式的基础组件。 您可以使用 CSS 变量来覆盖这些样式 . - `.text-stroke-{value}`: 将中风宽度设置为指定的 {value}。 可用的选项在文本StrokeWidth主题配置中定义. - `.text-stroke-{color}`: 将自定义颜色应用到文本中键上. {color} 应匹配您 Tailwind CSS 彩色调色板中的颜色 . - `.text-stroke-fill-{color}`: 将自定义的填充颜色应用到文本中键上。 {color} 应匹配您 Tailwind CSS 彩色调色板中的颜色 . ### 示例 以下是您如何使用工具类应用图像口罩的例子: ```html

Hello, TailwindCSS

``` ### 带有修饰符 ```html

Hello, TailwindCSS

``` ## 捐款 欢迎为此插件贡献 ! 如果遇到任何问题,有特性请求,或想要改进插件,可以随意创建拉出请求,或在GitHub寄存器上提交问题. ## 许可证 本项目根据以下规定获得许可证: [麻省理工学院](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/LICENCE) 驾照 - 看 [自由主义](https://npmcn.com/package/%40designbycode/tailwindcss-text-stroke/LICENCE) 详细文件. ## 作者 ![Claude Myburgh](https://github.com/designbycode.png?size=130) ## 克劳德·米堡 - 吉图布: [@ dedesignbycode( 代号)](https://github.com/designbycode) - 无 : [@ dedesignbycode (英语)](https://www.npmjs.com/~designbycode_) ## 承认 - 这个插件的灵感来自使用Tailwind CSS的网页开发者的需求. - 特别感谢Tailwind CSS团队创造了这样一个惊人的框架. ## 常见问题 ### @designbycode/tailwindcss-text-stroke 是什么？ 用于中风的尾风工具 ### 如何安装 @designbycode/tailwindcss-text-stroke？ 在项目目录运行 npm install @designbycode/tailwindcss-text-stroke，或使用 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-stroke 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @designbycode/tailwindcss-text-stroke 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @designbycode/tailwindcss-text-stroke 可以商用吗？ @designbycode/tailwindcss-text-stroke 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @designbycode/tailwindcss-text-stroke 的下载量有多少？ 根据 npm 官方下载统计，@designbycode/tailwindcss-text-stroke 在 2026/10/12 – 2026/11/10 这 30 天内被下载 6,132 次，日均约 204 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @designbycode/tailwindcss-text-stroke 还在维护吗？ 最新版本 1\.3\.0 发布于 2024/11/22（2 年前）；至今共发布 7 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/08/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。