54 lines
1.5 KiB
Markdown
54 lines
1.5 KiB
Markdown
本项目使用Tailwind CSS，版本为3.4.0的稳定版本
|
||
|
||
# 编译前的准本
|
||
1. 在开始之前，确保你已经安装了 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]
|
||
|
||
3. 安装 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
|
||
|
||
# 完成
|
||
|