顺风 CSS
Tailwind 中文意思是顺风。而我一直以为这个单词的意思是台风。。。
实际上台风是，typhoon。
为何要使用 Tailwind CSS
- 在写小程序样式的时候，为了排版方便，我自己也形成了一套基于 flex 的布局 class，跟 tailwind css 的理念是一样的，确实写起来很快
- Tailwind CSS 官网整理出来所有的 class，可以一目了然地对比各种样式的区别，比自己去挨个尝试方便多了
安装 Tailwind
如果本机没有 npm 或 npx 可以参考这里安装最新的 node，自带了 npm，npx。
npm install -D tailwindcss
-D, –save-dev: Package will appear in your devDependencies.
npx tailwindcss init
Created Tailwind CSS config file: tailwind.config.js
此时，当前目录下多了三个文件，及一个令人恶心的 node_modules 目录
package-lock.json
package.json
tailwind.config.js
node_modules/
tailwind.config.js 文件的内容格式：
> cat tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
Tailwind 配置
由于，Tailwind 会扫描 html 和 js 文件，来确认你到底用了哪些 class，以此来生成最简的 css 文件。
所以，需要配置一下 html 及 js 文件所在的目录。
例如，如果我的模板文件都在 templates 目录下：
module.exports = {
content: ["./templates/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
其他参考
https://tailwindcss.com/docs/installation
即可，毕竟好理解。
监听 css 文件变化的命令
做成 golang 项目的 Makefile 命令，方便记忆。
.PHONY: tailwind
tailwind:
npx tailwindcss -i ./css/main.css -o ./public/css/main.css --watch
其他
- 一个默认三行的 css 生成的文件里，包含了标准的 reset 操作。
- 可以使用 apply 将一些 tailwind class 组合，形成新的 class。避免写 class 过长
npx 与 npm 的区别
npm install -D tailwindcss
npx tailwindcss init
- npm 用于下载 nodejs 依赖包
- npx 用于执行 nodejs 包
- npm 内置了 npx
x 代表 Execute，即执行的意思。
PostCSS 是干什么的
从官网看就是做一些 css 的兼容性补全。
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式