工具栏是网页中常见的元素，它可以帮助用户快速访问网站的主要功能。在本文中，我们将介绍如何使用 TailwindCSS 创建漂亮的响应式工具栏。TailwindCSS 是一个基于类的 CSS 框架，可以帮助我们快速编写样式，同时提供了许多有用的工具类。
准备工作
在开始之前，我们需要安装 TailwindCSS。可以通过 npm 安装：
npm install tailwindcss
安装完成后，我们需要创建一个配置文件 tailwind.config.js：
-- -------------------- ---- -------
-------------- - -
------ ---
--------- ------ -- -- ------- -- -------
------ -
------- ---
--
--------- -
------- ---
--
-------- ---
-在这个配置文件中，我们可以配置 TailwindCSS 的各种选项。默认情况下，TailwindCSS 只包含基本样式，需要通过 purge 选项来指定哪些样式需要保留。
创建工具栏
接下来，我们可以开始创建工具栏了。首先，我们需要创建一个 HTML 结构：
-- -------------------- ---- -------
---- --------------------
---- ---------------- ------- ---- ------- ---------
---- --------------- ---- ------------ --------------- ------
---- --------------- --------- ------ ---- ------------ -----------
---- ------ ---- ------ ---
------- ------------- ------------------ ------------ -------------- --- ---------- ------------- ---------------- ----------------- ------------------ ------------ ---------------- ----------------- --------------------------- ----------------------
----- -------------------- ---- -----------
---- ---- ---- ---- -- ------- ---
----
-------- ----- ----
---- ----- --------- ---- ------- -------
---
---- ------------ --- ---- ---------------------------------- ----------- ---------- - -- --- --------------------- -------------------
----- ---------------------- ----------------------- ---------------- ----- ------ ------- ------ --
------
---- ---- ---- ---- -- ----- ---
----
-------- ----- -
---- ----- -------- ---- ------- --------
---
---- ------------- --- ---- ---------------------------------- ----------- ---------- - -- --- --------------------- -------------------
----- ---------------------- ----------------------- ---------------- ----- ----- --- ---- --- --
------
---------
------
---- ------------- ---- ------------ -------------- ---------------- ------------------
---- ----------------------
---- ------------ --------- --- ------- ------------------------------------------------------------------- ---------------
---- ------------- -------- --- ------- ----------------------------------------------------------------------------------- ---------------
------
---- ------------- -------- ---------
---- ----------- -----------
-- -------- ------------------ ---------- ---- ---- ---------- ------- --------------------------
-- -------- -------------------- ----------------- ---------------- ---- ---- ---------- ------- ---------------------
-- -------- -------------------- ----------------- ---------------- ---- ---- ---------- ------- -------------------------
-- -------- -------------------- ----------------- ---------------- ---- ---- ---------- ------- -------------------------
------
------
------
---- --------------- --------- ------- ---- ------------ ---- --------- ------------- ------- ---------
------- ------------------ --- ------------ ------------- ---------------- ------------------ ------------ ------------------- -------------------------- ------------------
----- -------------------- --------------------
---- -------- ----- ---- ---
---- ---------- ---- ---------------------------------- ----------- ---------- - -- --- --------------------- -------------------
----- ---------------------- ----------------------- ---------------- ------ ------ ---------------- --
------
---------
---- ------- -------- ---
---- ----------- ----------
-----
------- ------------- ------------------ ---- ------- ------------ ------------------ ------------ ------------------- -------------------------- ----------------- --------------------- --------------------- ---------------------
----- -------------------- ---- -----------
---- ---------- --- ------------- -------------------------------------------------------------- -------
---------
------
----
------- -------- ------ --------- ----- -- -------- ------
--------- ----------- -------- -------------
----- ---------- --------- ---------
--- ---------- ----------- ----------
-------- ----------- ------- ------------
----- ---------- ----------- ----------
--- ---------- --------- ---------
---
---- ------------- ---------------- -------- ------- ---- ---- ---------- --------- ---- -------- ------ ---------- --------------- ----------- --------------------------- ---------------------------------- --------------
---- ------- -------------- --- ------- -- ---
-- -------- ------------ ---- ---- ------- -------------- --------------- ------------- -------------------------- -----------
-- -------- ------------ ---- ---- ------- -------------- --------------- ------------- ----------------------------------
-- -------- ------------ ---- ---- ------- -------------- --------------- ------------- -------------------------- -------
------
------
------
------
------
---- ------ ----- --------- ----- -- ---- ------ ---
---- ----------------- -----------------
---- ----------- ---- ---- -----------
-- -------- ------------------ ---------- ----- ---- ---- ---------- --------- --------------------------
-- -------- -------------------- ----------------- ---------------- ----- ---- ---- ---------- --------- ---------------------
-- -------- -------------------- ----------------- ---------------- ----- ---- ---- ---------- --------- -------------------------
-- -------- -------------------- ----------------- ---------------- ----- ---- ---- ---------- --------- -------------------------
------
------
------在这个 HTML 结构中，我们包含了一个 nav 元素，其中包含了工具栏的所有内容。为了实现响应式布局，我们使用了 sm 和 lg 前缀来指定不同的样式。例如，.sm:hidden 表示在小屏幕上隐藏元素，.lg:block 表示在大屏幕上显示元素。
添加样式
现在，我们可以为工具栏添加样式了。我们可以在 tailwind.config.js 中添加一些自定义样式：
-- -------------------- ---- -------
-------------- - -
------ ---
--------- ------ -- -- ------- -- -------
------ -
------- -
-------- -
------ --------
--
------- -
---------- ----------
------------ ----------
--------- ----------
--
--
--
--------- -
------- ---
--
-------- ---
-在这个配置文件中，我们添加了三个自定义颜色：primary、secondary 和 danger，分别代表主要颜色、次要颜色和危险颜色。我们还添加了一个自定义间距 128，用于创建工具栏的高度。
接下来，我们可以在 HTML 中使用这些样式了。例如，我们可以为工具栏添加背景色：
<nav class="bg-gray-800">
我们还可以为工具栏添加高度和边距：
<nav class="bg-gray-800 h-16">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex items-center justify-between h-full">我们还可以为工具栏的链接添加样式：
<a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a> <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a> <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
最后，我们可以为工具栏的按钮添加样式：
-- -------------------- ---- -------
------- ------------- ------------------ ------------ -------------- --- ---------- ------------- ---------------- ----------------- ------------------ ------------ ---------------- ----------------- --------------------------- ----------------------
----- -------------------- ---- -----------
---- ---- ---- ---- -- ------- ---
----
-------- ----- ----
---- ----- --------- ---- ------- -------
---
---- ------------ --- ---- ---------------------------------- ----------- ---------- - -- --- --------------------- -------------------
----- ---------------------- ----------------------- ---------------- ----- ------ ------- ------ --
------
---- ---- ---- ---- -- ----- ---
----
-------- ----- -
---- ----- -------- ---- ------- --------
---
---- ------------- --- ---- ---------------------------------- ----------- ---------- - -- --- --------------------- -------------------
----- ---------------------- ----------------------- ---------------- ----- ----- --- ---- --- --
------
---------结论
在本文中，我们介绍了如何使用 TailwindCSS 创建漂亮的响应式工具栏。通过使用 TailwindCSS，我们可以快速编写样式，并且可以使用许多有用的工具类。希望这篇文章能够帮助你创建出更好的工具栏。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67637608856ee0c1d41ec6f1