我的主要问题。Tailwind和Vuejs项目中的css文件

Question

尝试使用包含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安装-

npm install

随着我的Vue项目的建立，我一直在努力添加顺风，但有一些困难。

3.）安装尾风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）然后我进入我的主页。css文件和添加-

@tailwind preflight; 
@tailwind utilities;

从这里，我的文本编辑器返回错误“未知规则”，这阻止了我更新我的.postcssrc.js文件。

任何反馈都将不胜感激！

谢谢
-MB

Answer 1

我的建议是安装POSTSS语言支持并重命名。css到。PCS然后更改包中的引用。来自的json脚本（或用于tailwind的任何构建脚本）。css到。PCS和所有东西都应该工作正常。

@应用规则也与POSTSS兼容：https://github.com/tailwindcss/tailwindcss/issues/325

Answer 2

您如何包括main。css是否已导入到您的项目中？

此外，由于vue webpack模板使用PostCSS，您可能应该像文档建议的那样做。

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

尽管@tailwind仍然可以工作。