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

此款组件账号团购价为360元/各账号

应该有不少人听说过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，可以根据你的需求自行选择使用。

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