惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

人人都是产品经理
人人都是产品经理
博客园_首页
IT之家
IT之家
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Vercel News
Vercel News
美团技术团队
D
Docker
WordPress大学
WordPress大学
T
Tailwind CSS Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
The Cloudflare Blog
Y
Y Combinator Blog
F
Fortinet All Blogs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
G
Google Developers Blog
爱范儿
爱范儿
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
月光博客
月光博客
MongoDB | Blog
MongoDB | Blog
S
SegmentFault 最新的问题
GbyAI
GbyAI
Hugging Face - Blog
Hugging Face - Blog
Microsoft Azure Blog
Microsoft Azure Blog
A
About on SuperTechFans

串串狗小刊 ⭐️

Web 出海之域名商、托管商等一定要分开 - 串串狗小刊 - 聊AI、互联网、前端技术 ~ 程序员下班以后做什么副业合适? - 串串狗小刊 - 聊AI、互联网、前端技术 ~ 终极拷问:用户的登录信息放哪里? - 串串狗小刊 - 聊AI、互联网、前端技术 ~ 5个 link 标签,突破前端性能瓶颈! - 串串狗小刊 Web 出海让你结束上班时代! - 串串狗小刊 - 聊AI、互联网、前端技术 ~ 注意!程序员不要使用 设计模式 了! - 串串狗小刊 Web 出海之品牌站如何应对被别人侵权 - 串串狗小刊 - 聊AI、互联网、前端技术 ~ Web 出海之一些广告流量主方案和 SaaS 站没必要搞社区 - 串串狗小刊 年轻人怎么抓住 AI 发展的风口? - 串串狗小刊 为什么 GO 语言地位很尴尬? - 串串狗小刊 Web 出海必备的外链列表 - 串串狗小刊 - 聊AI、互联网、前端技术 ~ 我的 Web 3D 世界梦 - 串串狗小刊 OPC Web 出海之图视频的 AI 供应商渠道和简单外链 - 串串狗小刊 简单聊聊我的 Nodejs 世界观 - 串串狗小刊 Web 出海快速判断关键词法和推荐 3 个 SKILL - 串串狗小刊 Web 出海之演示建站盈利和朋友 Reyn 的教训 阅读源代码前要运行的 5 条 Git 命令 - 串串狗小刊 介绍几组我一直在使用的 Codex 插件 我观看哥飞年终会议复盘的 Web 出海笔记(下) - 串串狗小刊 观看哥飞年终会议复盘的 8 个 Web 出海笔记 - 串串狗小刊 Codex 敞开用的技巧和谷歌趋势的参考词 - 串串狗小刊 - 聊AI、互联网、前端技术 ~ Web 出海之外链提交频率和如何不花 Token 处理代码 - 串串狗小刊 程序员现在的最佳副业 ~ Web 出海 - 串串狗小刊 如何设计良好的 API - 串串狗小刊 - 聊AI、互联网、前端技术 ~ 你跟 AI 对话后会发生什么? - 串串狗小刊 出海 Web 之 GSC 里的曝光量和点击量和外链的关系 - 串串狗小刊 出海 Web 不要 恋战 新词游戏站 - 串串狗小刊 无港卡开通 Stripe 收款和 Nofollow 转 Dofollow 技巧 - 串串狗小刊 DeepSeek 发布氮气加速器 DSpark!可惜好东西又开源了 - 串串狗小刊 简单聊聊出海 Web 的游戏站 - 串串狗小刊
今天简单聊聊 tailwindCSS - 串串狗小刊 - 聊AI、互联网、前...
独元殇 · 2026-05-07 · via 串串狗小刊 ⭐️

如果是从 CSS 时代过来的人,很不愿意学 tailwindCSS 框架的。

因为里面有很多类名得去记。

就好像是在写 html 里的 style="" 一样,但是比这些要短一点。

而且严重破坏以前在手写 CSS 时代的 class 命名习惯。直接就翻天覆地,完全不用费劲心思去想 class 名了....

当然,其实在学习初期,去像背单词一样去背 tailwindCSS 是不对的。真正的上手办法,就是直接用。

自己在官网的 docs 的搜索栏里去搜原来的 CSS 属性就行:

img

下面就会给出对应的文档。然后就可以去应用了。

慢慢的,写个三天不到,你就完全掌握了 tailwindCSS 。毕竟你也知道 CSS 其实就那点东西。tailwindCSS 肯定也一样。

之后,你就会领略到 tailwindCSS 的发明是多么天才!多么有魅力。解决了不愿意样式和内容分离、又想提高维护性的两个矛盾的问题。

而且 AI 友好。AI 这种语言目前还是很难碰瓷纯 CSS 的,也会给你弄很多 BUG ,但是 tailwindCSS 能解决 95% 的样式设置需求,又不会变复杂,简直是神器!

虽然初期很不习惯这种转换,但肯定是有原因的:

w-2 就是 width:0.5rem
pt-4 就是 padding-top: 1rem;
pl-52 就是 padding-left: 13rem;

想更舒服?可以写个中括号,写入任意值,但不推荐这样....

pt-[6rem] 等价于 padding-top: 6rem;

就是这个样子。

对新手学习会有损害吗?

或者说,对于 CSS 半吊子水平的初学者,学习会有损害吗?

不不不,不会,这个是极大的误解。

这个 tailwindCSS 和 CSS 的关系,并不等于 Python 和汇编语言的关系。后者确实是完全替代了,不用学 汇编 了。但是 tailwindCSS 只是一直简写的方案,能用好 tailwindCSS 的前提是,你必须完全懂 CSS 。

只有css老鸟才能驾驭tw 。该学的,一点不会少学。

就好像 CAD 并不会损害我们的设计图纸的技术一样。

而且更会加深我们的理解。毕竟 tailwindCSS 是知名的生产级前端工具,里面对 CSS 的使用是很深刻的。如果你用 CSS ,可能一辈子多不会去多想 rem 这个概念,tailwindCSS 需要。还可以让你逐渐学到很多以前根本不认识的属性。

缺点

让html无法阅读。。几乎是每一句都很长。。

因此,脑袋灵活一点嘛。可混合着用,不要那么极端,要么不用要么全用。我是class不超过6个就使用语义化css,超了就定义个类名放到style里。

对于管理系统这样的系统更合适,因为这种东西千人一面,都长得差不多,样式比较少且简单,开发起来嘎嘎快。但是对于个性的东西,复杂的页面(尤其特效比较多),那维护起来就是地狱。因此不要采用。

毕竟系统都是基于业务,开发好了基本不会动html,除非大改。