[吐槽]这个世界上为什么会有 Tailwind Css 这种东西?

2022-05-12 22:35:06 +08:00
 HackerJax

复制一段官网的代码:

<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">
        Sarah Dayan
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

听说这玩意儿最近很流行?

跟手写 style 有啥区别啊?

真有把这个用于生产环境的吗?

写起来不累吗?

我一个后端要看吐了!

11787 次点击
所在节点    CSS
98 条回复
anguiao
2022-05-13 10:13:59 +08:00
和 JSX 是一个道理,有些人喜欢、有些人讨厌。
根据应用场景和自己的喜好,选择适合的方案就好,没必要争论,都有各自的道理。
yl20181003
2022-05-13 10:15:48 +08:00
借楼问下大佬们,tailwindcss 的优先级太低,怎么优雅地去覆盖其他 ui 库的样式
ChristianChen
2022-05-13 10:22:48 +08:00
github 虽然不是用的 tailwindcss 但也是种风格的
anguiao
2022-05-13 10:24:45 +08:00
@yl20181003 有个选项,可以给所有的都加上 !important
encro
2022-05-13 10:28:59 +08:00
tailwindcss 正确打开方式----》加一层 component
比如官方的 tailwindui ,以及第三方的 daisyUI
这样实现了设计系统,到组件的高速开发。

tailwindcss 是基于熟练上的。
ddch1997
2022-05-13 10:46:28 +08:00
tailwindcss 现阶段我觉得更舒服的点是,在需要写内联样式的地方,可以用 className 来写,而且还不用单独命名,总觉得前端应该是尽量避免写内联样式的。
wonderfulcxm
2022-05-13 10:49:02 +08:00
要说组件化和做原型,bootstrap 不香吗?设计工具也有,bootstrap studio ,所见即所得,我就不信还有比这个做原型更快的,做原型就不应该太在意样式。
ikaros
2022-05-13 11:08:18 +08:00
以前选框架的时候看了下不懂这些样式怎么复用,而且相较于要我写这么多样式感觉还是 bootstrap 之类的拿来就用,所以 pass
horizon
2022-05-13 11:27:40 +08:00
1. 类名即样式,使用者无需定义类名,大大降低了编程复杂度。
2. 内置了系统值,减少了 Magic number ,有利于设计的统一性。
3. 系统值、样式可以非常简单的实现扩展。
lxml
2022-05-13 11:27:42 +08:00
tailwindcss 忠实粉丝在此,帮程序员解决了著名的世界级起名难问题,生产力提升是指数级的
gouflv
2022-05-13 11:39:26 +08:00
后端就别来瞎搅和了,纯浪费时间
dingdong
2022-05-13 11:49:14 +08:00
引用一下 material ui 的文档说明 tailwindcss 解决的问题
https://mui.com/system/basics/#problem-solved

1. Switching context wastes time.

There's no need to constantly jump between the usage of the styled components and where they are defined. With the system, those descriptions are right where you need them.

2. Naming things is hard.

Have you ever found yourself struggling to find a good name for a styled component? The system maps the styles directly to the element. All you have to do is worry about actual style properties.

3. Enforcing consistency in UIs is hard.

This is especially true when more than one person is building the application, as there has to be some coordination amongst members of the team regarding the choice of design tokens and how they are used, what parts of the theme structure should be used with what CSS properties, and so on.
rioshikelong121
2022-05-13 11:50:49 +08:00
不要把社区 /其他开发当傻子。tailwindcss 可以流行肯定是有原因的。
dingdong
2022-05-13 11:51:52 +08:00
@snoopyhai 说的很对
> op 这么说, 一定是没有维护过老项目. 特别是别人写的老项目.
kinge
2022-05-13 12:26:09 +08:00
我在生产环境用了 2 年了, 没有人盯着 css 代码看,要看界面
theohateonion
2022-05-13 12:28:13 +08:00
@HackerJax 没太懂 button 这个是什么场景?我 button 内部使用 tailwind 封装好,不是一样可以方便维护吗?
Xcharles
2022-05-13 12:34:16 +08:00
用过之后就会觉得好用了,这跟写 style 完全不是一个概念
molvqingtai
2022-05-13 12:47:04 +08:00
有没有体验过为了改一个 TAG 在一堆 CSS 文件中找样式的感觉?
有没有体验过用 BEM 取名又臭又长,划分层级取名时把头抠秃的感觉?
tailwind 就是 class 多点,完美规避了上述问题,吹爆
nomagick
2022-05-13 13:01:54 +08:00
难以置信,前端逆淘汰竟达到如此地步,简直大逆不道,

何不切除睾丸体外培养以提升工作效率

用过都说好
superchijinpeng
2022-05-13 13:03:58 +08:00

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

https://www.v2ex.com/t/852519

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

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

© 2021 V2EX