TailwindCSS 是一个流行的 CSS 框架，它提供了一个基于类名的方法来快速构建美观的 UI 组件。React 是一个流行的 JavaScript 库，用于构建动态 Web 应用程序。在这篇文章中，我们将探讨如何使用 TailwindCSS 和 React 创建自适应导航栏。
前期准备
在开始之前，首先我们需要安装好 TailwindCSS 和 React。可以使用以下命令来完成安装：
npm install tailwindcss react
创建导航栏组件
为了创建导航栏，在 React 中使用函数组件是最为简单和直接的方式。我们将创建一个 Navbar 组件。
-- -------------------- ---- -------
------ ----- ---- --------
-------- -------- -
------ -
---- --------------- ------------ --------------- --------- ------------- -----
---- --------------- ------------ ------------- ---------- ------
---- -------------- --- ---- ------------- ---------- - -- ----
----- ------ ----- ----------- ------- ----------- ----- --
------
----- ------------------------ ------- --------------------------- -------------
------
---- ---------------- -----------
------- --------------- ------------ ---- ---- ------ ------- --------------- ----------------- ---------------- --------------------
---- -------------- --- ------------- ---------- - -- ----
-----
------------------
------ -------------- --------------- ---------------
--
------
---------
------
---- ----------------- ----- --------- ------- --------------- -----------
---- ------------------ --------------
--
-------------------------
---------------- ---- --------------- ------- --------------- ---------------- -----
-
----
----
--
-------------------------
---------------- ---- --------------- ------- --------------- ---------------- -----
-
--------
----
--
-------------------------
---------------- ---- --------------- ------- --------------- -----------------
-
----
----
------
------
------
--
-
------ ------- -------以上代码创建了一个导航栏，并包含有品牌标志、菜单按钮和菜单项。其中各个类名的意义可从 TailwindCSS 的文档中查阅。
添加导航栏到页面
我们可以将 Navbar 组件添加到我们的应用程序中，并在必要时进行自定义样式。样式可以通过编写新的 CSS 或添加属性到导航栏组件来实现。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
-------- ----- -
------ -
-----
------- --
----- -------------------- ------- -----
--- ------------------- ----------- ----------- -----------
-- --------------------------
---- -- - ------ ------- -- --- -- ------ - ---------- ------ ----- ----------- --- ------
----
-------
------
--
-
------ ------- ----在此示例中，我们将 Navbar 组件放在页面的顶部，并添加了一个标题和一些营销文案。主要内容显示在页面内部。
响应式导航栏
TailwindCSS 具有创建响应式设计的能力。通过引入不同的类名，可以根据屏幕大小更改导航栏的外观和行为。在 TailwindCSS 中，这是通过移动 Apache 设备类型前缀的方式实现的。例如，为了使“菜单”按钮在手机上可见，我们需要添加 sm:hidden 类名。
-- -------------------- ---- -------
-------
--------------- ------------ ---- ---- ------ ------- --------------- ----------------- ---------------- ------------------ --------- ----------
-
---- -------------- --- ------------- ---------- - -- ----
-----
------------------
------ -------------- --------------- ---------------
--
------
---------这里我们扩展了 .hidden 类名，以将按钮从匹配 md 断点的屏幕上删除，以至于在小屏幕上可见。
另外，为了在菜单按钮的关联菜单被点击时隐藏它，我们需要添加 hidden 类名来关闭菜单列表。
-- -------------------- ---- -------
-------- -------- -
----- -------- ---------- - ----------------------
------ -
---- --------------- ------------ --------------- --------- ------------- -----
---- --------------- ------------ ------------- ---------- ------
---
------
---- ---------------- -----------
-------
--------------- ------------ ---- ---- ------ ------- --------------- ----------------- ---------------- ------------------ --------- ----------
----------- -- -------------------
-
---
---------
------
---- -------------------- - ------- - --------- ------ ----- --------- ------- --------------- ------------
---- ------------------ --------------
--
-------------------------
---------------- ---- --------------- ------- --------------- ---------------- -----
-
----
----
--
-------------------------
---------------- ---- --------------- ------- --------------- ---------------- -----
-
--------
----
--
-------------------------
---------------- ---- --------------- ------- --------------- -----------------
-
----
----
------
------
------
--
-在上面的例子中，我们使用了 useState 钩子来在菜单按钮上添加一个点击处理程序，以便为开关菜单对象的状态和类设置条件。这是如何在导航栏的剩余部分中添加动态类名称。
总结
本文介绍了如何使用 TailwindCSS 和 React 来创建自适应导航栏。我们探讨了许多关于 TailwindCSS 和 React 的核心概念，例如类名和函数组件。希望这篇文章能够为您提供指导，使您能够创建出美观高效的导航栏并集成到您的 React 应用程序中。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
-------- -------- -
----- -------- ---------- - ----------------------
------ -
---- --------------- ------------ --------------- --------- ------------- -----
---- --------------- ------------ ------------- ---------- ------
---- -------------- --- ---- ------------- ---------- - -- ----
----- ------ ----- ----------- ------- ----------- ----- --
------
----- ------------------------ ------- --------------------------- -------------
------
---- ---------------- -----------
-------
--------------- ------------ ---- ---- ------ ------- --------------- ----------------- ---------------- ------------------ --------- ----------
----------- -- -------------------
-
---- -------------- --- ------------- ---------- - -- ----
-----
------------------
------ -------------- --------------- ---------------
--
------
---------
------
---- -------------------- - ------- - --------- ------ ----- --------- ------- --------------- ------------
---- ------------------ --------------
--
-------------------------
---------------- ---- --------------- ------- --------------- ---------------- -----
-
----
----
--
-------------------------
---------------- ---- --------------- ------- --------------- ---------------- -----
-
--------
----
--
-------------------------
---------------- ---- --------------- ------- --------------- -----------------
-
----
----
------
------
------
--
-
------ ------- --------- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
-------- ----- -
------ -
-----
------- --
----- -------------------- ------- -----
--- ------------------- ----------- ----------- -----------
-- --------------------------
---- -- - ------ ------- -- --- -- ------ - ---------- ------ ----- ----------- --- ------
----
-------
------
--
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a3d53eadd4f0e0ffc002bf