在你的主題文件夾內運行以下命令:
npm init -y
然後安裝 Tailwind CSS 作為開發依賴:
npm install -D tailwindcss
使用以下命令初始化 Tailwind:
npx tailwindcss init
這將創建 tailwind.config.js
文件。在編輯器中打開該文件,並按以下方式填寫 content
屬性,其中包含主題的佈局文件:
module.exports = {
content: ['content/**/*.md', 'layouts/**/*.html'],
theme: {
extend: {},
},
plugins: [],
}
現在在主題文件夾中創建 tailwind.css
文件,並添加以下內容:
@tailwind base;
@tailwind components;
@tailwind utilities;
現在打開 package.json
,在 scripts
部分添加 build
和 watch
命令:
{
"name": "valley",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "npx tailwindcss -i ./tailwind.css -o ./assets/style.css",
"watch": "npx tailwindcss -i ./tailwind.css -o ./assets/style.css --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.1.4"
}
}
嘗試運行以下命令:
npm run build
你應該能看到生成的 style.css
文件!
| 提示:在主題開發時,使用 npm run watch
命令,這樣每次保存文件時更改都會自動保存到 style.css
文件中。
現在,我們可以在佈局文件中引入它,例如我將它放在 layouts/partials/header.html
中:
{{ $styles := resources.Get "style.css" }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">