尝试使用包含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
您如何包括main。css
是否已导入到您的项目中?
此外,由于vue webpack模板使用PostCSS,您可能应该像文档建议的那样做。
@import "tailwindcss/preflight";
@import "tailwindcss/utilities";
尽管@tailwind
仍然可以工作。
我的建议是安装POSTSS语言支持并重命名。css到。PCS然后更改包中的引用。来自的json脚本(或用于tailwind的任何构建脚本)。css到。PCS和所有东西都应该工作正常。
@应用规则也与POSTSS兼容:https://github.com/tailwindcss/tailwindcss/issues/325