tailwindUI——一款让你使用一次就会爱上的CSS组件

应该有不少人听说过tailwindCSS，是一款蛮方便的CSS框架；

有部分比较好的点；

一、响应式设计

css的媒体查询写起来还是比较麻烦的，如下：

@media only screen and (max-width: 760px) {.navbar {width:100%;}}

使用了Tailwind CSS就免去这些繁琐的东西。默认情况下，Tailwind使用移动优先断点系统，类似于您在Bootstrap或Foundation中可能使用的系统。

这意味着未加前缀的实用程序（如uppercase）在所有屏幕尺寸上都有效，而带前缀的实用程序（如md:uppercase）仅在指定的断点及以上断点生效。

二、Postcss运用

Tailwind CSS结合了 postcss，将基础的 css 全部拆分为原子级别，同时还补全各种浏览器模式前缀，兼容性更好。例如：border: 1px solid #eee;拆分为：border-width、border-style、border-color而且还支持根据自己设计稿定义契合自己项目的 csss 原子，这点真的很棒。

第一，如果不是为了快捷开发，恐怕不会有太多人完全满意传统 CSS 框架的样式设计。

第二，传统 CSS 框架通过“覆盖”进行定制。一般来讲，健康的做法是覆盖框架提供的变量，但是定制能力很有限。脏一点的做法就是手写 CSS 覆盖框架原生样式，但是原生样式之复杂（各种父级的不同情况，伪类的不同情况），哪怕一个小的组件，你也无法面面俱到。并且你最好得看源码。

三、可维护性

就拿我们实现一个按钮效果来说，使用utilities class实现的话如下：

<!-- Using utilities --><button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Button</button>

如果说有比较常用的，这里还能使用@apply指令围绕通用实用程序模式创建抽象，可以轻松解决此问题。

<!-- Extracting classes using @apply --><button class="btn btn-blue">Button</button><style></style>

这样维护起来也比较方便，相比bootstrap等这些框架，显得更加灵活，可操作性更强。

tailwindUI是在tailwindCSS基础上的组件库，有多样的成品组件使用；

官方提供了500+示例，都是成品，方便使用，复制粘贴就能使用，总一款示例是符合你的。

官方提供了三种代码格式，react/vue/html，可以根据你的需求自行选择使用。

所有的示例都是自适应的，无需再去调整样式在不同屏幕下的尺寸，真正的做到拿来就能用。

tailwindUI组件，目前官方标价：

279美元——完整包；

149美元——应用程序界面；

149美元——营销；

149美元——电子商务；

四种方案，可以根据自己的需求去购买相应的套餐；

本人因为工作需要，购买了279美元——完整包的套餐，目前也将组件整体搬到本地存放，方便日后使用，感兴趣的的小伙伴可以去购买官方正版或者联系我咨询；