TailwindCSS 是一个基于原子类的 CSS 框架，它提供了一系列的类名用于快速构建样式。在本文中，我们将介绍如何使用 TailwindCSS 构建一个响应式的网站导航。
准备工作
首先，我们需要安装 TailwindCSS。可以通过 npm 或者 yarn 安装，具体命令如下：
# 使用 npm 安装 npm install tailwindcss # 使用 yarn 安装 yarn add tailwindcss
安装完成后，我们需要在项目中添加 TailwindCSS 的配置文件 tailwind.config.js，并配置一些基本的样式。
-- -------------------- ---- ------- -- ------------------ -------------- - - ------ --- ------ - ------- --- -- --------- --- -------- --- -展开代码
在上面的配置文件中，我们可以看到有一个 theme 属性，它是 TailwindCSS 的核心配置项，可以定义一些基本的样式，例如字体大小、颜色、间距等等。在本文中，我们将使用 theme 属性来定义一些基本的样式，例如导航栏的背景色、字体大小等等。
构建导航
现在，我们可以开始构建我们的导航栏了。我们先来看一下 HTML 结构：
-- -------------------- ---- ------- ---- -------------------- ---- ---------------- ------- ---- ------- --------- ---- --------------- ---- ------------ --------------- ------ ---- --------------- --------- ------ ---- ------------ ----------- ---- ------ ---- ------ --- ------- ------------- ------------------ ------------ -------------- --- ---------- ------------- ---------------- ----------------- ------------------ ----------------- ---------------- ---------- ------------ ------------ --------------------------- ---------------------- ----- -------------------- ---- ----------- ---- ---- ---- ---- -- ------- -------- ----- ---- ---- ----- --------- ---- ------- ------- --- ---- ------------ --- ---- ---------------------------------- ----------- ---------- - -- --- ---------------------- ----- ---------------------- ----------------------- ---------------- ----- ------ ------- ------ -- ------ ---- ---- ---- ---- -- ----- -------- ----- - ---- ----- -------- ---- ------- -------- --- ---- ------------- --- ---- ---------------------------------- ----------- ---------- - -- --- ---------------------- ----- ---------------------- ----------------------- ---------------- ----- ----- --- ---- --- -- ------ --------- ------ ---- ------------- ---- ------------ -------------- ---------------- ------------------ ---- ---------------------- ---- ------------ --------- --- ------- ---------------------------------------------------------------- ------------- ------ ---- ------------- -------- --- ------- ---------------------------------------------------------------- ------------- ------ ------ ---- ------------- -------- --------- ---- ------------- -- -------- ----------- ---- ---------- ------- ----------- --------- ---------- ----------- ------------------ ---------------- ----------------- ---------- ------------ -------------------------- -- -------- ----------- ---- ---- ---------- ------- ----------- --------- ------------- ---------------- ----------------- ------------------ ---------------- ----------------- ---------- ------------ --------------------- -- -------- ----------- ---- ---- ---------- ------- ----------- --------- ------------- ---------------- ----------------- ------------------ ---------------- ----------------- ---------- ------------ ------------------------- -- -------- ----------- ---- ---- ---------- ------- ----------- --------- ------------- ---------------- ----------------- ------------------ ---------------- ----------------- ---------- ------------ ------------------------- ------ ------ ------ ------ ------ ---- ------ ----- ------ ------- ----- -- ---- ------ ---- ----- -------- ---- ------- -------- --- ---- ------------- ---------- ----------------- ---- ----------- ---- ------ -- -------- ------------ ---- ---- ---------- --------- ----------- ---------- ----------- ------------------ ---------------- ----------------- ---------- ------------ -------------------------- -- -------- ----------- ----- ---- ---- ---------- --------- ----------- ------------- ---------------- ----------------- ------------------ ---------------- ----------------- ---------- ------------ --------------------- -- -------- ----------- ----- ---- ---- ---------- --------- ----------- ------------- ---------------- ----------------- ------------------ ---------------- ----------------- ---------- ------------ ------------------------- -- -------- ----------- ----- ---- ---- ---------- --------- ----------- ------------- ---------------- ----------------- ------------------ ---------------- ----------------- ---------- ------------ ------------------------- ------ ------ ------展开代码
在上面的 HTML 中，我们使用了一些 TailwindCSS 的类名，例如 bg-gray-800、max-w-7xl、px-2 等等。这些类名都是 TailwindCSS 提供的，可以通过查看官方文档来了解每个类名的作用。
响应式
我们可以看到，在上面的 HTML 中，有一些类名带有 sm:、lg: 前缀，这是 TailwindCSS 提供的响应式类名，可以根据屏幕尺寸来设置不同的样式。例如，在上面的 HTML 中，我们使用了 sm:hidden 和 hidden sm:hidden 来控制移动端菜单的显示和隐藏。
示例代码
最后，我们来看一下完整的示例代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------------- ---------- --- ---- ------------------- ----- --------------------------------------------------------------------- ----------------- ------- ------ ---- -------------------- ---- ---------------- ------- ---- ------- --------- ---- --------------- ---- ------------ --------------- ------ ---- --------------- --------- ------ ---- ------------ ----------- ------- ------------- ------------------ ------------ -------------- --- ---------- ------------- ---------------- ----------------- ------------------ ----------------- ---------------- ---------- ------------ ------------ --------------------------- ---------------------- ----- -------------------- ---- ----------- ---- ------------ --- ---- ---------------------------------- ----------- ---------- - -- --- ---------------------- ----- ---------------------- ----------------------- ---------------- ----- ------ ------- ------ -- ------ ---- ------------- --- ---- ---------------------------------- ----------- ---------- - -- --- ---------------------- ----- ---------------------- ----------------------- ---------------- ----- ----- --- ---- --- -- ------ --------- ------ ---- ------------- ---- ------------ -------------- ---------------- ------------------ ---- ---------------------- ---- ------------ --------- --- ------- ---------------------------------------------------------------- ------------- ------ ---- ------------- -------- --- ------- ---------------------------------------------------------------- ------------- ------ ------ ---- ------------- -------- --------- ---- ------------- -- -------- ----------- ---- ---------- ------- ----------- --------- ---------- ----------- ------------------ ---------------- ----------------- ---------- ------------ -------------------------- -- -------- ----------- ---- ---- ---------- ------- ----------- --------- ------------- ---------------- ----------------- ------------------ ---------------- ----------------- ---------- ------------ --------------------- -- -------- ----------- ---- ---- ---------- ------- ----------- --------- ------------- ---------------- ----------------- ------------------ ---------------- ----------------- ---------- ------------ ------------------------- -- -------- ----------- ---- ---- ---------- ------- ----------- --------- ------------- ---------------- ----------------- ------------------ ---------------- ----------------- ---------- ------------ ------------------------- ------ ------ ------ ------ ------ ---- ------------- ---------- ----------------- ---- ----------- ---- ------ -- -------- ------------ ---- ---- ---------- --------- ----------- ---------- ----------- ------------------ ---------------- ----------------- ---------- ------------ -------------------------- -- -------- ----------- ----- ---- ---- ---------- --------- ----------- ------------- ---------------- ----------------- ------------------ ---------------- ----------------- ---------- ------------ --------------------- -- -------- ----------- ----- ---- ---- ---------- --------- ----------- ------------- ---------------- ----------------- ------------------ ---------------- ----------------- ---------- ------------ ------------------------- -- -------- ----------- ----- ---- ---- ---------- --------- ----------- ------------- ---------------- ----------------- ------------------ ---------------- ----------------- ---------- ------------ ------------------------- ------ ------ ------ -------- ----- ------ - -------------------------------------------------------------- ----- ---- - --------------------------------------- -------------------------------- -- -- - -- ----------------------------------- - -------------------------------- ------------------------------------ -------- - ---- - ----------------------------- ------------------------------------ --------- - --- --------- ------- -------展开代码
在上面的代码中，我们使用了 TailwindCSS 提供的类名来快速构建样式，同时也使用了一些 JavaScript 代码来控制移动端菜单的显示和隐藏。这个示例代码可以在任何一个网站中使用，只需要修改菜单项的链接即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d10f39a941bf7134243b7c
