前端 tailwindcss 现在很火吗？

老哥

说说

途径

使用

37 条回复 • 2022-05-09 13:22:14 +08:00

1

damngoto

2022-05-07 16:41:36 +08:00

这东西基本不需要学，想用就查。
后端非常友好，非常虚浮。
如果你喜欢 style in js ，那你会更喜欢 tailwind 。

2

yuhangch

2022-05-07 16:41:48 +08:00

我不是前端，玩票形式用过
感觉生态挺好的 next 、nuxt 这样的框架都有集成的例子
对我（业余）来说加上 ide 的补全，调样式方便不少

3

yaphets666

2022-05-07 16:41:57 +08:00

1

设计图就是不按照内置的那些类来你有啥办法所以在商业项目用处不大。自己玩是很好的。

4

codefever

2022-05-07 16:42:15 +08:00

你会发现你甚至连 stylelint 都不需要配置，因为你可能根本不用写 css...

5

wu67

2022-05-07 16:49:22 +08:00

个人看法: 如果写外包、写自营产品, 不用学. 除非项目里面已经有用这套一段时间了、或者是技术领导强行要求.

实际上外包出页面, 只需要功能出来, 然后照着你用的 ui 框架的样式就行.
自营项目, 设计稿压根就是自己发挥、天马行空, 你甚至没法直接套 ui 框架和各种 css 库, 都得自己微调.
也就自已写的玩具项目能用上.

6

anguiao

2022-05-07 17:03:03 +08:00

学习成本其实很低，会 CSS 就会 Tailwind ，熟悉一下就可以轻松上手。
其实 Tailwind 这种东西，写后台项目恰恰是最合适的。UI 框架的组件样式都是现成的，只需要完成布局，将它们组合在一起即可。Tailwind 写布局非常爽，几个 class 就可以解决问题，不需要再做无意义的命名。需要注意的是最好关闭 Tailwind 自带的 CSS 重置，以避免不必要的样式冲突。
反而是样式定制化较强的前台页面，无论是覆盖组件库样式、还是从头开始写样式，都很容易把 class 列表写得很长。

7

murmur

2022-05-07 17:05:04 +08:00

不用学？那么多定义怎么可能不用学，新人连 padding margin 这些都分不清楚你让他用哪个

8

murmur

2022-05-07 17:06:25 +08:00

这个东西的用途就是在没有设计规范的公司让设计不至于太离谱，比如我设计 ml-4 ml-8 ml-16 ，其余的数不让用，那最多也就是这三种的组合

但是你的设计师会只出 4 、8 、16 的设计稿吗

9

Hanggi

2022-05-07 17:07:26 +08:00

应该说，如果熟悉 CSS ，不需要特意学太多东西就可以玩转 Tailwind 。

其实这东西最早 Bootstrap 时期就已经在这么做了，很神奇这东西能这么火。

10

Hyoban

2022-05-07 17:28:41 +08:00

1

Tailwind 的文档很棒，甚至可以通过 Tailwind 的文档来反学 css ，具体的查查 mdn 就好了

11

terranboy

2022-05-07 17:30:25 +08:00

@murmur 你应该没深入用过吧

12

fkdog

2022-05-07 17:33:18 +08:00

前端属实是把茴香豆有几种写法整出花活来了。

13

zhwithsweet

2022-05-07 17:39:28 +08:00

我还是 unocss 吧

14

Curtion

2022-05-07 17:41:18 +08:00

原子化 css 比较火，不限于 tailwindcss

15

zhwithsweet

2022-05-07 17:42:19 +08:00

@zhwithsweet #13 https://github.com/zouhangwithsweet/vite-antd-seed 整了个模板

16

Immortal

2022-05-07 17:49:51 +08:00

其实早期合作过的有经验的前端同事在项目里就是"原子化"了
把常用的 class 都提取出来
tailwind 只是把这个操作做的更为标准而已

17

