命令
# Vue2
# 安装talwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 -D
# 生成tailwind.config.js 和 postcss.config.js
npx tailwindcss init -p
main.js
import "tailwindcss/tailwind.css";
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: "jit",
content: [],
purge: ["./src/**/*.html", "./src/**/*.js", "./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.vue"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
primary: "#F58848",
success: "#54d880",
"primary-sub": "#5FB671",
danger: "#E24C52",
"success-light": "#EEF8F0"
}
}
},
corePlugins: {
aspectRatio: false
},
plugins: []
};
添加完上面的 就可以正常使用
以下 是多余的 已测试删除后还能继续使用
src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;