Skip to main content

复用样式

场景​

<div class="mt-3 flex -space-x-2 overflow-hidden">
  <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=""
  />
  <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=""
  />
  <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=""
  />
  <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=""
  />
  <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=""
  />
</div>

多光标编辑​

快速选择和编辑每个元素 如 vscode 使用alt+click

循环​

<nav className="flex sm:justify-center space-x-4">
  {[
    ["Home", "/dashboard"],
    ["Team", "/team"],
    ["Projects", "/projects"],
    ["Reports", "/reports"],
  ].map(([title, url]) => (
    <a
      href={url}
      className="rounded-lg px-3 py-2 text-slate-700 font-medium hover:bg-slate-100 hover:text-slate-900"
    >
      {title}
    </a>
  ))}
</nav>

组件化​