/

如何將 Tailwind 添加至 Hugo

如何將 Tailwind 添加至 Hugo

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

1
npm init -y

然後安裝 Tailwind CSS 作為開發依賴：

1
npm install -D tailwindcss

使用以下命令初始化 Tailwind：

1
npx tailwindcss init

這將創建 tailwind.config.js 文件。在編輯器中打開該文件，並按以下方式填寫 content 屬性，其中包含主題的佈局文件：

1
2
3
4
5
6
7
module.exports = {
 content: ['content/**/*.md', 'layouts/**/*.html'],
 theme: {
 extend: {},
 },
 plugins: [],
}

現在在主題文件夾中創建 tailwind.css 文件，並添加以下內容：

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

現在打開 package.json，在 scripts 部分添加 build 和 watch 命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
 "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"
 }
}

嘗試運行以下命令：

1
npm run build

你應該能看到生成的 style.css 文件！

| 提示：在主題開發時，使用 npm run watch 命令，這樣每次保存文件時更改都會自動保存到 style.css 文件中。

現在，我們可以在佈局文件中引入它，例如我將它放在 layouts/partials/header.html 中：

1
2
{{ $styles := resources.Get "style.css" }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">

tags: [“Hugo”, “Tailwind CSS”, “web development”, “front-end development”]