安装并搭建 Tailwind CSS 开发环境

顺风 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 聊聊， 查看更多联系方式

tags: Tailwind CSS