什么是 tailwindcss
首先它是一个通用的类 css 框架,它内置了很多方便使用的 class,比如 text-center,pt-4,rotate-90,通过使用这些内置的样式,你可以非常快速地构建出一个网站的雏形。
tailwindcss 从大小,颜色,字体,阴影方面去优化你的界面,你可以通过它们的组合搭配构建出最满意的视觉效果。
强大的的包容性
如果你真的使用过 tailwindcss 的话,你会发现它的包容性非常强,一个固定的 html 结果,你完全可以使用 tailwindcss 的不同样式而构建出不同的网页效果,可以说你写了一套 html 代码,通过 tailwindcss 你就相当于有了好几个不同的主题。
精简代码
可以说随着项目的发展,总是会或多或少遗留一些未使用过的 css 样式,随着时间的积累,它们会越来越大,导致加载速度变慢,导致维护起来也变得困难,不过这些在使用 tailwindcss 的时候完全不存在,tailwindcss 会自动删除未使用的样式,通过处理器删除未使用的 css 之后,大部分的 css 都会变得非常小。
响应式支持
我们知道通过媒体查询是可以实现页面的响应式的,tailwindcss 通过内置不同的宽度前缀样式来实现响应式,tailwindcss 使用移动优先策略,也就是说无前缀的样式所有页面宽度都适用,而有前缀的样式只在特殊的宽度设备上适用。当然,对于 tainwindcss 还支持你自定义媒体查询宽度。
暗黑模式
自从苹果推出了暗黑模式后,现在不管是手机应用,还是网页应用,还是 pc 应用,都会尽量提供暗黑模式,也就是深夜模式。 tailwindcss 是支持暗黑模式的,而且使用非常方便,只需要在样式类前面加上dark:就可以实现。
支持自定义
tailwindcss 之所以被越来越多的人喜欢可不仅仅是它的精心设计的内置样式,而是它支持自定义的样式配置,支持你扩展原来的样式表,从调色板,到间距,到阴影等,你都可以自己去定义,这对于要求高度还原设计的网站绝对是必须的。
编辑器的支持
对于前端工程师来说,vscode 已经成为了标配开发工具,而 tailwindcss 为此提供了智能提示插件,安装了该插件之后,在写 css 的时候你也能体会到自动补全,并且它还会对一些错误的类定义进行语法提示,可以说非常智能。
网友们的评价
一个人说好不算好,需要大家说好才算好,下面总结一些网友们对它的评价:
- 直到现在才使用 tailwindcss,我觉得我就是白痴。
- Tailwindcss 让编写代码感觉就像我在使用设计工具。
- Tailwindcss 是这个星球上最伟大的 css 框架。
- Tailwindcss 正在弥合设计系统和产品之间的差距。它正在成为事实上的样式 API。
- 我再也不想写普通的 css 了。只有 tailwindcss。
- 在我使用它的那一刻我就爱上它了。
- Tailwindcss 同时让 css 变得有趣,并彻底改变了我构建产品的方式。它快速,高效,使用起来非常愉快。