带有CSS变量的PostCSS嵌套在Tailwind CSS & Next.js中不起作用

的原因可能是由于PostCSS和Tailwind CSS之间的加载顺序问题。在使用PostCSS嵌套时，需要确保PostCSS在Tailwind CSS之前加载，以确保CSS变量能够正确地应用。

解决这个问题的一种方法是通过在Next.js项目中的配置文件中调整PostCSS的加载顺序。可以在项目根目录下创建一个名为postcss.config.js的文件，并按照以下方式进行配置：

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-nested': {},
    'tailwindcss': {},
    'autoprefixer': {},
  }
}

这样配置后，PostCSS将在Tailwind CSS之前加载，并且CSS变量应该能够正常工作。

关于这个问题的更多信息，可以参考腾讯云的CSS变量文档：CSS变量 - 腾讯云

同时，Tailwind CSS是一个功能强大的CSS框架，它提供了大量的预定义样式和实用工具类，可以帮助开发者快速构建现代化的用户界面。Next.js是一个流行的React框架，用于构建服务器渲染的React应用程序。通过结合使用Tailwind CSS和Next.js，开发者可以更高效地开发和管理复杂的前端项目。

希望这个答案能够帮助到你，如果有任何其他问题，请随时提问。