安装并搭建 Tailwind CSS 开发环境

更新日期: 2022-04-09 阅读次数: 3563 字数: 481 分类: 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 的兼容性补全。

tags: Tailwind CSS

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式

谈笑风生

zb

不错 我也一直以为是台风,😂  拼音加英文 组合