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

【问题标题】：Issues with my main.css file in a Tailwind and Vuejs Project我在 Tailwind 和 Vuejs 项目中的 main.css 文件存在问题
【发布时间】：2018-10-27 03:19:54
【问题描述】：

尝试使用包含 TailwindCSS 的 webpack 设置 Vuejs 项目。我一直在遵循 Jerrie 的博文 (https://www.jerriepelser.com/blog/using-tailwindcss-with-vuejs/) 以及 Adam 在 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

【问题讨论】：

标签： webpack vue.js frameworks vue-cli tailwind-css

【解决方案1】：

您如何将main.css 包含到您的项目中？

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

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

虽然@tailwind 应该仍然有效。

【讨论】：

嗨，比尔，不知道我是怎么错过的，但它似乎解决了我的 main.css 问题！感谢您引起我的注意。

【解决方案2】：

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

@apply 规则也兼容 postCSS：https://github.com/tailwindcss/tailwindcss/issues/325

【讨论】：