Modern.js 项目中 Tailwind CSS 4.0 的适配方案

Tailwind CSS 4.0 带来了许多令人兴奋的新特性，但也带来了一些兼容性问题。在 Modern.js 项目中，开发者可能会遇到 PostCSS 插件配置变更的问题。本文将详细介绍如何解决这些问题，并提供完整的适配方案。

问题背景

Tailwind CSS 4.0 对 PostCSS 插件的处理方式进行了重大调整。现在，Tailwind CSS 核心不再直接作为 PostCSS 插件使用，而是需要单独安装 @tailwindcss/postcss 包。这一变更导致 Modern.js 项目中现有的 @modern-js/plugin-tailwindcss 插件无法直接兼容 Tailwind CSS 4.0。

临时解决方案

对于急需使用 Tailwind CSS 4.0 的开发者，目前有以下两种解决方案：

方案一：手动修改 Modern.js 插件

通过修改 @modern-js/plugin-tailwindcss 的源码，将所有对 tailwindcss 的引用替换为 @tailwindcss/postcss。这可以通过 PNPM 的 Patch 功能实现：

1. 修改 getTailwindPath 和 getTailwindVersion 方法中的引用路径
2. 更新 package.json 中的依赖版本要求
3. 确保 @tailwindcss/postcss 已正确安装

方案二：直接配置 PostCSS

更推荐的做法是暂时不使用 @modern-js/plugin-tailwindcss 插件，而是直接在 Modern.js 配置中手动配置 PostCSS：

1. 安装 @tailwindcss/postcss 作为项目依赖
2. 在 modern.config.ts 中移除 tailwindcssPlugin
3. 使用 tools.postcss 配置项手动添加 PostCSS 插件

未来展望

Modern.js 团队已经注意到这个问题，预计将在未来的版本中提供对 Tailwind CSS 4.0 的官方支持。在此之前，开发者可以按照上述方案进行适配。

注意事项

1. 确保项目中同时安装了 tailwindcss 和 @tailwindcss/postcss
2. 检查 PostCSS 版本是否兼容（建议使用 8.5.1 或更高版本）
3. 如果使用方案一，请注意后续 Modern.js 版本更新可能会覆盖你的修改

总结

Tailwind CSS 4.0 的架构调整虽然带来了一些适配工作，但也为未来的功能扩展打下了基础。Modern.js 开发者可以通过本文提供的方案顺利过渡到新版本，享受 Tailwind CSS 4.0 带来的新特性。随着 Modern.js 生态的不断完善，官方支持方案也将很快到来。