复用样式

管理重复并创建可重用的抽象。

Tailwind 鼓励以实用程序为主的工作流程，其中设计仅使用低级实用程序类来实现。这是避免过早抽象和随之而来的痛苦点的强大方法。

但是当然，随着项目的增长，您不可避免地会发现自己重复使用常见的实用程序组合，在许多不同的地方重新创建相同的设计。

例如，在下面的模板中，您可以看到每个头像图像的实用程序类被重复了五次： 复用样式 - 图1

  1. <div>
  2.   <div class="flex items-center space-x-2 text-base">
  3.     <h4 class="font-semibold text-slate-900">Contributors</h4>
  4.     <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">204</span>
  5.   </div>
  6.   <div class="mt-3 flex -space-x-2 overflow-hidden">
  7.     <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
  8.     <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
  9.     <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt=""/>
  10.     <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
  11.     <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
  12.   </div>
  13.   <div class="mt-3 text-sm font-medium">
  14.     <a href="#" class="text-blue-500">+ 198 others</a>
  15.   </div>
  16. </div>

不要惊慌！在本指南中，您将学习如何在项目中重用样式的不同策略，以及何时使用每个策略的最佳实践。