Tailwind CSS 实用技巧集锦

1. 使用 @apply 提取组件

.btn-primary {
  @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700;
}

<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- 移动端全宽，平板一半，桌面三分之一 -->
</div>

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  自动适配暗色模式
</div>

<div class="group">
  <button>Hover me</button>
  <span class="hidden group-hover:block">显示了！</span>
</div>

<div class="top-[117px] bg-[#1da1f2]">
  使用任意值
</div>

Tailwind CSS 的实用优先理念让样式开发变得高效且可维护。