Go Web应用中TailwindCSS样式不生效问题求助

针对你的情况，按以下步骤逐一排查：

1. 修复HTML语法错误 #

你的index.html里存在未闭合的标签：

<h1>Workout: <h1>

应修正为：

<h1>Workout: </h1>

未闭合的标签会导致DOM结构错乱，直接影响后续元素的样式渲染逻辑。

2. 确认Go服务器正确配置静态文件服务 #

Go默认不会自动处理静态文件请求，必须在代码中添加静态文件路由，确保/assets路径下的资源能被浏览器正常访问。示例配置：

package main

import (
	"html/template"
	"net/http"
)

// 替换为你的结构体定义
type Exercise struct {
	Name string
	Sets []Set
}

type Set struct {
	SetNumber int
	Weight    float64
	Reps      int
}

func main() {
	// 映射/assets路径到本地./assets目录，StripPrefix确保路径匹配正确
	http.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("./assets"))))

	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		tmpl, err := template.ParseFiles("./templates/index.html")
		if err != nil {
			http.Error(w, err.Error(), http.StatusInternalServerError)
			return
		}
		// 传入模板示例数据
		data := struct {
			Date      string
			Exercises []Exercise
		}{
			Date: "2024-05-20",
			Exercises: []Exercise{
				{
					Name: "Bench Press",
					Sets: []Set{{SetNumber: 1, Weight: 80, Reps: 10}},
				},
			},
		}
		tmpl.Execute(w, data)
	})

	http.ListenAndServe(":8080", nil)
}

如果缺少这条路由配置，浏览器请求/assets/css/output.css会返回404，样式自然无法加载。

3. 验证Tailwind CSS构建流程 #

• 确保运行了正确的构建命令，开发环境建议开启watch模式自动更新样式：

  npx tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch
  

• 打开生成的output.css文件，检查是否包含.text-3xl、.font-bold、.underline这些类。如果没有，说明Tailwind未扫描到HTML中的类：
  • 确认在项目根目录下运行Tailwind命令，保证tailwind.config.js中content路径./templates/**/*.{html,js}能正确匹配到模板文件。
  • 手动修改HTML中的类（比如临时添加text-red-500），观察watch模式是否会重新生成output.css并新增对应类。

4. 检查浏览器网络请求状态 #

打开浏览器开发者工具（F12），切换到网络标签页，刷新页面：

• 若output.css请求状态为404：调整Go静态路由规则或HTML中link标签的href路径。
• 若状态为200：查看响应内容是否为正确的Tailwind生成CSS，若为空或内容异常，重新执行构建命令。

内容的提问来源于stack exchange，提问作者Rik W