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项目设置的情况下，我一直试图添加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脚本（或用于顺风的任何构建脚本）中的引用从.css更改为.pcss，一切应该正常