大家好，我是大澈！
偶然看到了jshtml" title=前端>前端样式库的排名，Tailwind CSS 以大比例的优势，稳稳占据第一的位置。
对于 Tailwind CSS 我之前用的很少，我一般都是使用自定义原子html" title=css>css写法，感觉更自由更舒服，而且还更加通用，不知道有没有同感的兄弟哈。
虽然 Tailwind CSS 我用的不多，但是借着这个话题的机会，还是要聊聊我对前者的几点感触吧。
作为一名极简派，老规矩，尽可能长话短说，思维导图走起！
一、html" title=css>css写法的3个阶段
阶段一：原生写法
这种写法就是我们最初的html" title=css>css写法，每一个元素都设置一个自己独特的类。
这样就会非常自由灵活，当然缺点也很明显，代码量巨大，且起许多个类名也是个令人头疼的问题。
于是，出现了第二种写法。
阶段二：组件写法
这种写法就是将许多类中重复的样式提取出来，使其成为一个完整的公共类。
像我们过去常用的样式库 bootstrap ，将相似元素的公共样式封装成一个组件，在需要的地方直接引入就好了。
比如一个按钮，在项目中这个按钮被多次使用，并且样式一致，那么就可以封装成一个按钮组件，使用的时候直接使用这个类名就OK了。
但是，这种写法修改起来非常麻烦，只能写一个新的类名去覆盖原来的样式，并且组件中会存在很多冗余的样式，自定义性极差。
于是，出现了第三种写法。
阶段三：原子化写法
这种写法把单一的html" title=css>css属性都封装成一个单独的类，使用时只需要去自由组合即可，自定义问题得以解决。
其典型的样式库就是 Tailwind CSS 。
二、定义
就是一个CSS样式库，和我们熟悉的 bootstrap 一样。
只不过，它是将一些单一的html" title=css>css属性封装成一些单一的类，开发时不再需要自己书写html" title=css>css样式，只需添加需要的类名即可，可显著提高开发效率。
示例：
text-center：文本居中。
bg-blue-500：背景颜色为蓝色。
p-4：内边距为 1rem。
三、优缺点
优点：
1、自定义性强
2、基本不再需要写html" title=css>css
3、不再需要为起类名而发愁
4、超简单实现响应式页面
缺点：
1、类名太长了
虽然 Tailwind CSS 也支持把很多类提取成一个组件，但是对于不会再次复用的类，提取组件也没什么必要了。
2、熟悉记忆类名需要时间
四、应用场景
个人认为，最适合去做定制化强的响应式页面。
- end -
承接产品推广/软件开发/bug修复，联系和更多内容在绿色App搜@程序员大澈：专注于前后端技术知识分享，最后感谢兄弟们给个点赞、分享、推荐！
