随着翻译 Tailwind CSS 以及我自己项目的使用，对这个 CSS 框架有些认识和使用感触。在此总结发布出来。供大家参考
就是一个 CSS 框架，和你知道的 bootstrap，element ui，Antd，bulma。一样。将一些 css 样式封装好，用来加速我们开发的一个工具。
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 就可以。
举一个完整的例子，你可能需要实现下面这样一个效果：
按照我们正常的写法，需要这样写
<divclass="chat-notification"><divclass="chat-notification-logo-wrapper"><imgclass="chat-notification-logo"src="/img/logo.svg"alt="ChitChat Logo"></div><divclass="chat-notification-content"><h4class="chat-notification-title">ChitChat</h4><pclass="chat-notification-message">You have a new message!</p></div></div><style>.chat-notification{display:flex;max-width:24rem;margin:0auto;padding:1.5rem;border-radius:0.5rem;background-color:#fff;box-shadow:020px25px-5pxrgba(0,0,0,0.1),010px10px-5pxrgba(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，你只需要这样写就可以
<divclass="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"><divclass="flex-shrink-0"><imgclass="h-12 w-12"src="/img/logo.svg"alt="ChitChat Logo"></div><div><divclass="text-xl font-medium text-black">ChitChat</div><pclass="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 框架里做的最好的。比如你要实现一个媒体查询，根据不同的屏幕宽度实现不同的图片宽度。
按照之前的写法，你可能得这么干
@mediaonly screen and(max-width:1280px){.img{width:196px;}}@mediaonly screen and(max-width:760px){.img{width:128px;}}
但是在 Tailwind CSS，一句话就能搞定：
<imgclass="w-16 md:w-32 lg:w-48"src="...">
超级方便。
Tailwind CSS 虽然没有封装任何 UI，但是他默认提供的一些属性值都是很专业的。比如颜色
还有各种内边距外边距，宽高，文字大小行高颜色等等。即使你不懂设计，按照他内置的属性做出来的东西，也不会太差。
Tailwind CSS 是把所有样式写在 class 里面。内联样式是把所有样式写在 style 里面，所以会让很多人造成一个印象：Tailwind CSS 和内联样式差不多，大同小异。
其实是有很大的区别，Tailwind CSS 相比于内联样式，有以下几点特点：
使用内联样式，每个值都是一个随便填写的数字。使用 Tailwind CSS 类，你要从预先定义好的设计系统中选择样式，这样你开发出来的页面，视觉上会保持一致，不会乱七八糟。
您不能在内联样式中使用媒体查询，但您可以使用 Tailwind 的响应式类来轻松开发完全响应式界面。比如你可以在 class 里写一个 sm:text-left, 代表的是，在小屏幕上，文字居中的方式是居左显示。但是你在内联样式是不可能做到这些的。
比如你可以在 class 里面写一个 hover:text-white , 代表的是鼠标滑过的时候，文本是白色。
正如 Tailwind CSS 官网首页的口号一样，从此让你写样式不再离开 html 页面。Tailwind CSS 将 HTML 与 CSS 高度解耦，把本来 CSS 的一些工作转嫁给了 HTML。好处是使用 Tailwind CSS 你可以从此不再写 css。但坏处是你的 html 标签的类名会很长很长。比如
<ahref="#"class="text-sm font-medium bg-purple-600 rounded-full py-4 px-11 text-white inline-block border border-solid shadow hover:text-purple-600 hover:bg-white hover:border-purple-600 transition duration-300"role="button">Start Ticketing</a>
虽然 Tailwind CSS 也支持把很多属性提取成一个组件，但是对于不会再次复用的 class。提取组件也没什么必要。
所以类名很多是我目前遇到的不太舒服的问题。
这一点逃避不了，所有的新技术，所有的 css 框架都有熟悉成本。Tailwind CSS 也一样。比如你想做一个圆角，那你得知道 Tailwind CSS 里面的圆角属性怎么写，边框怎么写，边框样式怎么写等等。你需要不断的去看文档。
我对 Tailwind 的文档进行了翻译，中文文档见：tailwind.wyz.xyz/
所以一开始使用 Tailwind CSS，特别是第一个项目，你会用起来比较痛苦。很多不喜欢 Tailwind CSS 的人可能从第一个项目就会放弃了。
但是只要你用 Tailwind CSS 做一两个项目，基本明确的告诉你，你以后很难再回到手写 css 的时候了。大多人都会觉得” 很香”。
另外是，Tailwind CSS 的作者针对这个问题，开发了一个专门用于 vscode 的 Tailwind CSS 代码提示插件。会有效的提高开发效率。
当然，这是必须的。作为一个新兴 css 框架。在这一两年之内，Tailwind CSS 框架的上升率已经稳居第一了。而且这种写法，在目前看来，优越与其他的任何 css 框架，目前看来这也是趋势。除非以后再出来什么奇葩的玩意儿。
建议对技术有追求的人最好学习一下。所有的新技术，都是学起来费劲，但用起来简单。
大多数情况下不建议，Tailwind CSS 的主要优势在于开发效率的提升。如果一个项目你已经开发完成了。就没必要重新使用 Tailwind CSS 了。
但如果你之前的这个项目，你本来也准备重构了。在犹豫用什么 css 框架，那你可以试试 Tailwind CSS。
另外是，如果一个项目，三天两头的更新迭代前端界面，并且之前的代码写的也不怎么好，那建议使用 Tailwind CSS 重构。
不是，主要看你的场景。我个人感想，如果一个项目，需要快速或者简单交付，那没必要用 Tailwind CSS。用 bootstrap，bulma 之类的框架可以让你很快的完成一个项目。不用纠结太深的技术。
Tailwind CSS 更适合于页面定制化高的场景。
是的。因为它需要把所有的 css 属性全部都封装一遍，所以 css 文件巨大，3M 多。所以不建议在页面内直接引入 Tailwind 原生 css 文件的做法。
Tailwind CSS 官方团队为了解决这个问题，提出了一个方案，在编译的时候引入 PurgeCSS 这个工具，构建的时候，会自动删除掉所有你没用到的 css。只保留你用到的 css。这样最终打包出来的 css 文件极小极小，一般的项目构建出来的 css 文件，压缩一下甚至不会超过 10K。
