组件实例

了解如何使用工具类(utility classes)来构建常见的 UI 组件。

与其他 CSS 框架不同,Tailwind 不包含任何类似 form-inputbtncardnavbar 之类的组件

Tailwind 是一个用于实现定制化设计的 CSS 框架。由于即使是一个简单的组件(例如按钮 - button)在不同的站点之间看起来也不完全相同,因此提供内建的组件样式会导致你花费很大的精力修改这些内建样式,最终导致开发过程令人沮丧。

相反,当你意识到你的 UI 中存在某些通用模式的时候,我们鼓励您先用工具类实现,然后再提取你自己的组件

Simple form input component

<input class="bg-white focus:outline-0 focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal" type="email" placeholder="jane@example.com">

实例

为了便于理解并入门,我们提供了一系列由工具类(utility classes)实现的组件实例,帮助你了解如何实现常见的 UI 元素。