CSS框架

元信息

目标：会对比取舍两类 CSS 框架——bootstrap 式预制组件库与 tailwind 式工具优先的原子样式，理解 tailwind 借助构建工具在构建期处理动态样式类、本身即预处理器的新定位
关键概念：CSS框架、utility css、原子样式、tailwind、bootstrap、构建工具
关联阶段：cp2
常见误区：以为 tailwind 与 bootstrap 只是组件风格不同（前者工具优先、构建期处理，v4 后本身即 CSS 构建工具/预处理器）；以为原子类就是内联样式换个写法（class 可组合、受构建工具处理，相当于 CSS 模块化）

经典CSS

采用 css classes 方式，提供大量预定制的样式组件，预制菜

https://purecss.cn/

https://bootstrap.ac.cn/docs/5.3/

utility css

采用 css classes 方式，提供大量原子样式，方便定制，锅气足

https://www.tailwindcss.cn/

https://www.runoob.com/tailwindcss

https://daisyui.com/docs/

tailwind.css

官方文档 https://tailwindcss.zhcndoc.com/

体验 https://play.tailwindcss.com/

工具优先 utility-First：不试图提供预置的模板，而是提供各种便利样式工具提高自定义的效率
原子样式 atom css：便于自由组合
内联实现 inline class：级联优先级最高，相当于CSS的模块化，不受上下文的CSS影响

动态处理

Tailwind CSS与Bootstrap最大不同：不仅提供静态样式类，还提供动态样式类

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

更多实例 https://tailwindcss.zhcndoc.com/docs/adding-custom-styles#using-arbitrary-values

tailwind借助于js和构建工具，会在构建时扫描项目中的所有文件，并对各种动态类或指令进行处理，比如：

javascript

export default function Button({ size, children }) {
  let sizeClasses = {
    md: "px-4 py-2 rounded-md text-base",
    lg: "px-5 py-3 rounded-lg text-lg",
  }[size];
  return (
    <button type="button" className={`font-bold ${sizeClasses}`}>
      {children}
    </button>
  );
}

从模板框架到构建工具

Tailwind CSS v4.0 是一种功能齐全的 CSS 构建工具，旨在特定工作流程中使用，不适合与像 Sass、Less 或 Stylus 这样的 CSS 预处理器一起使用。

将 Tailwind CSS 本身视为你的预处理器——你不应该将 Tailwind 与 Sass 一起使用，就像你不会将 Sass 与 Stylus 一起使用一样。

由于 Tailwind 是为现代浏览器设计的，因此在嵌套或变量等方面实际上不需要预处理器，Tailwind 本身会处理诸如打包导入和添加厂商前缀等内容。

参考

https://www.runoob.com/tailwindcss/

CSS框架 ​

元信息 ​

经典CSS ​

utility css ​

tailwind.css ​

动态处理 ​

从模板框架到构建工具 ​

参考 ​