用 TailwindCSS 打造美好祝福：给大家送上新年祝福的 demo
前几天，群里有有伙伴问，在 Next.js 中，该使用哪个 UI 框架？我强烈推荐 tailwindcss， 因为你不再需要写 CSS 代码了，这 2 天还录制了一个视频，包括录屏、录音、剪辑、动画等，花费蛮多时间，在视频最后，借一个 demo 给大家拜年了，祝您在新的一年中，事业蒸蒸日上，幸福美满，健康长久。
2022 年 Tailwind css 可以说是 CSS 框架中一批黑马，越来越多的开发者开始使用 Tailwind css，在 stateofcss.com 上显示，在满意度和关注度和认知度方面持续上升，在使用度方面仅次于 bootstrap， 当然国内开发者加入这个调查的较少，那么你在项目中使用过 Tailwind css 吗？
什么是 Tailwind css ？
官网的描述是：A utility-first CSS framework，一个实用优先的 CSS 框架，可以理解为是一个 css 原子类框架， 我们不必再写 CSS，而是全部使用原子类代替。
比如 flex 、pt-4、text-center，原子类这个东西早就有了，那为什么到现在才流行呢？
我们一起来看看 Tailwind css 的优点
- 基于约束
Tailwind css 基于 api 约束，让我们在颜色，间距，版式，阴影等使用上有一定约束，而不是使用任意颜色值样式，这会让我们的网页更规范性。
- 书写任意样式
Tailwind css 虽然基于约束，但可以创建任意样式，即使你使用相同的 html ，也可以创建丰富的界面
- 代码量最少
Tailwind css 在构建时会自动删除所有未使用的 CSS，这意味着最终生成的 CSS 代码可能是最小的。事实上，大多数 Tailwind 项目向客户端发送的 CSS 少于 10kB。
- 响应式设计
Tailwind css 采用移动优先的策略，我们不必再写媒体查询 css 代码，而是可以在任意原子类前面加上 sm、md、lg 等这些前缀，让我们的网站轻松实现响应式设计。
- 支持 hover 和 focus 状态
鼠标悬停和聚焦依然可以实现，只需要在原子类前面加上 hover: focus: 等前缀，甚至可以使用 group，实现子元素的悬停和聚焦效果
- 组件化设计
别在担心 html 中相同代码的复制粘贴，现代 JavaScript 框架都采用了组件化设计思维，相同的代码只需要创建一个组件，然后通过循环遍历实现。
有时候也担心 class 名称过长，也可以使用 @apply 指令将原子类复制到 css 样式表中
- 暗黑模式支持
不想让人在凌晨 2 点打开手机感觉亮瞎眼？没错，你的网站需要支持暗黑模式，我们只需要在原子类样式前面加上 dark 前缀，就可以实现网站适配。
- 易于扩展调整
我们可以在 tailwind.config.js 配置文件中配置颜色、尺寸、以及其他样式、配置插件等。
比如例示中配置了 primary 和 secondary 的颜色变量，那么就可以支持 bg-primary-50 样式了。
因此对于网站，要支持换肤，便是轻而易举。只需要修改 tailwind.config.js 就可以
- 前沿的 css 特性支持
Tailwind 还支持 Grid 布局，transform 旋转，缩放，平移、gradient 渐变等；编辑器支持 那么，这么多类名，如何让开发者都如果记得住？别担心，官方提供了 vscode 扩展支持，只需要安装这个插件，就可以在编辑器中会自动补全和提示。
好了，以上就是本文的全部内容，没用过的朋友，赶紧去试试吧
