了解Tailwind

最近一个开源项目需要做个H5版，决定试试Tailwind，这里mark下我对它的认识和使用后的感受。

学习资料，当然首推官网，这里主要说下我的粗认识。

定位

• CSS框架，不是UI组件库，也不是UI组件CSS，比如它并不等价Bootstrap。

使用方式

• 直接CDN加载JS即可，淡然坏处就是全量加载了，体积问题需要考虑。
• PostCSS插件形式，很方便接入Webpack、Vite等构建工具。这种方式相当于构建环节生成最终CSS，按需加载，体积小。

特点

• 原子化CSS，好处就是按需用很舒服，可以组合很多样式，坏处就是类名会很多
• 样式名字很表意，玩多了就会很熟悉，能快速上手

实际使用的项目

1. 最近小程序项目采用的Taro+Webpack，Taro支持Tailwind，因此也很方便的就接入使用了。
2. 移动网页H5项目的话，因为使用的Webpack，所以也可以接入Tailwind。

Tailwind vs Bootstrap

比较并不合适，但对于小白用户来说，是可以了解其差异的。

• Bootstrap 是一个 UI 组件库，即最终产品是一个遵循 Bootstrap 设计系统的预先设计的按钮。
• Tailwind 是一个 CSS 实用程序库，即最终产品是一组以示意图定义的 CSS 类，可供您以示意图方式构建自己的按钮。

这两个是针对不同用例的不同工具。

写在最后

Tailwind个人觉得足够简单和纯粹使得它可以成为一个很好的CSS框架，实际项目中也并不影响使用其它UI组件库样式等，因此是个很好的工具，确实适合快速开发。