尾风 CSS 文本阴影插件
尾风CSS 文本阴影插件 扩展默认工具类集 尾风 CSS 为您的网络项目提供方便的文本阴影定制。 使用此插件, 您可以使用工具应用自定义文本阴影 分类或根据预定义的步骤和颜色调色板定义自己的文本阴影变量.
目录
安装
要使用此插件, 您需要在您的工程中安装 Tailwind CSS 。 如果您还没有安装 Tailwind CSS,请遵循这些步骤:
使用 pnpm
pnpm add @designbycode/tailwindcss-text-shadow
使用 npm
npm install @designbycode/tailwindcss-text-shadow
使用线条
yarn add @designbycode/tailwindcss-text-shadow
设置
- 将插件添加到您的 Tailwind CSS 配置 在您的尾风. config.js文件中,将插件添加到插件阵列中 :
module.exports = {
// ...other configurations
plugins: [
// ...other plugins
require("@designbycode/tailwindcss-text-shadow"),
],
}
默认配置样式
- 如果默认样式不适合您的偏好, 您可以使用以下配置选项不费力地自定义这些样式
module.exports = {
// ...other configurations
require("@designbycode/tailwindcss-text-shadow"
)
({
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: "3px",
shadowOffsetX: "2px",
shadowOffsetY: "2px",
})
使用
视频教学
在下面的视频中看到动作插件 。 @ @ info
应用文本阴影
一旦插件被添加到您的 Tailwind CSS 配置中,您就可以使用所提供的工具类对您的 HTML 元素应用文本阴影 .
<h1 class="text-4xl text-shadow ">Hello, Tailwind CSS!</h1>
文本阴影模糊的修改符
要让扩展或模糊 更大的增加 .text-shadow-blur-{value}
<h1 class="text-4xl text-shadow text-shadow-blur-2 ">Hello, Tailwind CSS!</h1>
文本阴影 x 和 Y 修改符
可用 Xy 轴移动阴影 .text-shadow-x-{value} 财务报告和审定财务报表 .text-shadow-y-{value}
<h1 class="text-4xl text-shadow text-shadow-x-md text-shadow-y-lg text-shadow-blur-2 text-shadow-red">Hello, Tailwind CSS!</h1>
文本阴影颜色修改器
<h1 class="text-4xl text-shadow text-shadow-x-md text-shadow-y-lg text-shadow-blur-2 text-shadow-red-500">Hello, Tailwind CSS!</h1>
在上述例子中 <h1> 元素将有一个红色文本阴影, x 偏移为 3px, y 偏移为 4px, 模糊半径为 2px 。 文本阴影类允许文本阴影样式,而文本阴影-x-md,
文本阴影-y-lg,以及
文本-阴影-blur-2类分别自定义了水平偏移,垂直偏移和模糊半径.
文本阴影颜色不透明
要改变文本- 阴影- 颜色的不透明性, 请使用以下方法 :
<h1 class="text-shadow text-shadow-red-500/10">Hello, Tailwind CSS!</h1>
<!-- with arbitrary values -->
<h1 class="text-shadow text-shadow-red-[rgb(0,0,0,0.5)]">Hello, Tailwind CSS!</h1>
<!-- or arbitrary with / -->
<h1 class="text-shadow text-shadow-red-[gray]/20">Hello, Tailwind CSS!</h1>
3⁄4 ̄ ̧漯B 新的实验长阴影特性
module.exports = {
// ...other configurations
require("@designbycode/tailwindcss-text-shadow"
)
({
experimental: true, // 👈
})
注意最新版本不再需要实验了
长文本阴影
长的阴影是一个新的实验特征,我补充。 它产生影子 堆积到任何数量。 班级是 .text-shadow-sm 或者说 .text-shadow-[steps]
<h1 class="text-shadow-sm text-shadow-blur-2 text-shadow-red">Hello, Tailwind CSS!</h1>
<!-- or -->
<h1 class="text-shadow-[1000]">Hello, Tailwind CSS!</h1>
自定义
您可以通过修改您的尾风. config.js文件中的主题来自定义可用的文本阴影选项. textShadowSteps属性 。 此对象中定义的步骤将用来生成文本每个方面的工具类 阴影.
示例
// 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 或随所欲. 在主题设置中更改它 .
// tailwind.config.js
module.exports = {
theme: {
prefix: 'ts',
},
}
使用
<div class="ts-lg ts-indigo-500"></div>
捐款
欢迎为此插件贡献 ! 如果遇到任何问题,有特性请求,或想要改进插件,可以随意创建拉出请求,或在GitHub寄存器上提交问题.
贡献者
许可证
本项目根据以下规定获得许可证: 麻省理工学院 驾照 - 看 自由主义 详细文件.
作者
克劳德·米堡
承认
- 这个插件的灵感来自使用Tailwind CSS的网页开发者的需求.
- 特别感谢Tailwind CSS团队创造了这样一个惊人的框架.