我在开发网站时一直在使用 Tailwind CSS 和 Flowbite,主要是因为我可以使用实用程序类和 Flowbite 的预构建组件(如导航栏、模式、按钮等)构建页面的速度和效率有多高.

Flowbite是基于 Tailwind CSS 实用程序类(包括导航栏、模式、搜索栏等)构建的最受欢迎的组件库之一。

Tailwind CSS是增长最快的 CSS 框架之一,它基于实用程序优先的类方法。

今天,我想向您展示如何使用 Tailwind CSS 中的实用程序类和 Flowbite 中的组件来创建搜索输入组件。

让我们开始吧!

Tailwind CSS 搜索输入 - Flowbite

我们需要做的第一件事是为组件设置 HTML 标记,其中包括一个form、label、input和一个提交按钮。

这是一个例子:

<form>   
    <label for="default-search">Search</label>
        <input type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
        <button type="submit">Search</button>
</form>

进入全屏模式 退出全屏模式

看起来不太好,因为我们还没有应用任何样式,但我们将开始添加一些 Tailwind CSS 类并立即使其变得更好。

让我们从label和input元素的样式开始:

<form>   
    <label class="mb-2 text-sm font-medium text-gray-900 sr-only" for="default-search">Search</label>
        <input class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
        <button type="submit">Search</button>
</form>

进入全屏模式 退出全屏模式

我们快到了,但还不够。让我们也为button元素设置样式:

<form>   
    <label class="mb-2 text-sm font-medium text-gray-900 sr-only" for="default-search">Search</label>
        <input class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
        <button class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2" type="submit">Search</button>
</form>

进入全屏模式 退出全屏模式

让我们添加一个额外的div包装器和一个带有循环的 SVG 图标,以表明它是一个搜索栏:

<form>   
    <label class="mb-2 text-sm font-medium text-gray-900 sr-only" for="default-search">Search</label>
    <div class="relative">
        <input class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" type="search" id="default-search" placeholder="Search Mockups, Logos..." required>
        <button class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2" type="submit">Search</button>
</div>
</form>

进入全屏模式 退出全屏模式

最后,我们还要添加暗模式类:

<form>   
    <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300">Search</label>
    <div class="relative">
        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>
        <input type="search" id="default-search" class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search Mockups, Logos..." required>
        <button type="submit" class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button>
    </div>
</form>

进入全屏模式 退出全屏模式

最终结果应如下所示:

您可以从官方 Flowbite 文档中查看更多Tailwind CSS 搜索输入示例。

这里有一些例子:

• Tailwind CSS 搜索输入 - Flowbite

• Flowbite - Tailwind CSS 组件库