.css | TailwindCSS 笔记

思路：utility-first

https://tailwindcss.com/docs/utility-first

传统设计需要根据 html 中的结构，在 CSS 中给相应的元素/class/id 定义所需要的所有样式 style。

问题很明显：

• 最低效的情况下，每个 <div/> 都要定义一个 class。

• 每个定义里包含若干不同的性质，背景颜色、字体、边框样式等等都挤在一个大括号里，耦合过强。

TailwindCSS 的思路名叫 utility-first, 预先定义一批“性质-取值”的组合，每个组合给出一个有规律命名的类。使用时，一个 <div/> 后面声明几个甚至几十个不同的 class。缺点就是不灵活了，每个性质只搭配有限几种取值，且类的数量很多。好处是——

• 不用绞尽脑汁给类取名字

• CSS 不会再变大了（也可以说已经大得不能再大了）

• 修改视觉效果时更换一个类，而不是修改类的定义，也就不用担心对类的修改在自己不记得的地方生效。

与之相对的另一种思路，是直接用 html 元素的 style 属性，或者用 module.css 让样式只对某一 component 生效。TailwindCSS 派对这种方法的批评是：

• 每个取值都是设计者拍脑袋想出来的，一个项目要拍太多次脑袋，容易风格不统一。

• 难以做 responsive design （真的吗？很怀疑）

• 难以处理鼠标悬浮、聚焦等等状态（这玩意应该由 CSS 处理吗？）

utility-first 在维护性方面收到批评的一点是，很多地方要不断重用相同的组合，少了一点封装和抽象。TailwindCSS 对此的辩护是，可以抽象出 components 和 partials（见下节），或者使用编辑器的多光标功能。（绷……）

以下章节内容篇幅过长，请到博客原文阅读：https://mountaye.github.io/blog/articles/notes-on-TailwindCSS

技术细节

• 样式重用

• 状态，比如鼠标悬浮、聚焦

• Responsive design

• 夜间模式

• 添加自定义样式

• 函数和 directives

在 Next.js 项目中安装 TailwindCSS

https://nextjs.org/docs/pages/building-your-application/styling/tailwind-css