御卓
·

对Tailwind CSS的一些看法

最近由于要做设计工作的官网(Landing page),我不得不重新拾起之前的coding技术;而创建现代风格的主页自然要用到最近的技术栈,那么,自然不可避免地要选择现在最流行的CSS框架——Tailwind CSS了。在我上手吃喝打滚几天摸索以后,我发现它并不是特别适合我。

Tailwind CSS是一种原子化CSS框架,提供许多的实用工具就是其特点之一,这些实用工具在class类中调用,无需编写额外的CSS文件即可调整控件样式,原生自带Dark Mode等一系列支持Web新特性的功能,也吸引许多开发者使用。

但是,所有的调整都缩在class当中,使得代码变得不那么干净了。对Landing Page而言,这可能还是致命的问题。

我以前是从CSS2末期开始学习的,CSS3时代接触到了Bootstrap和MDUI框架,前者写网站,后者写Web App,并学习了各种高级的CSS功能,不过我没有学习Sass/Less,于是随手一写style.css成为了我的习惯。

但在Tailwind CSS里,这么做基本不太行的通了,要么是逻辑上不符合原子化的规范,要么是直接无法生效,即便是 !important 可能都会导致各种布局bug的出现。这让我头疼不已。

后来我了解到了daisyUI,一个TailwindCSS的扩展超集,可以轻松编写控件并应用样式的CSS框架。以前TailwindCSS要在div中塞进很多class类才能调用的样式,在daisyUI就简单许多了,只需要一两个就能调用,还可以配置主题色和圆角等个性配置。

即使如此,我仍然不能像在Bootstrap那样随意堆叠以前CSS的样式,比如gradient很多还是会被覆盖的。直到今天,我都不知道该如何搭配Tailwind CSS写出一个landing page上的Hero和导航栏部分。

对于事业用途来说,也许Webflow、WordPress这类现成方案,可能更适合我,但我同时作为一个coder,我希望我的代码完美一些,至少可以支持dark mode这些特性。

安装一个WordPress虽然快速,但性能和安全性负担太多,我不需要电商或者其他功能,所以我选择SSG(静态生成器)或者Flat CMS(平面CMS)这样的精简方案,这是我为何选择自行编写代码的原因。

如果你有什么看法或高手指点,欢迎在评论区交流。

bookmark_add
添加收藏
评论
登录后评论

用 SCSS 之后,那一堆的 class 可以写成 mixin. 我自从接触 SCSS 之后,总觉得 SCSS 才是 CSS 的改良方向。

reply
回复

tailwind习惯后,调整页面是比纯CSS方式方便的,但不适合和其他框架比如bootstrap混用,对bootstrap有深度理解的可能的确会更喜欢bootstrap,比如说我。

reply
回复

Tailwind 对我的启发是,并不是所有页面元素都有名字的,有的时候用 padding-3 backround-primary 也是不错的,效率优先。如果是一次性的活动页面,不介意都是用工具类写成。

但如果是使用频率很高的 buttoncard 之类,还是应该抽取成组件。Tailwind 也支持这样的用法。

我觉得有点矛盾的是,我自己维护了一个框架,所以我不用;但不是建议所有人都开发自己的框架,所以别人用 Tailwind 我也不反对,毕竟比较火,资料最多;但要上来就用 Tailwind,我也不支持,纯 CSS 还是应该学;总的来说就是怎么爽怎么来。😂

reply
回复
查看所有评论 (6)
社区准则 博客 联系 反馈 状态
主题