css教程

利用tailwindcss-highlights给文字添加高亮效果

我的站长站 2024-08-18 人阅读

项目介绍

tailwindcss-highlights是一款开源小巧的CSS框架,tailwindcss-highlights可以快速的给文字添加高亮效果。

效果如下,我的站长站认为可以用来制作网站tags标签效果不错,所以收藏了。

利用tailwindcss-highlights给文字添加高亮效果

开源地址:https://github.com/jln13x/tailwindcss-highlights

官方网站:https://tailwindcss-highlights.hubatsch.dev/

使用方法

要安装该包,请运行

npm install -D tailwindcss-highlights

将插件添加到tailwind.config.js文件中:

module.exports = {
plugins: [
require('tailwindcss-highlights')),
]
}

使用highlight将默认突出显示(变体 1)添加到您的元素。

<p class="highlight">
Lorem Ipsum
</p>

要更改高亮颜色,请使用highlight-{color}。主题中的所有颜色(默认颜色和自定义颜色)以及任意值均可用。

<p class="highlight highlight-indigo-600">
Lorem Ipsum
</p>

您可以使用 来选择不同类型的变体highlight-variant-{value}。查看预览中可用的变体或使用您自己的变体,例如highlight-variant-[url(./path/to/custom-variant.SVG)]。

<p class="highlight highlight-indigo-600 highlight-variant-7">
Lorem Ipsum
</p>

部分变体来源:svgbox

使用highlight-spread--Utility 使高光扩散到某个方向。

highlight-spread-{size}- 向四面八方扩散

highlight-spread-{y,x}-{size}- 在 x 轴或 y 轴上展开

highlight-spread-{t,b,l,r}-{size}- 单独设置每个方向的价差

尺寸 价值:

0 0
none 0
sm -4px
md -8px
lg -12px
xl -16px

还支持 任意值。

<p class="highlight highlight-indigo-600 highlight-variant-7 highlight-spread-md">
Lorem Ipsum
</p>
<p class="highlight highlight-indigo-600 highlight-spread-x-sm highlight-spread-y-xl">
Lorem Ipsum
</p>
<p class="highlight highlight-indigo-600 highlight-spread-l-xl highlight-spread-t-sm">
Lorem Ipsum
</p>

其他示例:

此插件将高亮显示为::after伪元素,因此可以使用after:实用程序添加其他样式。

更改位置

<p class="highlight highlight-variant-5 after:translate-y-2 after:-translate-x-4">
Lorem Ipsum
</p>

为高光部分添加渐变

<p class="highlight highlight-variant-12 after:bg-gradient-to-tr after:from-amber-500 after:to-sky-500">
Lorem Ipsum
</p>

旋转高光

<p class="highlight highlight-variant-12 after:rotate-12">
Lorem Ipsum
</p>


最新更新