1.5 KiB
本项目使用Tailwind CSS，版本为3.4.0的稳定版本
编译前的准本
- 在开始之前，确保你已经安装了 Node.js 和 npm，你可以通过以下命令检查它们是否已经安装：
node -v npm -v
node 需要大于12,npm需要大于9
2. cnpm
国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npmmirror.com $ npm config set registry https://registry.npmmirror.com
这样就可以使用 cnpm 命令来安装模块了：
$ cnpm install [name]
- 安装 Tailwind CSS cd 到ui目录，在ui目录使用如下命令安装
npm install tailwindcss@3.4 -D
npx tailwindcss init 执行以上命令后，会生成一个基础配置文件 tailwind.config.js，供定制使用。
配置模板路径 接下来我们可以在 tailwind.config.js 文件中添加模版的路径：
tailwind.config.js 文件代码： /** @type {import('tailwindcss').Config} / module.exports = { content: [".{html}"], // 根据项目实际文件类型调整 theme: { extend: {}, }, plugins: [], } 添加 Tailwind 指令到 CSS 文件 在你的主 CSS 文件 input.css（没有就创建它） 中通过 @tailwind 指令添加每一 个Tailwind 功能模块。
input.css 文件代码： @tailwind base; @tailwind components; @tailwind utilities; 启动 Tailwind CLI 构建流程 运行CLI工具以扫描模板文件中的类并构建CSS。 npx tailwindcss -i input.css -o tw.k3gpt.css