TailwindCSS搭配PostCSS配置嵌套时无法解析tailwindcss/nesting模块

问题根本原因 #

1. 你当前安装的Tailwind CSS版本为1.9.6，属于v1旧版本，tailwindcss/nesting内置嵌套模块是Tailwind CSS v3.0及以上版本才新增的功能，旧版本核心包不存在该模块，因此会抛出找不到模块的报错。
2. 你的.postcssrc配置存在语法错误："tailwindcss": {} 行末尾缺少逗号，也会导致配置加载异常。

解决方案（二选一即可） #

方案1：升级到Tailwind CSS v3（推荐） #

• 执行命令升级相关依赖：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

• 修正.postcssrc的语法错误，完整配置如下：

{
    "modules": false,
    "plugins": {
        "postcss-import": {},
        "tailwindcss/nesting": {},
        "tailwindcss": {},
        "autoprefixer": {
            "grid": true
        }
    }
}

• 同步调整tailwind.config.js适配v3规范：将purge字段重命名为content，删除已经默认生效的future配置项即可。

方案2：保留当前Tailwind v1版本 #

你已经安装了postcss-nested嵌套插件，直接替换配置即可：

• 修改.postcssrc，将"tailwindcss/nesting": {}替换为"postcss-nested": {}，同时补全缺失的逗号：

{
    "modules": false,
    "plugins": {
        "postcss-import": {},
        "postcss-nested": {},
        "tailwindcss": {},
        "autoprefixer": {
            "grid": true
        }
    }
}

• 配置修改完成后重启Parcel开发服务即可生效。

内容的提问来源于stack exchange，提问作者Danyx