Skeleton项目中Tailwind PurgeCSS与Highlight.js的配置优化

在Skeleton项目中使用Tailwind CSS时，PurgeCSS是一个重要的优化工具，它可以帮助移除未使用的CSS样式，减小最终打包体积。然而，近期关于Highlight.js的PurgeCSS配置出现了一些需要注意的问题。

问题背景

Highlight.js是一个流行的代码高亮库，它会为代码块生成带有hljs-前缀的CSS类名。在Skeleton项目中，文档和CLI模板原先建议使用以下PurgeCSS配置来保留这些类：

purgeCss({
  safelist: {
    greedy: [/^hljs-/]
  }
})

但这种配置方式在新版本的vite-plugin-tailwind-purgecss插件中已经不再适用，会导致类型错误。

解决方案演变

随着PurgeCSS插件的更新，配置方式发生了变化。目前有两种可行的解决方案：

1. 标记为legacy模式（不推荐）：

purgeCss({
  legacy: true,
  safelist: {
    greedy: [/^hljs-/]
  }
})

2. 完全省略配置（推荐）：

purgeCss()

技术解析

为什么现在可以省略配置？这是因为新版本的PurgeCSS插件已经足够智能，能够自动识别和保留Highlight.js生成的类名，无需手动配置白名单。这种改进简化了开发者的配置工作，同时保证了功能的完整性。

对于开发者而言，这意味着：

• 配置更加简洁
• 减少了潜在的配置错误
• 维护成本降低
• 项目升级更加平滑

最佳实践建议

基于当前的技术发展，建议Skeleton项目用户：

1. 移除所有PurgeCSS的特殊配置，使用最简单的purgeCss()调用
2. 定期检查项目依赖，确保使用最新版本的vite-plugin-tailwind-purgecss插件
3. 关注Skeleton项目的更新日志，了解配置方式的变化

这种简化的配置方式不仅适用于Highlight.js，也反映了现代前端工具链向"约定优于配置"方向发展的趋势，减少了开发者的心智负担，同时保证了工具的强大功能。