Tailwind CSS v4 独立CLI构建中@plugin指令的使用注意事项

Tailwind CSS v4.0.0版本发布后，独立CLI工具在处理包含@plugin指令的配置文件时出现了一个常见问题。当开发者尝试使用@plugin指令加载官方插件（如@tailwindcss/forms和@tailwindcss/typography）时，会遇到构建失败的情况。

问题表现为在运行独立CLI构建命令时，控制台会抛出"Can't resolve"错误。深入分析后发现，这实际上是一个语法规范问题，而非功能缺失。Tailwind CSS的@plugin指令要求每个插件声明后必须添加分号作为结束符，这与CSS的标准语法规范一致。

正确的配置写法应该是：

@import "tailwindcss";

@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

@theme {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  /* 其他主题变量 */
}

值得注意的是，Tailwind CSS v4的独立CLI仍然内置了所有官方插件，这与v3版本保持一致。开发者无需额外安装这些插件依赖，只需确保语法正确即可。这种设计保持了Tailwind CSS"零依赖"的核心优势，同时提供了完整的插件生态系统支持。

对于从v3升级到v4的用户，还需要了解配置方式的改变。v3版本通过在tailwind.config.js中使用require语句加载插件的方式，在v4中仍然有效，但官方更推荐使用CSS原生的@plugin指令，这符合Tailwind CSS向更轻量级、更符合Web标准方向发展的趋势。

开发者在遇到类似构建问题时，首先应该检查CSS语法是否正确，特别是分号这类细节。Tailwind团队也意识到当前错误信息不够友好，预计会在后续版本中改进错误提示机制，帮助开发者更快定位问题。

这个案例提醒我们，在升级工具链时，除了关注新特性外，也要注意语法规范的细微变化，这些细节往往决定着构建的成败。同时，保持对官方文档的定期查阅，可以避免很多不必要的调试时间。