为什么安装TailwindCSS要使用带postcss7-compat的命令而非直接安装？

命令语法与版本差异说明 #

@符号在npm安装命令中的作用 #

npm里@主要有两类用法：

• 版本限定：包名@版本范围，代表安装匹配指定范围的包版本，比如postcss@^7就是安装PostCSS 7.x大版本下的最新稳定版，不会自动升级到8.x版本
• 包别名映射：自定义别名@npm:实际包名，这是npm的别名安装语法，意思是将实际包名对应的包安装到项目中，但在package.json里登记的依赖名是你设置的自定义别名，项目里引入的时候直接写import xxx from '自定义别名'即可，不用改引入路径。

两条安装命令的差异 #

你看到的长命令是专门适配PostCSS 7环境的兼容安装方案，各部分含义如下：
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

• tailwindcss@npm:@tailwindcss/postcss7-compat：Tailwind官方推出的适配PostCSS 7的兼容包，通过别名语法登记为tailwindcss，不影响原有代码的引入写法
• postcss@^7：强制锁定PostCSS大版本为7，避免自动升级到8.x产生冲突
• autoprefixer@^9：Autoprefixer 10+只适配PostCSS 8+，这里锁定9.x版本适配PostCSS 7

而你提到的简化命令npm install -D tailwindcss postcss autoprefixer，会默认安装三个包的最新稳定版，当前最新的TailwindCSS 3+依赖PostCSS 8和Autoprefixer 10+，和PostCSS 7环境完全不兼容。

为什么官方会提供长版本命令 #

旧版本的Create React App（v4及更早版本）内部默认内置了PostCSS 7，没有办法直接兼容PostCSS 8生态的依赖，直接用简化命令安装会出现版本冲突、项目启动失败的问题，所以官方给出了这套兼容安装方案。
如果你使用的是Create React App v5及更高版本，或是其他默认支持PostCSS 8的项目框架，完全可以直接使用简化命令安装最新版本。

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