Vue中使用tailwindcss
一、下载tailwindcssnpm install tailwindcss二、引入tailwindcss创建样式文件夹,或在现有文件夹引入,例如style/index.css@import "tailwindcss/base";@import "tailwindcss/components";@import "tailwindcss/utilities";然后引入main.jsimport '.
·
一、下载tailwindcss
npm install tailwindcss
二、引入tailwindcss
- 创建样式文件夹,或在现有文件夹引入,例如style/index.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
- 然后引入main.js
import './styles/index.css'
三、初始化
npx tailwind init
- 这时会生成tailwind.config.js和postcss.config.js,然后在根目录创建vue.config.js配置文件
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [require('tailwindcss'), require('autoprefixer')]
}
}
}
}
四、运行代码
- npm run serve运行代码,如果报等级太高的错误,就删除调低
假设以下错误
PostCSS plugin tailwindcss requires PostCSS 8.
解决方法
# 删除原来安装的包
npm uninstall tailwindcss postcss autoprefixer
# 安装低版本包
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
五、vsCode中安装插件
Tailwind CSS IntelliSense
六、尝试书写代码
<div class="h-8 bg-green-200 text-yellow-500">山竹</div>
更多推荐
已为社区贡献10条内容
所有评论(0)