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
|
|||
|
|
|
|||
|
|
# 完成
|
|||
|
|
|