Tailwind UI 是 Tailwind CSS 的官方组件库，由流行框架背后的同一团队设计。它提供了一套全面的 500+ 专业设计组件，这些组件旨在易于访问、响应和可定制。

Tailwind UI 涵盖了广泛的使用案例，从营销页面和电子商务到应用程序 UI 组件。该库专注于设计一致性，可确保您的应用程序在所有组件中都具有凝聚力和精美的外观。

如何使用 Tailwind UI：

首先，购买许可证并获得对 Tailwind UI 库的访问权限。

现在，设置一个安装了 Tailwind 的 React 应用程序。

然后，将 HeadlessUI 和 Heroicons 作为依赖项安装到 React 项目中。

npm install @headlessui/react @heroicons/react

最后，浏览所有 Tailwind UI 组件并复制要使用的组件的代码。以下是 Tailwind UI 中的输入组示例：

<div>
  <label for="price" class="block text-sm font-medium leading-6 text-gray-900">Price</label>
  <div class="relative mt-2 rounded-md shadow-sm">
    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
      <span class="text-gray-500 sm:text-sm">$</span>
    </div>
    <input type="text" name="price" id="price" class="block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="0.00">
    <div class="absolute inset-y-0 right-0 flex items-center">
      <label for="currency" class="sr-only">Currency</label>
      <select id="currency" name="currency" class="h-full rounded-md border-0 bg-transparent py-0 pl-2 pr-7 text-gray-500 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm">
        <option>USD</option>
        <option>CAD</option>
        <option>EUR</option>
      </select>
    </div>
  </div>
</div>