阿掖山
阿掖山

智力活动是一种生活态度 https://mountaye.github.io/blog/

.css | TailwindCSS 笔记

一直听说“全栈项目 = Next.js + TailwindCSS + HeadlessUI” 但是 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

CC BY-NC-ND 4.0

Like my work?
Don't forget to support or like, so I know you are with me..

Loading...
Loading...

Comment