【网站搭建】Hugo + Tailwind 自定义组件工作流

1. 新建 Tailwind 入口 CSS 文件

在主题目录下新建：
themes/mytheme/assets/css/main.css

内容如下（可直接复制）：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .nav-link {
    @apply relative px-3 py-1 rounded transition text-white font-medium hover:bg-white/10;
  }
  .nav-link::after {
    content: '';
    @apply absolute left-0 bottom-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-blue-400 transition-all;
  }
  .nav-link:hover::after, .nav-link.active::after {
    @apply w-full;
  }
}

---

2. 配置 Tailwind 构建命令

在你的项目根目录下，确保有 tailwind.config.js，内容大致如下（可根据实际情况调整）：

module.exports = {
  content: [
    "./themes/mytheme/layouts/**/*.html",
    "./layouts/**/*.html",
    "./content/**/*.md"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

---

3. 构建 Tailwind CSS

在项目根目录下运行（确保已安装 tailwindcss）：

npx tailwindcss -i ./themes/mytheme/assets/css/main.css -o ./themes/mytheme/static/css/tailwind.css --minify

• 这会把你自定义的 .nav-link 等组件编译进最终的 static/css/tailwind.css，页面引用即可生效。

---

4. 页面引用

确保你的 Hugo 模板 里引用的是 static/css/tailwind.css：

<link rel="stylesheet" href="/css/tailwind.css">

---

5. 以后自定义组件/样式

只需在 assets/css/main.css 里用 @layer components { ... } 和 @apply，重新运行构建命令即可。

---

以后有需求则：

1. 新建/编辑 assets/css/main.css，写自定义组件。
2. 运行构建命令生成最终 CSS。
3. 页面自动生效。