尾风 CSS 文本插件
使用此插件在您的 Tailwind CSS 工程中添加自定义文本中键功能 。 它允许您使用基于 WebKit 的浏览器支持的 CSS 属性在文本周围应用类似大纲的中键 .
目录
安装
要使用此插件, 您需要通过 pnpm, npm 或纱线安装 .
使用 pnpm
pnpm add @designbycode/tailwindcss-text-stroke
使用 npm
npm install @designbycode/tailwindcss-text-stroke
使用线条
yarn add @designbycode/tailwindcss-text-stroke
首先,确保您在您的项目中安装了 Tailwind CSS 。 如果没有,则按照正式文件安装.
下一步,需要您 Tailwind CSS 配置文件中的插件(通常命名为尾风.config.js) .
设置
-
首先,确保您在您的项目中安装了 Tailwind CSS 。 如果没有,则按照正式文件安装.
-
下一步,需要您 Tailwind CSS 配置文件中的插件(通常命名为尾风.config.js) .
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 彩色调色板中的颜色 .
示例
以下是您如何使用工具类应用图像口罩的例子:
<h1 class="text-7xl font-black text-stroke ">
Hello, TailwindCSS
</h1>
带有修饰符
<h1 class="text-7xl font-black text-stroke text-stroke-indigo-200 text-stroke-fill-indigo-600">
Hello, TailwindCSS
</h1>
捐款
欢迎为此插件贡献 ! 如果遇到任何问题,有特性请求,或想要改进插件,可以随意创建拉出请求,或在GitHub寄存器上提交问题.
许可证
本项目根据以下规定获得许可证: 麻省理工学院 驾照 - 看 自由主义 详细文件.
作者
克劳德·米堡
承认
- 这个插件的灵感来自使用Tailwind CSS的网页开发者的需求.
- 特别感谢Tailwind CSS团队创造了这样一个惊人的框架.