Tailwindcss介绍及优劣势说明

Tailwindcss介绍

Tailwindcss是一个CSS框架（我们暂时就叫做框架吧，容易理解），目前已经在越来越多的项目中使用了。Tailwindcss框架与其他流行的CSS框架是有着明显区别的，如Bootstrap框架。可以说是两类框架有着不同的设计理念和自己的设计哲学。Bootstrap封装好了大部分的前端组件，提供了标准化的东西，同时也支持自定义CSS属性，配合自己的JS文件，可极大的提高前端的开发效率和便捷性。Tailwindcss却恰好相反，Tailwindcss提供了一个个的原子属性，用户通过原子属性设计前端样式，前端的美观性完全取决于设计者的审美及能力。

Tailwindcss优劣势说明

Tailwindcss优势

1、提供CSS原子化属性，DIY能力强；

2、Html中直接使用tailwindcss，代码可读性较高；

3、支持自定义前缀，避免样式冲突

4、压缩后的CSS文件较小，便于快速加载；

Tailwindcss劣势

1、CSS属性不全面，需要在tailwind.css文件中自定义（特别是涉及浏览器相关的属性）；

2、依赖父类或者父类子类配合的场景下，需要在tailwind.css文件中自定义；

3、Html中直接使用tailwindcss，会导致代码超长；

4、若没有统一的约定，CSS样式表顺序会影响代码可读性（已提供插件，自动对CSS样式进行排序）；

5、CSS编译速度慢；

Tailwindcss使用场景

1、如果需要在短时间内开发和上线，或对CSS不太熟悉，建议使用bootstrap等组件化的css框架，不需要太多自己的设计，直接使用就行；

2、如果有一些个性化的需求，且熟悉css，可以使用tailwindcss