你的 Tailwind 之所以丑，是因为你像用 2006 年的内联样式那样用它
仅用于站内搜索，没有排版格式，具体信息请跳转上方微信公众号内链接
来源|大迁世界
作者|前端小智
说实话，刚看到Tailwind时，我想：“这可能是HTML继之后最糟糕的发明了。”
一个div里堆满二十个工具类？bg-blue-500text-whitetext-centerpy-2px-4rounded-mdshadow-mdhover:bg-blue-600？
看起来就像有人在便利贴上写CSS。
但后来我真正用了一阵，
剧情反转……Tailwind让我更快了，
代码更统一了，
最棒的是，我终于不用重复写一模一样的CSS规则。
如果你的Tailwind代码看着乱七八糟，问题不是框架，而是你用它的方式。
Tailwind不是要你停止思考，而是帮你避免每次写按钮都重新造轮子。
说说按钮设计。
以前的做法：
复杂得要死，维护一团乱麻。
Tailwind这样写：
一眼就懂，
不用满页面找. button、.button-sm、.button-danger-outline。
Tailwind就是这么实诚，
你的代码有多乱，它就有多“暴露”。
没错，这正是它的优势。
内联样式糟糕是因为无法复用、没有逻辑、难以管理。Tailwind解决了这些，还能让你按需抽离组件。
如果你的组件变得一锅粥，不妨试试：
然后用：
Tailwind给你的是乐高积木，怎么拼由你决定。
设计杂乱无章，别怪Tailwind，怪你没设定好间距尺度、字体层级、配色体系。
在tailwind. config.js里定义：
用bg-brand替代bg-blue-600，用系统化间距替代盲猜的padding。
不需要设计学位，只要点结构感。
以前写响应式：
现在写：
完成。Tailwind自动帮你管理断点，零切换文件，上手又快。
最大误解是：Tailwind是懒人的救命稻草。
完全不是。
它迫使你去理解margin、padding、颜色、阴影、间距和响应式。
你会关心垂直节奏和统一尺寸，迭代UI时不用重写五十行CSS，也不必再起什么. blue-btn-alt-2这类晦涩名字。
如果你的网站看起来像2014年的Bootstrap，问题可能不在Tailwind，而是你没设限，没抽离通用组件，或者满屏狂用!important，像破设计上撒辣椒酱。
Tailwind不能救赎品味，但会放大好体系。
定义一个组件：
在CSS或Tailwind配置里统一定义. btn。
然后到处用。
立刻干净、可扩展，依旧是Tailwind的魔力。
别再以初学教程里那乱糟糟的Tailwind评判它了。
如果你的代码乱成一锅粥，别全写在组件里，先搭好设计体系。
Tailwind不丑，是你用得没门道。
好啦，今天的内容分享就到这，感觉不错的同学记得分享点赞哦！
PS：程序员好物馆持续分享程序员学习、面试相关干货，不见不散！
点分享
点收藏
点点赞
点在看
