webpack - 我在 Tailwind 和 Vuejs 项目中的 main.css 文件存在问题

Question

尝试使用包含 TailwindCSS 的 webpack 设置 Vuejs 项目。我一直在遵循 Jerrie 的博客文章 ( https://www.jerriepelser.com/blog/using-tailwindcss-with-vuejs/ ) 以及亚当在 github 上的示例 ( https://github.com/adamwathan /vue-cli-tailwind-example）。但是在构建我的 main.css 文件时，我一直遇到问题。

我的步骤：

1.) 创建一个 Vue 项目 -

vue init webpack tailwind-test

2.) 然后我运行 NPM install -

npm install

随着我的 Vue 项目设置，我一直在尝试添加 Tailwind，但遇到了一些困难。

3.) 安装 Tailwind NPM -

npm install tailwindcss --save-dev

4.）然后添加我的配置文件 -

./node_modules/.bin/tailwind init tailwind.js

这就是我遇到问题的地方...

5.) 创建一个 CSS 文件 -

cd src 
cd assets
mkdir styles 
touch main.css

6.) 然后我输入我的 main.css 文件并添加 -

@tailwind preflight; 
@tailwind utilities;

从这里我的文本编辑器返回错误“at-rule unknown”，这阻止我更新对我的 .postcssrc.js 文件进行最后润色。

任何反馈将不胜感激！

谢谢
-MB

score 1 · Accepted Answer

你是如何参与main.css到你的项目中的？

此外，由于 vue webpack 模板使用 PostCSS，因此您应该按照文档的建议进行操作。

@import "tailwindcss/preflight";
@import "tailwindcss/utilities";

虽然@tailwind应该仍然有效。

score -1 · Accepted Answer

我的建议是安装 postCSS 语言支持并将 .css 重命名为 .pcss，然后将 package.json 脚本（或您用于 tailwind 的任何构建脚本）中的引用从 .css 更改为 .pcss，一切都应该正常。

2 回答 2