一款绝对让你惊艳的CSS框架——TailwindCSS

前言

前段时间，laravel更新8.0版本，系统内置的Jetstream应用支架使用的是Tailwind CSS，因而勾起了我对Tailwind CSS的兴趣。

后来项目中也是逐步使用，整体感受超级爽。就像他的简介同样Utility-First效用优先的CSS框架。

相比bootstrap，semantic ui antd这些组件库，tailwind只是个css库，简单的说就是能够完成任何ui交互，而上面的组件库通常就是作个后台应用，因此使用tailwind的环境更普遍一些。

几个亮眼的地方

首先是响应式设计。

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

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

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

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

以下一段代码就能够实现不一样尺寸显示不一样样式，是否是比媒体查询写法方便不少呢！

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>

固然了，媒体尺寸断点也是能够自定义的。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

第二方面是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>
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    @apply bg-blue-500 text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-700;
  }
</style>

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

结语

总的来讲，Tailwind CSS改变了传统的方式，这样的写法代码量远远少于传统写法，能够大大节约开发时间，提升开发效率，我是真的有被惊艳到，你感受怎么样呢？

原文链接：https://www.wjcms.net/archives/一款绝对让你惊艳的css框架tailwindcss