如何将Tailwind添加到Hugo中（附代码示例）

在你的主题文件夹内运行

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