突然感觉 tailwindcss 不香了

2023-11-24 10:13:36 +08:00
 yuhangch

用 astro 做了一个静态网站,内容主要是文字为主。

当时用 tw 的时候是提高生产力为主,比如 light/dark 转换,prose 排版等等。

现在功能基本完成,想做一些优化的时候,发现某篇文章的 index.html:

总大小 ~ 78kb ,移除 tw 声明的变量和 class 定义之后 大小只有~ 24kb 。。。

尝试用 purgecss ,作用不是很明显(可能姿势不对)?

除此之外大家还有啥建议不,前端不是很在行,所以也想请教一下,使用 tw 的话,每个静态页面中的 css 是根据这个页面的样式类的使用情况生成的,还是所有页面的 css 是一样的?

10616 次点击
所在节点    程序员
59 条回复
zhwithsweet
2023-11-24 17:29:58 +08:00
@murmur #33 在 unocss/ tailwindcss 中 你这种情况,我个人认为封装为 data-[type=alert]:text-red 比较好
dufu1991
2023-11-24 17:30:06 +08:00
既然使用了 astro 这种方案,建议不要把单页的 CSS 放在一个文件内,而是全站的 CSS 放一起,这样全站来看可能会大一点,但是用户加载一次 CSS 之后就从缓存拿,全站就一个 CSS 文件才是使用 Tailwind 的正确方式。你全站代码量再大,CSS 增量不会大,越到后期 CSS 文件大小越是趋于稳定。
yb8Qes1Qae01H0xy
2023-11-24 17:55:47 +08:00
我也很喜欢 astro 这种方案
duan602728596
2023-11-24 20:21:09 +08:00
上完 br 压缩也没大多少
Track13
2023-11-24 21:08:32 +08:00
@newaccount 确实,视频封面图居然穿了个 gif 是我没想到的😂
DOLLOR
2023-11-24 21:47:53 +08:00
在我看来,tailwindcss 和 inline style 的区别就是前者要再装个插件才能有提示,后者 vscode 就自带提示了。
对我来说,vscode 跑的插件已经够多了,能少装一个就尽量少装一个。

而且现在的三大浏览器都实现原生 CSS 的嵌套语法了,连 sass 、less 的必要性都降低了许多。
zangbianxuegu
2023-11-24 22:12:45 +08:00
感觉这个 CSS 应该是可以优化的
mokeyjay
2023-11-24 22:19:55 +08:00
@murmur #24 不建议云用户随意点评,实际上 tw 有 @apply 语法,一样可以封装出你所说的 .btn-success 。另外,tw 还支持通过配置文件调整各种变量,统一改个字号很简单
menuvb
2023-11-24 22:26:34 +08:00
@yuhangch 10 多年 Bootstrap 的样式受害者,从 2.0 就开始,最早入坑就是 12-column 的 Grid 布局。就想有一套又好看的,又有强大 utilities-first 的 CSS 作为以后项目使用,避免在自己在写 CSS ,我是真讨厌在项目还要写 CSS ,即使一行都不行。
otakustay
2023-11-24 22:49:04 +08:00
tailwindcss 将会是大模型最友好的页面编写技术了,以的不想用也得用
tushan
2023-11-24 23:42:15 +08:00
tailwind 有两种引入方式,你可以选择 js 的引入,他是动态生成 css 的,这样就不需要引入他的那个很大的编译好的 css ,还有一种就是 webpack 的方式的了。
IvanLi127
2023-11-25 00:48:11 +08:00
@murmur 想要 btn ,自己包一层就有了,这个看你怎么用 TailwindCSS 。用法很灵活,深入学学你会发现新天地。
twelvechen
2023-11-25 08:51:09 +08:00
我当初用 tailwind 的目的很单纯,就是不想起类名🤣,以前自己维护 css 各种 xxx-wrapper xxx-content xxx-text ,明明 css 代码一瞬间就想出来了,取名字总是打断思路。
然后最近发现 tailwind 这种对 code review 相对友好,css 类名的方案 review 的时候得在 html 和 css 代码间来回跳,需要在脑子里维护一套 html 结构再看 css 。tailwind 方案结构和样式代码就在一块,能少很多负担。
murmur
2023-11-27 08:12:15 +08:00
@mokeyjay 你说的变量这些用 css+预处理工具一样可以做到,而且你根本没懂得我的重点,如果一个人会写 css ,那手写 css 比 tainwind 要自由的多,一个人不会 css ,你给他换个词他也记不住,甚至他根本不会用 tailwind ,element-ui 或者 ant 一把梭不香么
murmur
2023-11-27 08:13:26 +08:00
很多人忘了一点是 css 是前端基础必修的,tailwind 这种属于异类,增加心智负担的东西
mokeyjay
2023-11-27 10:52:45 +08:00
@murmur #54 当然是为了图省事啊,能少敲很多字符,做自适应和暗色模式之类的也更方便等等。谁不知道原生手写最自由呢,用第三方的东西不就为了图省事吗
stimw
2024-02-03 18:32:45 +08:00
@murmur 一个新出现的工具得以迅速流行并且火爆到现在这个地步( 2013 年前端/js 领域获 star 最多的是一个叫 shadcn 的 tailwind ui 库),为什么会把它喷得《一无是处》?

又不是 java8 这种纯粹因为历史包袱而被广泛使用的东西,一个新玩意的流行必然是因为好用,大伙爱用。

当然不是每一个人都喜欢这个方式,也不是每一个项目都适合,但是你写的大部分理由其实都是没有好好看过文档里开头几篇文章,没有真正在项目里尝试深入使用和接触它的生态,这才是评论的前提。

无脑吹和无脑黑都是不对的。
stimw
2024-02-03 18:33:08 +08:00
@murmur 打错,2023 年
murmur
2024-02-04 08:11:28 +08:00
@stimw 前端娱乐圈,你看看就好了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://yangjunhui.monster/t/994735

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX