CSS发展到现在，基本经历了三个阶段。

是类似于编程中面向过程的写法，需要什么样式，自己在css中写什么样式。对代码有洁癖的程序员会进行简单的css复用。但是也只是简单的复用，大多数时候还是需要什么写什么，想怎么写怎么写。

类似于编程中面向对象的写法，将相同视觉的UI封装成一个组件。比如一个按钮，整个项目中，这个按钮被多次使用，并且样式一致。那么就可以封装成一个按钮类。使用的时候直接使用这个类名称就OK。

这也是bootstrap，element ui，Antd，bulma的做法。

这种框架的优势在于，封装了大量常见的UI。比如你需要一个表单，，需要一个导航，需要一个弹窗，Card卡片。有现成的class。直接拿过来用，就可以快速的完成效果。完全不需要动手写css。

这也是目前比较流行的方法。这几年几乎很少有项目是自己一点一点手写样式的了，多多少少都会使用到一些css框架。

对于一些需要快速交付的项目，非常适合使用这种组件化css框架。

也叫做CSS原子化。和上面第一个阶段第二个阶段都有类似的地方。依旧是组件，只是每个组件都是一个单一功能的css属性。

上面第一个阶段的时候，我们讲了有些有对代码有追求的人，会开始复用css。
比如页面中大量的用到 float:left 。那么就可以封装一个类，比如是这样

.left {float:left}

然后需要使用 float:left 的时候，直接使用 .left 就可以。

但是我们自己写css的时候，仅仅是封装一些常用的简单的类，绝大多数的css，都需要动手去写css。比如你要写个宽度12像素。你就得老老实实的去写 width:12px ，逃避不了，不过估计也没人想过逃避。

Tailwind CSS就是第三个阶段的产物，它做了什么呢？
它将所有的css属性全部封装成语义化的类，比如你想要一个 float:left ，它已经帮你封装好了，你直接使用一个 float-left 就可以。

需要一个宽度为12像素，只需要写 w-3 就可以。

举一个完整的例子，你可能需要实现下面这样一个效果：

按照我们正常的写法，需要这样写

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>
<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
</style>

但是使用Tailwind CSS，你只需要这样写就可以

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

极大的减少了代码量。

这种写法其实并不稀奇，就如同上面第一个阶段所说，我们自己写css的时候，也会做一些类似Tailwind CSS这样的事情，简单的封装一些css属性。
新浪网在十几年前就干过这事，还有ACSS，也是这个原理。只是被大家喷成了筛子。错误的时间做了正确的事情，免不了付出代价，造物弄人。

回到正题，但是，它和bootstrap之类的css框架有什么区别呢？
区别在于bootstrap帮你封装好了一些样式，比如卡片，表单，按钮，导航等等。
Tailwind CSS没有封装任何样式，一丝一毫都没有。
bootstrap降低了定制性，你很难依靠bootstrap去定制一个自己的类，虽然bootstrap也有部分原子化的类名，但那只是常用的一些css属性。
Tailwind CSS完全自由，你可以玩出自己的花样，你甚至可以通过Tailwind CSS，打造一套属于自己的类似bootstrap这样的ui框架。

你可以随心所欲写出自己的样式。想怎么折腾怎么折腾。
如果使用bootstrap，你如果想改变一个按钮的样式，就会比较困难。你得用覆盖式的写法，通过自己的样式覆盖掉bootstrap自带的样式。如果框架本身不支持修改，你通过自己的写法去修改框架本身的特性，这是一种很脏的写法。非常别扭。
但是这个问题在Tailwind CSS完全不存在。Tailwind CSS没有自以为是的封装任何样式给你。

使用Tailwind CSS，基本可以不用再写css。所有的效果都可以通过class名来完成。我用Tailwind CSS写了几个页面，到目前为止，还没有写过一行css。

对于经常手写css的程序员来说，最大的噩梦可能就是怎么给class取名了。尤其是在同一个区块里面，区块名称，子元素名称，等等，一个页面动辄几十个几百个类名。非常痛苦。而这其中，真正能复用的class可能就个别几个。

使用Tailwind CSS完全不用为取名字烦恼，因为所有的css属性都被框架语义化封装好了。只需要在class里面引用就好。

Tailwind CSS遵循移动优先的设计模式。断点系统很灵活。也是目前所有css框架里做的最好的。比如你要实现一个媒体查询，根据不同的屏幕宽度实现不同的图片宽度。
按照之前的写法，你可能得这么干