Xcharles

2022-05-07 18:51:55 +08:00

1

很好用，最近在用 windicss ，楼上有人说不适合写自己的项目，可能没深入用过，单位是可以用 px 的

18

YY

2022-05-07 19:13:34 +08:00

看起来是不错

19

aaniao002

2022-05-07 19:19:50 +08:00 via Android

太好了。正准备迁移，单位忽然说下一步大家一起跳 election

20

huijiewei

2022-05-07 19:20:09 +08:00

研究下自己怎么写插件，简直神器了

21

taowen

2022-05-07 19:32:01 +08:00

还有个 https://github.com/unocss/unocss

22

Dragonphy

2022-05-07 20:12:58 +08:00

@Hyoban 我就是这么学的

23

Leviathann

2022-05-07 21:10:47 +08:00

在用配合 vite 不刷新+不切文件实时修改样式很爽

24

zhuangzhuang1988

2022-05-07 22:34:23 +08:00

累。

25

kongkx

2022-05-08 07:19:01 +08:00 via iPhone

咋一看学习成本不高。开始使用的时候很别扭，熟悉了之后能起飞。组件标准化之后，主题切换挺有优势，同样适合风格化开发。那自由开放的设计稿，什么框架来都没用

26

chenliangngng

2022-05-08 12:14:21 +08:00

用过 3 个月吧，后面全部还原了

个人认为这几个问题是死穴：
1. 有 ui 框架这种东西，css 都不怎么需要写，现在有了 css 变量，连 less 这种都不怎么需要写了，tailwindcss 用起来很低频，这是最主要的原因
2. 学习成本，包括团队学习成本，都不低
3. 用起来相当于要把英文翻译成中文那样，在脑子里需要翻译 tailwindcss ，对日常开发来说，没有必要增加脑力负担
4. 效率可能会降低。当你发现 tailwindcss 组合不了你想要的效果呢，再回去写 css ？时间都浪费了

优点就是，如果新手前端学习这个，可以限制自己随便写的 css ，对控制 css 步长很有帮助

27

tlerbao

2022-05-08 12:55:48 +08:00 via iPhone

@chenliangngng 我觉得你一点都没说对还是再了解了解吧

28

chenliangngng

2022-05-08 13:10:46 +08:00

@tlerbao 你要反驳的话，每一条每一条说清楚。上面的是我用过 3 个月这就是我的感受，也请你把你的用后感写下来

29

fgk

2022-05-08 15:33:21 +08:00

toB 项目的话可以说很爽了

30

pokon548

2022-05-08 16:03:43 +08:00 via Android

@chenliangngng
1. 因人而异。适合自己的才是最好的。
2. 对我来说，学习成本非常低。原子化的 CSS class 非常适合将我的 UI 抽象表述出来。
3. 对于编程来说，我认为精通英语是一个最基本的要求。
4. Tailwind 支持自定义 CSS Class 。自定义 CSS Class 可以写任意 CSS 语法。不清楚为何你认为无法组合出你想要的效果。

31

pokon548

2022-05-08 16:11:58 +08:00 via Android

补充一点：Tailwind 支持自定义样式。内置 CSS Class 写不出来的东西还能上原生 CSS ，非常方便。

https://tailwindcss.com/docs/adding-custom-styles

32

gogogo1203

2022-05-08 16:45:10 +08:00

@chenliangngng
1. 不清楚你在说什么. 既然 ui 都写好了不需要改了，难道还是 tailwind 的锅？ “我吃饱了，所以锅很累赘’
2. 什么东西没有学习成本？ tailwind 的 naming 参照 bootstrap.
3. 敲代码不需要带脑子吗？
4. 你对 tailwind 是不是有什么误解？别人是为了快速和方便。复杂的效果你可以用 css 啊，你不是觉得 css 和 tailwind 只能选一个吧？

上面的人真没有必要回复你，因为你纯粹就是一知半解，尬黑