Tailwind CSS CLI 构建时遇到 @import 声明无效问题的解决方案

在使用 Tailwind CSS CLI 工具构建项目时，开发者可能会遇到一个看似简单但令人困惑的问题：当 CSS 文件中包含带分号的 @import 语句时，构建过程会失败并提示"Invalid declaration"错误。本文将深入分析这一问题的成因，并提供多种解决方案。

问题现象

当开发者按照官方文档创建包含以下内容的 CSS 文件时：

@import "tailwindcss";

然后运行 Tailwind CSS CLI 构建命令，会收到如下错误：

Error: Invalid declaration: `@import "tailwindcss"`

问题根源

这个问题的根本原因在于 CSS 语法解析器的严格性。虽然现代 CSS 规范中分号是可选的，但某些 CSS 解析器（包括 Tailwind CSS 使用的解析器）对于 @import 规则后的分号处理较为严格。

解决方案

方案一：移除分号

最简单的解决方案是直接移除 @import 语句后的分号：

@import "tailwindcss"

这种写法完全符合 CSS 规范，且能被 Tailwind CSS 正确解析。

方案二：检查文件编码

另一个潜在的问题是文件编码。如果 CSS 文件被保存为 UTF-8 with BOM 编码，可能会干扰解析器的正常工作。解决方案是：

1. 使用文本编辑器（如 VS Code）打开 CSS 文件
2. 选择"另存为"或"更改编码"选项
3. 选择"UTF-8"编码（不带 BOM）
4. 保存文件后重新运行构建命令

方案三：使用完整的 @import 语法

也可以使用更完整的 @import 语法格式：

@import "tailwindcss" screen;

这种写法明确指定了媒体查询条件（这里是 screen），同时也避免了分号带来的问题。

最佳实践建议

1. 保持一致性：在整个项目中统一使用带分号或不带分号的 @import 语法
2. 编码规范：始终使用 UTF-8 无 BOM 编码保存 CSS 文件
3. 构建工具配置：如果使用其他构建工具（如 PostCSS），确保其配置与 Tailwind CSS 兼容
4. 版本控制：确保使用的 Tailwind CSS 版本是最新的稳定版

技术背景

CSS 规范确实允许 @import 语句不带分号，因为 @import 规则总是出现在样式表的顶部，且后面跟着的是另一个规则或 @import 语句。然而，不同的 CSS 解析器实现可能有不同的严格程度。Tailwind CSS 使用的解析器更倾向于遵循严格的语法规则，特别是在处理 CSS 预处理阶段。

总结

虽然这个问题看似简单，但它揭示了前端工具链中语法解析差异性的重要性。开发者在使用任何 CSS 预处理工具时，都应该注意其特定的语法要求。对于 Tailwind CSS 用户来说，最简单的解决方案就是遵循工具的建议，在 @import 语句中省略分号。