官网的配置是需要一个cli去生成一份CSS,我简单总结一下更加干货的配置办法:
1.pnpm i postcss autoprefixer typescript
2.配置 postcss.config.cjs
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };
3. 执行 npx tailwindcss init
4.项目的src目录下新建 index.css,放入
@tailwind base; @tailwind components; @tailwind utilities;
5.我用的vscode,出现了 Unknown at rule @tailwindcss(unknownAtRules),我此时在
.vscode/settings.json 文件下加入:
{ .... "css.lint.unknownAtRules": "ignore" }
若没有这个文件,就手动创建一个,问题解决
在main.js/ts中引入这个css文件
此时再试试tailwindcss是否生效吧
标签:vue,tailwind,配置,vscode,tailwindcss,unknownAtRules,css From: https://www.cnblogs.com/llcdbk/p/18399856