TailwindCSS 作者谈开发初衷
原文：CSS Utility Classes and "Separation of Concerns"
最近Tailwindcss频繁出现在我的视野里，从单词拼写中看，多多少少与css有点关系。近几年是JS框架大行其道，CSS方面少有新的框架出现。
昨天突然看到尤大神在Github上的动态，fork了该项目，看来马上要火的节奏啊！
我们来看下这个tailwindcss究竟是个什么东西，有什么独特的功能和优势，最重要的是能否给我们开发者带来显而易见的效率的提升。
首先看官网对它的定义
Rapidly build modern websites without ever leaving your HTML.
tailwindcss 基于比组件更小、更灵活的工具类思想的 CSS 框架。这个思想简单来说就是用 class 保证灵活、便于自定义组件，而不是在组件基础上实现个性化。
可以看到代码的特点是一个Html标签伴随着一堆的CSS类，这种写法好像也不陌生。就是将样式封装的粒度更细。所以很多人看到就说“这不就是原子类吗？”
作者有多年工作经验，其对待 CSS 的心路历程如下：…
一款绝对让你惊艳的CSS框架——TailwindCSS
前言
前段时间，laravel更新8.0版本，系统内置的Jetstream应用支架使用的是Tailwind CSS，于是勾起了我对Tailwind CSS的兴趣。
后来项目中也是逐步使用，总体感觉超级爽。就像他的简介一样Utility-First效用优先的CSS框架。…
初探Tailwind CSS
写CSS有些年头了，经历了不同的时期用不同的姿势来编写CSS，其目的就是给Web元素添加样式。但编写样式着实令人感到烦恼，甚至是效率低下，成本极高。也正因如此，社区中有很多CSS方法论和框架来帮助开发快速有效编写CSS。虽然这些方法论和框架有助于我们快速编写CSS，构建UI组件，但也有令人感到头痛之处，比如冗余的代码，代码的覆盖等。随着功能第一（Utility-First）CSS的出现，让我看到了编写CSS的另一种有效的方式，该方式也被认为是现代Web中构建Web界面最好的选择。其中Utility-First CSS的典型作品之一就是Tailwind CSS。接下来，我们就来了探讨Tailwind CSS，我们将了解基于组件的样式有哪些问题，以及为什么要基于Utility-First CSS来构建组件。
编写CSS的姿势
时至今日，编写CSS有很多方式，也可以基于一些CSS框架来编写。比如2019年CSS状态报告中也有相关的统计:
或许你在项目中已经用了一些CSS方法论，比如BEM、Atomic CSS、OOCSS、SMACSS和ITCSS等，也体验过了在项目中引用社区中优秀的CSS框架，比如大家熟悉的Bootstrap、Foundation等。
随着一些优秀的JavaScript框架（比如，React和Vue）等出现，我们构建Web的方式也变了，也致使我们编写CSS的方式也不同了，社区中有很多关于CSS-in-JS的讨论，同样也有不同的方式方法：
如果你面对众多的编写CSS的姿势和管理维护方式感到困惑的话，建议你可以按照下图的流程来做选择：
有关于这方面的讨论，这里就不做过多的阐述了，如果你感兴趣的话，可以阅读：
虽然这些CSS方法都在试图着帮助我们解决CSS编写和管理的问题，但是如果我们能够编写实用程序类（Utility Class），然后在我们的代码库中重复使用它们，就会更容易一些。这些实用工具类是详尽的，可以作为padding、margin、font-size等方面的独立指南。
另外实用程序类（Utility Class）将解决重复样式的问题，因为我们不再需要编写任何自定义样式。此外，如果我们的UI风格遵循特定的标准，我们也可以在开发中遵循相同的标准。其中Tailwind CSS就是社区中目前具备这些特点的CSS框架之一。是不是对Tailwind CSS感到好奇，如果是的话，请继续往下阅读。
什么是Tailwind CSS？
Tailwind CSS官网是这么描述的：
一个实用的CSS框架，是一个高度可定制的，底层的CSS框架，它为你提供了所有的构建模块，可以快速构建定制设计，也不会有额外的自定义CSS需要去覆盖。
换句话说，Tailwind
近期评论