![cover](https://img-blog.csdnimg.cn/c3c2101351964419b458f52c5241d13d.png)
vue3使用tailwindcss,解决无提示问题
创建vue3+vite+ts+pinia+router项目
·
创建Vue3项目
创建vue3+vite+ts+pinia+router
npm create vue@latest
添加Tailwindcss支持
安装 Tailwind 以及其它依赖项并生成 tailwind.config.js
和 postcss.config.js
文件
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
配置 Tailwind
// tailwind.config.js
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
在CSS 中引入 Tailwind,最后,确保您的 CSS 文件被导入到您的 ./src/main.js
文件中
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
已经完成了所有步骤
解决报错和无提示问题
安装vscode插件:PostCSS Language Support
无智能提示安装:Tailwind CSS IntelliSense
更多推荐
所有评论(0)