Logo

菜单

发布于 2026-01-06 1 阅读
0

构建 Tailwind CSS 切换/开关组件

构建 Tailwind CSS 切换/开关组件

我最近一直在使用 Tailwind CSS，虽然我很喜欢使用实用类的新方式，但我不得不说，我怀念像 Bootstrap 或 Bulma 那样拥有一套基础组件可以使用的感觉。

这就是为什么我在 DEV 社区开设了一个新系列，讲解如何使用 Tailwind CSS 的实用类构建常用的 Web 组件。

Tailwind CSS切换

上次我向大家展示了如何构建文件上传组件，今天我想向大家展示如何构建切换/开关元素。

Tailwind CSS 切换/开关组件

构建切换组件的第一步是设置基本的HTML代码：

<label for="toggle-example">
  <input type="checkbox" id="toggle-example">
  <div></div>
  <span>Toggle me</span>
</label>
Enter fullscreen mode Exit fullscreen mode

如您所见，我们将所有元素都包裹在一个label标签内，这样点击标签上的任何位置都会切换复选框的状态。我们还添加了一个空div标签，稍后将用作背景。

现在让我们添加设置元素样式所需的实用类：

<label for="toggle-example" class="flex items-center cursor-pointer relative mb-4">
  <input type="checkbox" id="toggle-example" class="sr-only">
  <div class="toggle-bg bg-gray-200 border-2 border-gray-200 h-6 w-11 rounded-full"></div>
  <span class="ml-3 text-gray-900 text-sm font-medium">Toggle me</span>
</label>
Enter fullscreen mode Exit fullscreen mode

切换元素尚未完成，因为我们需要添加一些伪类，这些伪类将作为从左到右移动的点。

最简单的办法是从 NPM 安装 Flowbite 包，并将其作为插件添加到你的 Tailwind CSS 项目中。这样，Flowbite 的这个组件和其他组件就能正常工作了。

或者，您也可以直接在 CSS 中添加以下样式：

.toggle-bg:after {
    content: '';
    @apply absolute top-0.5 left-0.5 bg-white border border-gray-300 rounded-full h-5 w-5 transition shadow-sm;
}

input:checked + .toggle-bg:after {
    transform: translateX(100%);
    @apply border-white;
}

input:checked + .toggle-bg {
    @apply bg-blue-600 border-blue-600;
}
Enter fullscreen mode Exit fullscreen mode

最终结果应如下所示：

Tailwind CSS切换

您还可以将切换组件默认设置为选中状态：

<label for="toggle-example-checked" class="flex items-center cursor-pointer relative">
  <input type="checkbox" id="toggle-example-checked" class="sr-only" checked>
  <div class="toggle-bg bg-gray-200 border-2 border-gray-200 h-6 w-11 rounded-full"></div>
  <span class="ml-3 text-gray-900 text-sm font-medium">Toggle me (checked)</span>
</label>
Enter fullscreen mode Exit fullscreen mode

我希望这篇教程能帮助你更好地学习 Tailwind CSS，并拓展你可以使用的组件种类。在结束之前，我想向你展示一个 Tailwind CSS 组件库，这个切换组件就属于这个组件库，你可以使用它来更快地构建网站。

Flowbite - Tailwind CSS 组件库

正如我之前所说，这个Tailwind CSS 切换组件是名为 Flowbite 的大型开源组件库的一部分。

Flowbite - Tailwind CSS 组件

Flowbite基本上是一组 UI 组件，例如按钮、警报、徽章、下拉菜单、导航栏，这些组件是使用 Tailwind CSS 的实用类构建的，但它也包括交互式元素，例如工具提示和日期选择器，可以帮助您使用 Tailwind CSS 更快地构建网站。

你可以通过 NPM 安装 Flowbite，然后将其作为插件引入到你的 Tailwind CSS 项目中，或者直接使用 CDN 来试用，从而快速上手。

文章来源：https://dev.to/themesberg/building-a-tailwind-css-toggleswitch-component-4pc3
为什么投稿指南很重要。
轻松掌握样式组件。