使用 Tailwind CSS 的几点感触

大家好，我是大澈！

偶然看到了js前端样式库的排名，Tailwind CSS 以大比例的优势，稳稳占据第一的位置。

对于 Tailwind CSS 我之前用的很少，我一般都是使用自定义原子css写法，感觉更自由更舒服，而且还更加通用，不知道有没有同感的兄弟哈。

虽然 Tailwind CSS 我用的不多，但是借着这个话题的机会，还是要聊聊我对前者的几点感触吧。

作为一名极简派，老规矩，尽可能长话短说，思维导图走起！

一、css写法的3个阶段

阶段一：原生写法

这种写法就是我们最初的css写法，每一个元素都设置一个自己独特的类。

这样就会非常自由灵活，当然缺点也很明显，代码量巨大，且起许多个类名也是个令人头疼的问题。

于是，出现了第二种写法。

阶段二：组件写法

这种写法就是将许多类中重复的样式提取出来，使其成为一个完整的公共类。

像我们过去常用的样式库 bootstrap ，将相似元素的公共样式封装成一个组件，在需要的地方直接引入就好了。

比如一个按钮，在项目中这个按钮被多次使用，并且样式一致，那么就可以封装成一个按钮组件，使用的时候直接使用这个类名就OK了。

但是，这种写法修改起来非常麻烦，只能写一个新的类名去覆盖原来的样式，并且组件中会存在很多冗余的样式，自定义性极差。

于是，出现了第三种写法。

阶段三：原子化写法

这种写法把单一的css属性都封装成一个单独的类，使用时只需要去自由组合即可，自定义问题得以解决。

其典型的样式库就是 Tailwind CSS 。

二、定义

就是一个CSS样式库，和我们熟悉的 bootstrap 一样。

只不过，它是将一些单一的css属性封装成一些单一的类，开发时不再需要自己书写css样式，只需添加需要的类名即可，可显著提高开发效率。

示例：

text-center：文本居中。

bg-blue-500：背景颜色为蓝色。

p-4：内边距为 1rem。

三、优缺点

优点：

1、自定义性强

2、基本不再需要写css

3、不再需要为起类名而发愁

4、超简单实现响应式页面

缺点：

1、类名太长了

虽然 Tailwind CSS 也支持把很多类提取成一个组件，但是对于不会再次复用的类，提取组件也没什么必要了。

2、熟悉记忆类名需要时间

四、应用场景

个人认为，最适合去做定制化强的响应式页面。

- end -

承接产品推广/软件开发/bug修复，联系和更多内容在绿色App搜@程序员大澈：专注于前后端技术知识分享，最后感谢兄弟们给个点赞、分享、推荐！