无法使用 tailwind 构建 CSS

Question

无论我尝试安装多少次 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\_npx760\node_modules\tailwindcss\lib\cli\commands\build.js
- C:\Users\Q\AppData\Roaming\npm-cache\_npx760\node_modules\tailwindcss\lib\cli\commands\index.js
- C:\Users\Q\AppData\Roaming\npm-cache\_npx760\node_modules\tailwindcss\lib\cli\main.js
- C:\Users\Q\AppData\Roaming\npm-cache\_npx760\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.

可能缺少什么？

Answer 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 中所述重新配置项目。

无法使用 tailwind 构建 CSS

Unable to build CSS with tailwind

npm

tailwind-css