[Tailwind] Style Elements on hover and focus with Tailwind’s State Variants

最新推荐文章于 2025-04-29 15:00:51 发布

转载最新推荐文章于 2025-04-29 15:00:51 发布 · 102 阅读

本文介绍了一种针对特定元素状态应用样式的技巧。通过实例展示了如何为链接和按钮的不同交互状态设置样式，例如悬停和聚焦效果。这有助于提高用户体验并增强网站的视觉吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

In this lesson, we learn how to target specific states of elements and apply styles only when those states are triggered.

  <p class="mb-4">
    I am a <a class="text-purple hover:text-orange focus:bg-yellow" href="#">text link</a>.
  </p>
  <button class="block w-full py-2 px-4 rounded-sm mb-2 text-white bg-purple-light hover:bg-black" tabindex="0">
    Click me
  </button>