Tailwind 和 Vuejs 项目中我的 main.css 文件的问题

Question

尝试使用包含 Tailwind 的 webpack 设置 Vuejs 项目CSS。我一直在遵循 Jerrie 博客 post (https://www.jerriepelser.com/blog/using-tailwindcss-with-vuejs/) as well as Adam's example on github (https://github.com/adamwathan/vue-cli-tailwind-example) 中的说明。但是在构建我的 main.css 文件时，我一直运行ning 遇到问题。

我的步骤：

1.) 创建一个 Vue 项目 -

vue init webpack tailwind-test

2.) 然后我运行 NPM 安装 -

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

Answer 1

您如何将 main.css 纳入您的项目？

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

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

尽管 @tailwind 应该仍然有效。

Answer 2

我的建议是安装 postCSS 语言支持并将 .css 重命名为 .pcss 然后更改 package.json 脚本（或您正在使用的任何构建脚本）中的引用tailwind) 来自 .css to.pcss 并且一切正常。

Issues with my main.css file in a Tailwind and Vuejs Project