在你的主題文件夾內運行以下命令:

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 部分添加 buildwatch 命令:

{
 "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 }}">