项目介绍
tailwindcss-highlights是一款开源小巧的CSS框架，tailwindcss-highlights可以快速的给文字添加高亮效果。
效果如下，我的站长站认为可以用来制作网站tags标签效果不错，所以收藏了。
开源地址：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>