无法使用顺风构建 CSS

Posted 2023-03-07

【中文标题】无法使用顺风构建 CSS

【英文标题】：Unable to build CSS with tailwind

【发布时间】：2021-05-22 23:18:42

【问题描述】：

无论我尝试安装autoprefixer多少次，都会抛出这个错误

>npx tailwindcss@latest build ./src/styles.css -o ./dist/styles.css
npx: installed 80 in 5.546s
Cannot find module 'autoprefixer'
Require stack:
- C:\Users\Q\AppData\Roaming\npm-cache\_npx\62760\node_modules\tailwindcss\lib\cli\commands\build.js
- C:\Users\Q\AppData\Roaming\npm-cache\_npx\62760\node_modules\tailwindcss\lib\cli\commands\index.js
- C:\Users\Q\AppData\Roaming\npm-cache\_npx\62760\node_modules\tailwindcss\lib\cli\main.js
- C:\Users\Q\AppData\Roaming\npm-cache\_npx\62760\node_modules\tailwindcss\lib\cli.js

>npm install autoprefixer
npm WARN @tailwindcss/custom-forms@0.2.1 requires a peer of tailwindcss@^1.0 but none is installed. You must install peer dependencies yourself.
npm WARN @tailwindcss/typography@0.2.0 requires a peer of tailwindcss@^1.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN @tailwindcss/ui@0.6.2 requires a peer of tailwindcss@^1.8.3 but none is installed. You must install peer dependencies yourself.

可能缺少什么？

【问题讨论】：

当您尝试安装 autoprefixer 时会发生什么？

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

【参考方案1】：

现在，我能够重现此错误。我假设您使用以下命令安装tailwindcss（如home page 所述）

$ npm install tailwindcss

但是，仅此一项是行不通的。因为，tailwindcss 是一个 PostCSS 插件，你需要它来编译 tailwindcss。除此之外，您还需要autoprefixer 插件作为tailwindcss 使用它。

您可以使用以下命令安装这些插件。

$ npm i -D autoprefixer postcss

然后使用以下命令创建一个config 文件。

$ npx tailwindcss init

最后，运行你的构建。

$ npx tailwindcss@latest build ./src/styles.css -o ./dist/styles.css

另外，如果您当前正在处理的项目仍处于初始状态，那么我建议您按照this video 中的说明重新配置该项目。