vue使用tailwindcss
安装依赖
pnpm add -D tailwindcss postcss autoprefixer
创建配置文件tailwind.config.js
npx tailwindcss init
在配置文件content中添加所有模板文件的路径
/** @type {import('tailwindcss').Config} */
export default {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {}},plugins: []
}
将 Tailwind 指令添加到你的 CSS
在\src\style\tailwind.css中添加
@tailwind base;
@tailwind components;
@tailwind utilities;
在main.js文件引用
import '@/style/tailwind.css'
创建配置文件postcss.config.js
export default {plugins: {tailwindcss: {},autoprefixer: {},},
}
vscode编辑器安装插件
Tailwind CSS IntelliSense
修改vscode配置文件
在\.vscode\settings.json中添加
// 用来设置是否在其他位置、注释和字符串中显示代码提示，这里都设置为 true，表示都显示
"editor.quickSuggestions": {"other": "on","comments": "on","strings": "on"
}
写代码显示效果为
参考
在VUE中使用Tailwind CSS
安装 - Tailwind CSS