PurgeCSS处理BEM类名需用完整选择器或正则safelist：如'.card__header'或/^[a-z]+(__|--)[a-z]+$/，避免动态拼接导致漏删，且@layer components中的类须真实出现在HTML或content配置中。
白名单必须匹配BEM类名的完整结构
PurgeCSS默认只保留静态出现的类名，而BEM中像.card__header--sticky这种带双下划线和双短横的类名，不会被content扫描器自动识别——它既不匹配Tailwind的原子类正则，也不在默认白名单里。直接写whitelist: ['card']没用，因为PurgeCSS按单词拆分匹配，card会被当作独立词，但card__header里的__header部分仍会被判为未使用。
- 必须写完整选择器：
whitelist: ['.card__header', '.card__header--sticky'] - 若修饰符动态拼接（如
class="card__item--${state}"），不能靠拆词匹配，得用通配符 - 通配符只支持前后带
*的格式：'*card__item--*'才生效，'card__item--*'或'*card__item--'会被忽略
用safelist替代whitelist更可靠
新版PurgeCSS（v4+）已弃用whitelist，统一用safelist，且支持正则、函数、字符串三种形式。对BEM类名来说，正则最实用：
- 匹配所有
__元素：/[a-z]+__[a-z]+/ - 匹配所有
--修饰符：/[a-z]+--[a-z]+/ - 组合写法（推荐）：
[/[a-z]+(__|--)[a-z]+/, /card__[a-z]+/, /button--(primary|secondary)/] - 注意：正则需用
/.../字面量，不要加引号；字符串形式（如'card__title'）仍支持，但无法覆盖动态变体
避免在HTML里拼接BEM类名
像class="btn btn--${type} btn__icon"这种写法会让PurgeCSS漏掉btn__icon——因为${type}打断了字符串连续性，扫描器无法提取完整类名。这不是白名单能解决的问题，而是源头逻辑缺陷。
- 改用显式枚举：
class="btn btn--primary btn__icon"+btn--secondary等全量写出 - 或用
classnames库保证字符串完整性：classNames('btn', `btn--${type}`, 'btn__icon') - 若必须动态生成，把完整类名提前注入
safelist，例如：safelist: ['btn__icon', 'btn__text', 'btn--loading']
配合@layer components定义BEM类时的特殊处理
当你用Tailwind的@layer components写.card__header { @apply ... }时，这些类名本身不会出现在HTML里，PurgeCSS根本扫描不到——哪怕你写了safelist，也只保留在CSS中被引用的部分，而非实际使用的实例。
立即学习“前端免费学习笔记（深入）”；
- 必须确保对应类名真实出现在HTML模板中，哪怕只是注释：
<!-- <div class="card__header"></div> --> - 或者在
content配置里显式包含SCSS/CSS源文件：content: ['./src/**/*.css', './src/**/*.tsx'] -
@layer components块内的类名不会自动加入safelist，它们和普通类一样依赖扫描结果
真正难的不是写对白名单，而是让BEM类名在扫描阶段就“可见”——要么硬编码进HTML，要么用工具确保字符串不被JS运行时破坏，否则再全的safelist也救不回那些根本没被发现的类。
