Biome项目对Tailwind CSS非标准语法的处理方案

Tailwind CSS作为当前流行的原子化CSS框架，在v4版本中引入了一项新特性：通过source()语法指定基础路径来扫描类名。这一特性虽然实用，却因其非标准的CSS语法而引发了一系列兼容性问题。

问题背景

Tailwind v4新增的source()语法允许开发者自定义类名扫描路径，例如：

@import 'tailwindcss' source('../app');

这种语法在CSS标准中并不存在，导致Biome这类严格遵循CSS标准的工具链无法正确解析，会抛出语法错误提示"expected , but instead found ("。

技术原理分析

Biome作为现代化的前端工具链，其CSS解析器严格遵循W3C CSS规范。当遇到Tailwind这种框架自定义的非标准语法时，解析器会按照标准规范报错，这是设计上的预期行为，而非Bug。

解决方案

经过社区讨论，目前可行的解决方案是采用标准CSS语法进行拆分：

@import "tailwindcss";
@source "../app";

这种写法既保留了Tailwind的功能特性，又符合CSS语法规范，能够被Biome正确解析。

对开发者的建议

1. 当使用Tailwind等带有自定义语法的CSS工具时，建议查阅其官方文档了解兼容性写法
2. 遇到解析错误时，可考虑将复合语句拆分为多个标准语句
3. 关注CSS标准发展，未来可能会有更完善的扩展机制支持这类用例

Biome团队将持续关注前端工具链的生态发展，在保持标准兼容性的同时，也会考虑对主流框架特性的支持方案。