使用 TailwindCSS 制作 HTML 静态页

这个案例使用 pnpm 安装相关依赖（tailwindcss 和 @tailwindcss/cli），使用npm方式的话可以参考官方说明，下面是步骤：

1、初始化。进入项目目录，在终端运行：

// 初始化
pnpm init

// 添加开发依赖
pnpm add -D tailwindcss @tailwindcss/cli

// 创建目录
mkdir src

// 创建 css 输入文件和 html 文件
cd ./src
touch input.css index.html

2、编辑 package.json（运行初始化后会自动生成），修改 scripts 部分：

...
  "scripts": {
    "watch": "tailwindcss -i ./src/input.css -o ./src/css/style.css --watch",
    "build": "tailwindcss -i ./src/input.css -o ./src/css/style.css --minify"
  },
...

高亮的部分是输出 css 的路径和文件名，运行后会自动创建。

3、编辑 ./src/input.css：

@import "tailwindcss";

// 样式规则

4、在终端运行：

pnpm watch

5、编辑 ./src/index.html，引用生成的 css：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">

</head>

<body>

</body>

</html>

页面制作完以后在终端运行 pnpm build 对生成的 css 文件进行压缩：

pnpm build

使用 TailwindCSS 制作 HTML 静态页

相关文章：