1. 环境搭建
在开始之前，我们需要搭建一个使用 Tailwind CSS 的项目环境。以下是一些必要的步骤：
-
创建项目文件夹
- 创建一个新文件夹，并通过以下命令初始化项目：
mkdir tailwind-navbar && cd tailwind-navbar npm init -y -
安装 Tailwind CSS
- 使用以下命令安装 Tailwind CSS 及其依赖项：
npm install -D tailwindcss npx tailwindcss init- 这将生成一个
tailwind.config.js配置文件。
-
配置 Tailwind CSS
- 将 Tailwind 指令添加到您的 CSS 文件中（例如
src/styles.css）：
@tailwind base; @tailwind components; @tailwind utilities; - 将 Tailwind 指令添加到您的 CSS 文件中（例如
-
设置 HTML 文件
- 在根目录下创建一个
index.html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./dist/styles.css" rel="stylesheet"> <title>Responsive Navbar with Tailwind CSS</title> </head> <body> <div id="app"></div> </body> </html> - 在根目录下创建一个
-
编译 Tailwind CSS
- 使用以下命令编译 Tailwind CSS：
npx tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch
2. 创建基础导航栏
接下来，我们将使用 HTML 和 Tailwind CSS 构建一个基础导航栏。
<nav class="bg-gray-800 p-4">
<div class="container mx-auto flex items-center justify-between">
最低0.47元/天 解锁文章
扫一扫
1484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
