3

为什么越来越多的人开始选择使用Tailwindcss

 2 years ago
source link: https://www.fly63.com/article/detial/11393
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
更新日期: 2022-04-26阅读量: 5标签: 框架分享

扫一扫分享

什么是 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 变得有趣,并彻底改变了我构建产品的方式。它快速,高效,使用起来非常愉快。

来自:https://www.toutiao.com/article/7090449733701042702

链接: https://www.fly63.com/article/detial/11393


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK