部署到Netlify后如何让Tailwind CSS生效？

核心排查与修复步骤 #

1. 核对CSS文件引用路径 #

确保HTML中output.css的引用路径适配生产环境：

• 若HTML和CSS同处src目录，引用应为：

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

• 若Netlify站点根目录是项目根目录，而HTML在src下，需调整为/src/output.css，或确保构建后两者处于同一目录。

2. 确认构建命令与Netlify配置匹配 #

在项目根目录的package.json中添加正确的Tailwind构建脚本：

{
  "scripts": {
    "build": "npx tailwindcss -i ./src/input.css -o ./src/output.css"
  }
}

然后在Netlify后台的站点设置→构建和部署中：

• 构建命令填写npm run build
• 发布目录设置为HTML所在的src目录（或构建后生成文件的目录）

3. 验证Tailwind配置文件的内容扫描范围 #

检查tailwind.config.js的content字段，确保包含你的HTML文件路径，否则Tailwind无法生成对应样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 本地预验证构建结果 #

先在本地执行npm run build，查看src/output.css是否包含编译后的Tailwind样式（如带有@tailwind base;相关内容）。如果本地构建出的CSS为空或样式缺失，需先解决本地构建问题再部署。

内容的提问来源于stack exchange，提问作者Okobi Miracle Ikechukwu