Vue3.0教程 （六）.tailwindcss(样式)
tailwindcss 安装
一、安装
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest npm install tailwindcss // 目前安装的版本 "tailwindcss": "^1.8.10",
二、创建您的配置文件
$ npx tailwindcss init -p
这将会在您的项目创建一个最小化的 tailwind.config.js 文件 postcss.config.js
module.exports = {
plugins: {
tailwindcss: {
},
autoprefixer: {
},
},
}
配置 Tailwind 来移除生产环境下没有使用到的样式声明
module.exports = {
purge: [./src/**/*.{vue,js,ts,jsx,tsx}],
theme: {
extend: {
}
},
plugins: []
}
在您的 CSS 中引入 Tailwind
// src/main.js import "tailwindcss/tailwind.css"
遇到报错问题：
Error: PostCSS plugin tailwindcss requires PostCSS 8.
# 删除原安装包 npm uninstall tailwindcss postcss autoprefixer # 安装低版本包 npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
下一篇：
转发和重定向的区别和使用