Gin+Tailwind CSS 服务器渲染
如果是由Gin渲染，首先应考虑gin的目录结构：
├── static/ # gin指定的静态目录
│ ├── tailwind.css # css文件
├── templates/ # gin的模板目录
│ ├── layout.html#主模板文件
│ ├── index.html #网页文件
#如果有自写包要放入文件夹，导入的时候写<项目文件夹>/<包文件夹>
├── routers/
│ ├── router.go #自写包文件
├── main.go #go程序运行主文件
├── tailwind.config.js #tailwind配置文件
├── go.sun等其他go程序文件和tailwind文件
指定tailwind的配置文件：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./templates/*.html", "./static/**/*.{css,js}"],
theme: {
extend: {},
},
plugins: [],
}
tailwind.css文件：
@tailwind base;
@tailwind components;
@tailwind utilities;
main.go的示范：
package main
import (
"github.com/gin-gonic/gin" //导入gin包
)
func main() {
r := gin.Default()
r.LoadHTMLGlob("templates/*") //加载html模板全局，指定templates目录下的所有文件
r.Static("/static", "./static") //静态文件处理,参数：路由，本地路径
r.GET("/", func(ctx *gin.Context) { //定义了一个路由和方法，定义了一个*gin.Context的上下文参数，类似django视图的request参数
ctx.HTML(200, "index.html", gin.H{"nihao": "哈哈"}) //指定了index.html文件和需要传给模板的变量
})
r.Run(":80") // 启动HTTP服务器，监听端口80
}
layout.html主模板示范：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试标题</title>
<link href="./static/index.css" rel="stylesheet">
</head>
<body>
<div class="text-sm text-gray-900">
<nav class="flex items-center px-4 py-3 bg-gray-900 justify-between">
<div class="text-white">模板3</div>
<div class="text-white">{{ .nihao }}</div>
</nav>
</div>
<div>上面是主模板顶部内容</div>
{{block "main" .}}{{end}}
<div>这里是柱模板底部内容</div>
</body>
</html>
index.html子模板示范：
{{template "layout.html"}}
{{define "main"}}
这里是index内容
{{end}}
go需要用到的命令：
go mod init myapp
#以当前目录为项目目录并创建go.sum文件，myapp可以任意名字
go run . #调试运行go mod tidy #会修改go.sum和go.mod文件确保依赖与实际一致
tailwindcss常用命令：
npm install -D tailwindcss #安装
npx tailwindcss init #初始化
npx tailwindcss -i ./static/tailwind.css -o ./static/index.css
#指定参考文件为tailwind.css，而构建的文件为index.css
npx tailwindcss -i ./static/tailwind.css -o ./static/index.css --watch
#实时构建