前言
好久没写文章了。最近有朋友问我，为什么之前的 mx-design 组件库教程停更了？其实是因为我逐渐意识到，那种样式内嵌的组件库，无论在学习还是实际使用中，都有很大的局限性。
做过稍微复杂定制需求的前端同学，应该都有类似的体会：
- 企业通常有自己独特的 UI 规范，而传统组件库的样式改造起来非常麻烦，有些深层样式几乎无法覆盖。比如
disabled状态和readOnly状态对应的样式，往往与组件内部的 JavaScript 逻辑紧密耦合，难以彻底抽离。 - 有时我们甚至需要调整 DOM 结构或修改底层 JavaScript 行为，这在传统组件库中几乎不可能实现。
面对这些问题，国外出现了一个备受瞩目的前端组件库项目------shadcn/ui，目前也是 GitHub 上最热门的 UI 组件库之一。
不过，shadcn/ui 并不完全适合国内的项目场景。简单介绍一下 shadcn/ui 是属于 headless 组件库，你可以简单的理解 headless 就是没有样式的组件库，只有 dom 结构，甚至 dom 结构都是你自定义的，和 javascript 逻辑。所以用户可拓展性就高很多。
但缺点也有，，shadcn/ui 的功能相比 ant design、arco-design 等国内传统组件库来说，实在弱了不少。我们一个组件可能需要支持 50 个逻辑参数，而 shadcn/ui 可能只提供 10 个。剩下的复杂度，就全部交还给了开发者。
对于大多数前端开发者来说，要在此基础上进行深度扩展，难度不小。这与国外许多项目交互复杂度不高的情况，是完全不同的。
所以我一直在想，如果国内 ant-design 这样级别的项目改造为 headless 组件库，那该多好啊。所以这就是我的新项目 t-ui 的来历了。
造轮子并不是初心，而是有两点非常具有现实意义的目的：
-
一方面如果你说有什么项目能覆盖几乎日常前端遇到的所有技术，那莫非组件库项目了，在技术提升的帮助上，毋庸置疑，难度和广度都足够。
-
另一方面，我想帮助很多面试者，因为我也当过很多年面试官，发现很多简历都大差不差，没啥亮点，我希望帮助这部分人拥有一个亮点项目，在面试中给面试官深刻的印象，从而获得职业晋升和待遇升级。
所以我并不是简简单单造轮子，更多的，这是一个组件库教程！而且大家都知道，之前的 mx-design 属于参考了很多主流的组件库，开源的代码，质量好不好大家都看在眼里。我一直是拿其当做最好的组件库教程的目标去做的，目前看来，也是如此。
带着酷炫的动画回来了！
以下是官网首页动画
这是 github 项目地址，欢迎点赞哦: t-ui
也欢迎交流动画技术，后续会写一些动画方面的教程，关于 motion 和 gsap.
项目内容页主要栏目
我们拿 button 组件教程为例，如下图：
每个组件分为三个栏目
- 必读指南：告诉一些相关组件技术难点的知识
- 如何自定义 xx 组件，分别会用
css和tailwindcss在headless也就是无样式组件的基础上，再次封装一个有样式，也就是组件库内容既有headless也有如何将headless组件包装为传统组件库的教程。 - 完整案例，然后会有组件使用案例，其中比较好玩的是创意案例，在
button组件的创意案例中，增加了一些点击状态，例如- 点击有水波纹效果
- 点击粒子迸发效果
- 点击出现笑脸的效果，如下（这个借助了一元三次方程的公式，有兴趣的可以去看源码）：
组件库最近计划
会将原本接近 30 个在 mx-design 中存在的组件逐步迁移到 t-ui 中，算是第一期完成。也欢迎同学咨询和交流前端技术。（微信：a2298613245）
现在的前端技术社区
现在前端技术社区，高质量的技术文章相比以前大大减少了，而且很多卖课的内容，质量很低，在我的前端技术交流群里，也有很多同学抱怨过（好几个朋友买过一些培训机构的教程，其中也有不少粗制滥造的内容，但是价格极其贵）。所以现在的前端技术社区，完全变了，可能跟这个行业本身，经济大环境息息相关。
所以这里强烈建议大家好好把英语拾起来，国外是有很多高质量的教程的，我本身也在坚持提高英语的听说能力，对这个深有体会。后续也会把一些国外的教程放到交流群里和网站上大家一起学习，建立一个高质量的技术分享的社区！