TailwindCSS 链接标签 - CSS

TailwindCSS 是一个为开发者提供快速构建美观UI的CSS框架。其中一个很有用的特性是它提供了一系列的链接样式。

链接样式

基础链接

使用 .underline 样式可以添加下划线来强调链接。

<a href="#" class="underline">基础链接</a>

颜色链接

使用 TailwindCSS 的颜色类可以通过颜色来区分链接。可以使用 .text-{color}-600 样式来使链接具有明确的颜色。

<a href="#" class="text-blue-600">颜色链接</a>
<a href="#" class="text-green-600">颜色链接</a>
<a href="#" class="text-yellow-600">颜色链接</a>

带背景链接

使用 .bg-{color}-600 样式可以为一个链接添加一个背景色。可以使用 .text-white 样式来使文本颜色更突出。

<a href="#" class="bg-blue-600 text-white">带背景链接</a>
<a href="#" class="bg-green-600 text-white">带背景链接</a>
<a href="#" class="bg-yellow-600 text-white">带背景链接</a>

圆形链接

使用 .rounded-full 样式可以将链接的边角变成圆形。

<a href="#" class="bg-blue-600 text-white rounded-full p-2">圆形链接</a>

链接按下效果

使用 .hover:opacity-75 样式可以使链接在被鼠标悬停时变得半透明。

<a href="#" class="bg-blue-600 text-white rounded-full p-2 hover:opacity-75">链接按下效果</a>

总结

TailwindCSS 提供了一系列链接样式，可以让开发者很容易地创建出漂亮的链接。以上是一些常用的样式，你可以通过组合不同的样式来创建自己的样式。