Tailwind CSS 上手体验
tailwindcss 是一个 CSS 框架
现在的大多数 CSS 框架/组件库越来越强大，提供了很多开箱即用的组件，如日期选择器、完整的表单校验、警告提示、模态框等等… 而 tailwindcss 不同，它的目的是专注样式，将常用的样式代码封装成了“工具类”，在开发时把你想要的样式类名写在元素的 class 里。
比如你想要一个 3 列带间隔的 grid 布局的盒子，你只需要写：
<div class="grid grid-cols-3 gap-4">
<div>1</div>
<!-- ... -->
<div>9</div>
</div>要指定行数？加上 grid-rows-x
<div class="h-64 grid grid-cols-3 grid-rows-3 gap-4">
<div>1</div>
<!-- ... -->
<div>9</div>
</div>此类框架的缺点是：前期必须一直开着它的文档，每用到一个东西就要查一次。但好消息是文档非常易读明了，且提供了清晰的示例：
另外加上开发工具的插件，提供了很好的代码提示
在 WebStorm 和 VSCode 中的插件商店中搜索 tailwindcss 都可以找到代码提示的插件。
在熟悉一段时间后，差不多就猜透了它的类名的命名规律，搭配代码提示插件，开发效率会大幅提高，文档也不用经常查了。
比如说指定 padding，就是命名成 p-x ，x 是大小的数值。
padding-left？就是pl-x,同理 padding-right 就是pr-x。
左右都加 padding？是 px-x，那同理上下都加 padding 就是py-x。
熟悉了这些套路，margin 的类名也能猜出来了，就是把p换成m就行了。
最后这里是 tailwindcss 的文档地址，欢迎大家体验：
熟悉使用规则之后，效率提升不少啊