提问者:小点点

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


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


共2个答案

匿名用户

您如何包括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