背景
响应式设计是当今网站设计中不可或缺的一部分。在手机、平板和电脑等不同的设备上都能够优雅的展示网站内容，是提高用户体验的重要因素之一。而导航栏也是网站中最重要的组成部分之一。如何在不同的设备上都呈现出好看实用的导航栏是从业人员面临的挑战。
解决方案
Tailwind 是近期非常火热的一款 CSS 工具，采用了不同于常规的 CSS 设计方式。它能够帮助我们实现高效的响应式设计，让你的导航栏看起来与别人不一样。
接下来，我们来讲解一下如何使用 Tailwind 来优化响应式导航栏的样式。
步骤一：安装和配置 Tailwind
首先，我们需要在项目中引入 Tailwind：
npm install tailwindcss
安装完成后，在项目根目录下创建一个 tailwind.config.js 文件，输入以下内容：
-- -------------------- ---- -------
-------------- - -
------ -
------------------
----------------
--
------ ---
--------- ---
-------- ---
-purge 指定了 Tailwind 应该根据哪些文件来生成 CSS 样式，这里写了一些模板输入的路径，如果没有按这样的架构建立文件的话，需要改成对应的路径。
步骤二：响应式静态导航
Tailwind 中通过如下方式定义导航栏样式：
-- -------------------- ---- -------
---- --------------------
---- ---------------- ------- ---- ------- ---------
---- --------------- ---- ---- ------------ -----------------
---- --------------- --------- ------ ---- --------------
-- -------- ----------------- -------------------
------
---- --------------- --------- ------- ---- --------------
-------
-------------
------------------ --- ---------- ------------- ---------------- ------------------ -----------------
---------------------
-
----- -------------------- ---- -----------
---- -------- ----- ------------ ---
----
---------- ----
----------------------------------
-----------
---------- - -- ---
---------------------
------------------
-
-----
----------------------
-----------------------
----------------
----- ------ ------- ------
--
------
---------
------
------
------
------这个样式是固定的，当我们在手机和平板电脑上访问它时，它看起来太长了。这时，我们可以添加一个响应式类 .sm:hidden，让它在小屏幕上隐藏起来。做法如下：
-- -------------------- ---- -------
---- --------------------
---- ---------------- ------- ---- ------- ---------
---- --------------- ---- ---- ------------ -----------------
---- --------------- --------- ------ ---- --------------
-- -------- ----------------- -------------------
------
---- --------------- --------- ------- ---- --------------
-------
-------------
------------------ --- ---------- ------------- ---------------- ------------------ -----------------
---------------------
-
----- -------------------- ---- -----------
---- -------- ----- ------------ ---
----
---------- ----
----------------------------------
-----------
---------- - -- ---
---------------------
------------------
-
-----
----------------------
-----------------------
----------------
----- ------ ------- ------
--
------
---------
------
------
------
---- ------------- -----------
---- ----------- ---- ---- -----------
-- -------- -------------------- ----------------- ---------------- ----- ---- ---- ---------- --------- --------------------------
-- -------- -------------------- ----------------- ---------------- ----- ---- ---- ---------- --------- ---------------------
-- -------- -------------------- ----------------- ---------------- ----- ---- ---- ---------- --------- -------------------------
-- -------- -------------------- ----------------- ---------------- ----- ---- ---- ---------- --------- -------------------------
------
------
------响应式设计通过添加尺寸类使 HTML 结构可适应不同的视口。例如，.sm:hidden 类将在屏幕宽度为 sm 时隐藏内容。
步骤三：响应式交互式导航
在步骤二中我们实现了响应式静态导航。但是，如何让用户从隐藏的导航栏中选择菜单呢？这时候我们可以通过一些 JavaScript 和一些 tailwind 类来实现。
-- -------------------- ---- -------
---- --------------------
---- ---------------- ------- ---- ------- ---------
---- --------------- ---- ---- ------------ -----------------
---- --------------- --------- ------ ---- --------------
-- -------- ----------------- -------------------
------
---- --------------- --------- ------- ---- --------------
-------
-------------
------------------ --- ---------- ------------- ---------------- ------------------ ---------------- ----------
------------ - ------
---------------------
-
----- -------------------- ---- -----------
----- ------------------ --------------
---- -------- ----- ------------ ---
----
---------- ----
----------------------------------
-----------
---------- - -- ---
---------------------
-
-----
----------------------
-----------------------
----------------
----- ------ ------- ------
--
------
-------
----- ------------------ ---------------
---- -------- ----- --------- ---
----
---------- ----
----------------------------------
-----------
---------- - -- ---
---------------------
-
-----
----------------------
-----------------------
----------------
----- ----- --- ---- ---
--
------
-------
---------
------
----
---------
-------- -----
--------- ------
--
------------- --------- -------- --------- ------- -----
-
---- ------------------ -------- -----------------
---- ----------- ---- -----------
-- -------- ----------------- ------------------- ----- ---- ---- ---------- --------- --------------------------
-- -------- ----------------- ------------------- ----- ---- ---- ---------- --------- ---------------------
-- -------- ----------------- ------------------- ----- ---- ---- ---------- --------- -------------------------
-- -------- ----------------- ------------------- ----- ---- ---- ---------- --------- -------------------------
------
------
------
------
------
------现在，在屏幕宽度为 md 时，我们可以看到菜单按钮。当我们单击按钮时，菜单将打开。 tailwind 的类样式使我们只需添加一些 JavaScript，即可实现此功能！
结论
现在，你已经成功地使用 Tailwind 优化了响应式导航栏的样式！使用响应式类、交互式类和 class 组合，Tailwind 可以让我们迅速地创建精美、功能齐全的 Web 界面设计。
示例代码
示例代码存储在 Github 上，点击这里获取。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6733b0830bc820c58243dbe5