CSS – Tailwind CSS

前言

很多时候 CSS 未必是需要管理的, 比如做网站, Landing Page (类似宣传单). 很多时候做了 > 用了 > 丢 > 再做新的.

它没有 "维护" 的必要. 所以也就不需要搞什么 Sass 去做代码管理之类的.

反而需要的是快速开发. 而快速开发最快的方式就是只写 HTML 不写 CSS. 少些一样东西自然就快乐丫.

你可能会想, 这说的不是 Bootstrap 吗? 没错, 但是 Bootstrap 把设计封装得太上层了. 连不会 CSS 的人都可以使用. 这对我们会 CSS 的人不就是个鄙视吗? 

于是 Tailwind CSS 横空出世. 它的目的和 Bootstrap 一样都是要加快开发速度 (针对不需要维护的项目, 用了丢那种), 但它又给了开发人员使用 CSS 的能力.

简单说就是让你在 HTML 写 CSS. 类似写 inline style 但又不那么肮脏. 

总结, 对于前端开发, 尤其是做 marketing 项目, 网站, Landing Page 之类的. 个人觉得 Tailwind CSS 绝对是必须要的利器. 

参考:

官方网站

由于官网写的太好了, 这篇只会记入一些链接, 和概念而已.

去官网 Crtl + K search 就可以了.

安装

Webpack

请看这篇:  Tailwind CSS and PostCSS 的部分

Tailwind CLI

参考: Get started with Tailwind CSS

如果使用 CLI 的话建议配上 Headwind 插件. 

但我个人倾向于搭配 Webpack 使用.

关于 Purge

Bootstrap 的使用方式是在 HTML 插入一个 CSS Link, 这个 CSS 包含了许多定义好 class.

我们在 HTML 添加 class 就可以使用了. 一个很大的问题就是这个 CSS Link 体积可能不小, 必须全部加载哪怕最终没有用到.

Tailwind 不同之处就在这里, 因为它有一个 compile 的过程 (前端工程化的体现丫). 

首先它会通过 tailwind.config.js 里的 content path 去扫描 html, scss, js 文档. 从里面发现 tailwind 的 utility class.

然后把有用到的 ultility class 的 style 动态写入到一个 css 里, 再把它写入有调用 @tailwind utilities 的地方.