突然感觉 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 条回复
a4854857
2023-11-24 14:34:06 +08:00
对于犹豫为啥不直接 style 的.我以前也这么想.后来发现 tailwind 真的太爽了.虽然我现在用的是 unocss
crazyTanuki
2023-11-24 14:40:07 +08:00
这么极致追求,我觉得 tailwind 还能凑合用
murmur
2023-11-24 15:33:18 +08:00
@freshgoose 为了增加维护难度呗,总有人吹牛逼说什么 tailwind 好记忆,我笑了,css3 年代还记不住真得反省下自己是不是菜了

不会写 css 的,用 antd element 直接套组件上来人家全给你写好,都不用管也不会太难看
会写 css 的 啥都能自己定义 也不会用 tailwind

这东西动动脑子都能想起来 是 width-100 fontsize-14 color-black background-green 一堆乱七八糟好理解

还是 btn-success 好理解好用
murmur
2023-11-24 15:34:48 +08:00
老板有个需求,要把所有按钮字号加大,我随手找到 btn 的定义 把 font-size 从 12 改成 14 ,齐活

你 taiwind 怎么改,你根本没有 btn ,你的样式都是写内联 class 上的
menuvb
2023-11-24 15:39:19 +08:00
一直使用 Bootstrap ,但是它的默认的配色一言难尽,每次都要重新配色,另一个缺点就是缺少更多样性的 CSS Utilities ,特别是针对 Margin ,Padding 的间距,最长间距就到 2rem ,所以经常一层套一层才能达到自己要的效果,在 CSS Utilities 这一点又喜欢 TailwindCSS 的设计理念

楼主可以试试 FastBootstrap ,做为 Bootstrap 皮肤,可以作为完美的的替代,Atlassian Design 设计,结合 TailwindCSS 的 CSS Utilities first 特点,light/dark 二种颜色模式,最终目的就是尽量避免在自己写 CSS 。

官网介绍: https://fastbootstrap.com/

Github: https://github.com/fastbootstrap/atlassian-design-for-bootstrap
encro
2023-11-24 15:44:47 +08:00
@murmur

学艺不精啊

不是 text-lg 和 text-xl 之类的吗?然后在配置文件统一修改。。。
retrocode
2023-11-24 15:45:47 +08:00
@murmur #24 这个例子不对, 现在使用组件基本都是自行封装一层 xxx-button 之类的再使用了, 在这点上 统一是修改, 直接在单个组件上改 className 也是一样的, 问题出现在全局样式上, 对于存在结构的 css, 例如: xxx-card, xxx-card-left, xxx-card-disable 类的样式, 在后期结构有变动的情况下, class 会越写越乱.
我是自己封装了一个全局 sass 库, 注册了一些 flex/flex-center/w-100 之类的无业务 class
tailwind 最恶心的是 class 越写越长, 自己封装反而更方便无侵入, 比如我是直接把通用 border 封装成 .b class, 唯一缺点就是需要记忆缩写, 对新接手的不友好, 不过整个项目都这么使用的情况下, 常用 class 也没多少, 熟悉几天就好了
weijancc
2023-11-24 15:55:08 +08:00
@freshgoose #19 bootstrap 还要记它那些类名, 而 tailwind 就是 style 的缩写, 大大提高了效率
newaccount
2023-11-24 15:57:14 +08:00
开发阶段各种优化,上线后直接给我传了个 5MB 的 jpg
淦!
yuhangch
2023-11-24 16:00:57 +08:00
@menuvb 不说 bootstrap, FastBootstrap 这个样式是真好看啊~
NerbraskaGuy
2023-11-24 16:22:57 +08:00
个人感觉 tailwindcss 更适合样式复用度高且版本迭代改动小的项目,还有就是有些客串前端很烦花时间写 CSS 的,反正我挺反感标签里面类名长的不行的写法
murmur
2023-11-24 16:29:12 +08:00
@encro 例子里的领导的要求是按钮字号放大一号,不是把大字体放大一号

@menuvb 有一个网站叫 wrapbootstrap ,各种基于 bootstrap 的主题,都学会折腾 tailwind 了,怎么也知道不应该随便造轮子,得看看有没有更好的封装吧
murmur
2023-11-24 16:33:03 +08:00
@retrocode 按 style 封装 我可以定义
.btn-warning{} .btn-success{} .btn-alert{} 这些都是直接配出来的 写一个
:class={[props.type]: true}就可以搞定

如果是基于 tailwind 封装,就会写出
:class={color-red: props.type === 'alert', color-green: props.type === 'success'}这样的丑陋写法
chouchoui
2023-11-24 16:40:46 +08:00
我建议是没整体用过的 tailwindcss/windicss/unocss 的人不要出来发表高见了,说出来的东西都丢人。
我寻思用了 tailwindcss/windicss/unocss 也没有不让用自己写 css/sass/less 啊,更何况 @apply 都不知道还出来叫什么叫。
还有说为什么不直接写在内联 style 里面,我想看看大佬怎么在内联里面写 hover 、响应式、上面三个库基础操作的 space / divide
abelmakihara
2023-11-24 16:41:32 +08:00
没香过 哪有那么多写行内样式的情况
如果不是写行内样式用 那改起来想想都可怕
维护一份项目常用的类代替就行了
murmur
2023-11-24 16:43:41 +08:00
@chouchoui 有 ide 提示的 css 很好写,你都 apply 了我干啥不自己手写啊,想写多少 px 写多少,想用什么颜色用什么

我感觉上面有个说的很好,tailwind 必须有严格的设计标准,就那几个颜色和尺寸,随心所欲还是手写的舒服
retrocode
2023-11-24 16:44:02 +08:00
@murmur #33 是的 就这点恶心, 我也是这么搞的, 不过我是自行封装的 sass
liuhuihao
2023-11-24 17:08:55 +08:00
@murmur #36 tailwind 有严格的设计标准用起来最舒服。就算没有严格的设计标准它也提供了 w-[5px] 这种写法
liuhuihao
2023-11-24 17:14:07 +08:00
@murmur #36 至于上面你举得 btn 的例子,tw 文档里面说了 这种复用的情况应将 btn 拆成一个组件。包括为什么不直接内联,文档上也都有说明。
https://www.tailwindcss.cn/docs/utility-first#maintainability-concerns
jguo
2023-11-24 17:23:19 +08:00
能不能别强行讨论不了解的东西,但凡看过五分钟文档也该知道 tailwind 跟 style 的区别

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

https://yangjunhui.monster/t/994735

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

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

© 2021 V2EX