DEV Community
·
使用Air和Go的Tailwind CSS：无需Node，轻松应对
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
为了避免使用NPM/Node及其依赖，我在个人项目中选择不依赖Node。通过Tailwind CSS的新版本，我找到了一种无需Node即可编译CSS的方法，自动生成CSS文件。项目结构清晰，使用Go语言和air工具监控文件变化，简化了开发流程。Tailwind CSS v4去除了tailwind.config.js文件，加载指令更简单。
🎯
关键要点
- 为了避免使用NPM/Node及其依赖，选择不依赖Node进行个人项目开发。
- 通过Tailwind CSS的新版本，找到了一种无需Node即可编译CSS的方法，支持自动生成CSS文件。
- 项目结构清晰，使用Go语言和air工具监控文件变化，简化开发流程。
- Tailwind CSS v4去除了tailwind.config.js文件，加载指令更简单。
- 项目结构包括bin、cmd和.air.toml文件，cmd/api/main.go用于服务模板和静态文件。
- bin/tailwind/download-tailwindcss.sh脚本负责下载TailwindCSS CLI并设置为可执行。
- 配置.air.toml文件以自动编译CSS，添加css扩展到include_ext列表，设置pre_cmd命令。
- 在生产环境中构建时需调整命令以添加压缩，浏览器可能会缓存CSS更改。
❓
延伸问答
如何在不使用Node的情况下使用Tailwind CSS？
可以通过Tailwind CSS的新版本，使用Go语言和air工具来编译CSS，避免依赖Node。
Tailwind CSS v4有哪些重要变化？
Tailwind CSS v4去除了tailwind.config.js文件，简化了加载指令和设置的方式。
如何配置air工具以自动编译CSS？
在.air.toml文件中添加css扩展到include_ext列表，并设置pre_cmd命令以编译CSS。
项目结构应该如何组织以使用Tailwind CSS和Go？
项目结构应包括bin、cmd和.air.toml文件，cmd/api/main.go用于服务模板和静态文件。
如何下载和设置TailwindCSS CLI？
可以通过bin/tailwind/download-tailwindcss.sh脚本自动下载并设置TailwindCSS CLI为可执行文件。
在生产环境中使用Tailwind CSS时需要注意什么？
在生产环境中构建时需调整命令以添加压缩，并注意浏览器可能会缓存CSS更改。
➡️
