Tailwind CSS 是一个基于原子类的 CSS 框架，它提供了一系列预定义的 CSS 类，可以快速构建用户界面。除了基本的样式类之外，Tailwind CSS 还提供了一些用户控件和 UI 组件，可以方便地构建复杂的用户界面。本文将介绍 Tailwind CSS 的一些用户控件和 UI 组件，并提供示例代码和指导意义。
表单控件
Tailwind CSS 提供了一些表单控件样式类，可以快速构建表单。例如，以下代码可以创建一个带有标签和输入框的表单：
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="username">
Username
</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="username" type="text" placeholder="Username">
</div>在这个示例中，我们使用了 mb-4 类来添加底部边距，text-gray-700 类来设置文本颜色，font-bold 类来设置字体加粗，shadow 类来添加阴影效果，appearance-none 类来去除默认的外观，border 类来添加边框，rounded 类来设置边框圆角，w-full 类来设置宽度为100%，py-2 和 px-3 类来设置垂直和水平内边距，leading-tight 类来设置行高，focus:outline-none 类来去除焦点时的外框，focus:shadow-outline 类来添加焦点时的阴影效果。
除了基本的表单控件之外，Tailwind CSS 还提供了一些高级的表单控件，例如下拉菜单、复选框、单选框和开关。以下是一个下拉菜单的示例代码：
// javascriptcn.com 代码示例
<div class="relative inline-block text-left">
<div>
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="options-menu" aria-haspopup="true" aria-expanded="true">
Options
<!-- Heroicon name: chevron-down -->
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<div class="py-1" role="none">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Account settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Support</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">License</a>
<form method="POST" action="#">
<button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
Sign out
</button>
</form>
</div>
</div>
</div>在这个示例中，我们使用了 inline-block 类来设置元素为内联块，relative 类来设置元素为相对定位，absolute 类来设置元素为绝对定位，right-0 类来设置元素距离右侧为0，mt-2 类来设置元素距离顶部的外边距为2，w-56 类来设置元素宽度为56像素，rounded-md 类来设置元素圆角，shadow-lg 类来添加阴影效果，bg-white 类来设置背景颜色，ring-1 类来添加边框，ring-black 类来设置边框颜色，ring-opacity-5 类来设置边框透明度，role="menu" 属性来设置元素为菜单，aria-orientation="vertical" 属性来设置菜单方向为垂直，aria-labelledby="options-menu" 属性来设置菜单的标签，role="none" 属性来设置菜单项为非交互元素，role="menuitem" 属性来设置菜单项为交互元素。
卡片
卡片是一个常见的 UI 组件，用于展示信息和内容。Tailwind CSS 提供了一些卡片样式类，可以快速构建卡片。以下是一个简单的卡片的示例代码：
// javascriptcn.com 代码示例
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="https://source.unsplash.com/random/400x200" alt="Sunset in the mountains">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
</div>
</div>在这个示例中，我们使用了 max-w-sm 类来设置最大宽度为sm，rounded 类来设置元素圆角，overflow-hidden 类来隐藏元素溢出部分，shadow-lg 类来添加阴影效果，w-full 类来设置元素宽度为100%，px-6 和 py-4 类来设置水平和垂直内边距，font-bold 类来设置字体加粗，text-xl 类来设置字体大小，mb-2 类来添加底部外边距，text-gray-700 类来设置文本颜色，text-base 类来设置文本大小，bg-gray-200 类来设置背景颜色，rounded-full 类来设置元素为圆形，px-3 和 py-1 类来设置水平和垂直内边距，text-sm 类来设置字体大小，font-semibold 类来设置字体加粗，mr-2 类来添加右侧外边距，inline-block 类来将元素设置为内联块。
按钮
按钮是一个常见的用户控件，用于触发操作和交互。Tailwind CSS 提供了一些按钮样式类，可以快速构建按钮。以下是一个简单的按钮的示例代码：
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Button </button>
在这个示例中，我们使用了 bg-blue-500 类来设置背景颜色为蓝色，hover:bg-blue-700 类来设置鼠标悬停时的背景颜色为深蓝色，text-white 类来设置文本颜色为白色，font-bold 类来设置字体加粗，py-2 和 px-4 类来设置垂直和水平内边距，rounded 类来设置圆角。
除了基本的按钮之外，Tailwind CSS 还提供了一些高级的按钮，例如轮廓按钮、禁用按钮、图标按钮、下拉按钮和分页按钮。以下是一个分页按钮的示例代码：
// javascriptcn.com 代码示例
<nav class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
<div class="hidden sm:block">
<p class="text-sm text-gray-700">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">10</span>
of
<span class="font-medium">97</span>
results
</p>
</div>
<div class="flex-1 flex justify-between sm:justify-end">
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
Previous
</a>
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
Next
</a>
</div>
</nav>在这个示例中，我们使用了 nav 元素来创建导航栏，bg-white 类来设置背景颜色为白色，px-4 和 py-3 类来设置水平和垂直内边距，flex 类来设置元素为弹性布局，items-center 类来设置元素垂直居中对齐，justify-between 类来设置元素左右对齐，border-t 类来添加顶部边框，border-gray-200 类来设置边框颜色，sm:px-6 类来设置在小屏幕上的水平内边距，hidden 类来隐藏元素，text-sm 类来设置字体大小，text-gray-700 类来设置文本颜色，font-medium 类来设置字体加粗，flex-1 类来设置元素占据剩余空间，ml-3 类来添加左侧外边距，relative 类来设置元素为相对定位，border 类来添加边框，rounded-md 类来设置圆角，bg-white 类来设置背景颜色，hover:bg-gray-50 类来设置鼠标悬停时的背景颜色。
总结
Tailwind CSS 提供了一些方便的用户控件和 UI 组件，可以快速构建复杂的用户界面。通过深入学习和使用这些控件和组件，我们可以更加高效地开发 Web 应用程序。在实际项目中，我们可以根据需求自定义样式和组件，以满足具体的业务场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657a7924d2f5e1655d4d4784