Skip to content

Tailwind CSS 知识手札 ​

本手札按知识依赖阅读:先建立 Tailwind CSS 的运行模型,再把状态、数据、资源清理、错误和测试放回工程边界。主线与补充专题都保留独立入口,读者可以从章节概览进入正文。

阅读方法 ​

每篇先运行正文中的最小实验,再改变一个输入、时序或宿主条件,记录可观察结果;练习答案只用于核对实现和失败原因。遇到存量项目,优先阅读标为补充或维护的专题,确认旧写法的行为边界后再迁移。

全书顺序 ​

01|CSS 基础、主题与令牌 ​

本章围绕 CSS 基础、主题与令牌 展开,按依赖顺序阅读以下正文:

  1. Flex/Grid、容器与间距
  2. Theme tokens 与自定义属性
  3. 字体、颜色与对比度

02|设计令牌与工具类 ​

本章围绕 设计令牌与工具类 展开,按依赖顺序阅读以下正文:

  1. 设计令牌与工具类

03|响应式与状态变体 ​

本章围绕 响应式与状态变体 展开,按依赖顺序阅读以下正文:

  1. 动画、dark 与 reduced-motion
  2. 断点与移动优先
  3. hover/focus/data/aria 变体

04|响应式、状态与容器 ​

本章围绕 响应式、状态与容器 展开,按依赖顺序阅读以下正文:

  1. 响应式、状态与容器

05|扫描、组件与交付 ​

本章围绕 扫描、组件与交付 展开,按依赖顺序阅读以下正文:

  1. 组件 API 与 class 合并
  2. CSS 体积、兼容与回归
  3. Content scanning 与动态 class

06|组件边界、配置与扫描 ​

本章围绕 组件边界、配置与扫描 展开,按依赖顺序阅读以下正文:

  1. 组件边界、配置与扫描

07|可访问性、体积与维护 ​

本章围绕 可访问性、体积与维护 展开,按依赖顺序阅读以下正文:

  1. 可访问性、体积与维护

学完后的检验 ​

能够从输入和执行时序解释 Tailwind CSS 的状态变化;能在组件、请求、SSR 或构建条件改变时定位边界;能为关键路径写出可重复的测试或实验,并说明当前版本与运行宿主限制。

返回Tailwind CSS学习路线。

用心记录每一步成长