一款好用的CSS框架 – Tailwindcss

最近两周刚接触了Tailwind CSS,自己尝试在项目中引用，感觉非常灵活，能够避免项目里产生很多冗余CSS。本篇分享就不赘述Tailwind CSS的使用方法了（官方文档），主要会给大家介绍一下，Tailwind CSS的优缺点。

亮点一：原子化CSS

原子CSS就是拆分，所有的CSS类都有唯一的CSS规则。

例如以下就是原子化CSS：

.w-100 {
  width: 100px;
}
.wp-100 {
  width: 100;
}
.bg-white {
  background: white;
}
.bg-red {
  background: red;
}

以下就不是原子化CSS：

.card {
  width: 100px;
  background: red;
}

通过原子化的思想，在CSS中我们也可以实现样式的复用，减少代码冗余，而且可以避免CSS命名的复杂度。
在Tailwind框架中，这些原子化的CSS类都已经定义好了，只需要阅读官方文档，熟悉这些命名规则即可（虽然这会增加一些记忆成本，但是并不需要我们死记硬背，很多我们都可以猜出来，比如w-50,h-3）,Tailwind中的Class命名也都是有规则的，如下所示。

亮点二：自定义响应式

说起响应式，大家的第一印象大概是像BootStrap,ElementUI这样的框架中，已经定义好的响应式。在这一方面，Tailwind做得更加灵活。

自定义断点：

// 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) { ... }
    },
  }
}

使用方法如下：

<img class="w-16 md:w-32 lg:w-48" src="...">

这就意味着，我们完全可以在HTML页面中定义好不同屏幕下元素的样式，而无需再在CSS中写很多media标签。

亮点三：兼容悬停，聚焦等其他状态的样式

说起定义元素在不同状态下的样式，我们传统的做法大概是这样的吧。

input:foucs {
  border: 1px solid blue;
}
input:hover {
  border: 1px solid red;
}

引入Tailwind之后，就可以这么写了

<input class="border border-transparent focus:border-blue hover:border-red">

亮点四：深色模式

今年做项目，接连遇到了两个主题切换的需求，看来网站能够适配不同的主题已经是流行的趋势了。Tailwind也抓住了这一点，让我们能轻松实现深色模式下的网站的样式。

首先在tailwind.config.js中开启深色模式。

// tailwind.config.js
module.exports = {
  darkMode: 'media'
}

接着，我们就可以在html中的元素上添加dark:用以标明元素在深色模式下应该使用的class。

<div class="bg-blue-100 dark:bg-blue-800">
  <h1 class="text-gray-900 dark:text-white">This is dark theme!</h1>
</div>

弊端一：加重了HTML

引入了Tailwind之后，个人感受是CSS变简单了，但是HTML却加重了，几乎每一个元素后都会跟上一长串class,如果有响应式和focus等状态，HTML会更长。

弊端二：代码可读性变差

我们之前定义一个card可能是这样的，所有的class都是依据元素的作用来命名的。

<div class="card">
  <div class="card-title">title</div>
  <div class="card-content">content</div>
  <div class="card-footer">footer</div>
</div>

引入Tailwind之后，可能会变成这样。

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="border-solid border-4 border-light-blue-500 text-xs">title</div>
  <div class="text-xl font-medium text-black">content</div>
  <div class="text-gray-500">footer</div>
</div>

Tailwindcss颠覆了我们传统写css的方式，在小型项目中还不明显，在大型项目中的优越性就体现出来了。总之，我还是很推荐大家尝试一下的。

推荐一款好用的CSS框架 – Tailwindcss