/** @type {import('tailwindcss').Config} */
|
|
// function genSimilarColorsName(brandName) {
|
// return {
|
// lighter: `var(--${brandName}-lighter-color)`,
|
// light: `var(--${brandName}-light-color)`,
|
// DEFAULT: `var(--${brandName}-color)`,
|
// deep: `var(--${brandName}-deep-color)`,
|
// deeper: `var(--${brandName}-deeper-color)`
|
// };
|
// }
|
function withOpacityValue(variable) {
|
// 返回一个函数，透明度为可选参数，这样在 HTML 元素中使用颜色基础类时，既可以采用 text-blue-500 方式，也支持 text-blue-500/20 快捷同时设置透明度的形式
|
return ({ opacityValue }) => {
|
if (opacityValue === undefined) {
|
return `rgb(var(${variable}))`;
|
}
|
return `rgba(var(${variable}), ${opacityValue})`;
|
};
|
}
|
|
export default {
|
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
corePlugins: {
|
// preflight 会修改元素的默认样式
|
// NOTE: 已知的改为 true 的问题：1）html2canvas 生成的图片因为 image display 改变导致文字整体偏下；
|
// 2）i 标签 display 修改，导致布局错误；3）border 颜色默认值不是黑色
|
preflight: false,
|
},
|
// theme: {
|
// // ...
|
// // 修改Tailwind主题色配置，使用我们设计的这一套颜色
|
// colors: {
|
// white: '#fff',
|
// black: '#191919',
|
// transparent: 'transparent',
|
// // 直接使用css变量
|
// primary: genSimilarColorsName('primary'),
|
// info: genSimilarColorsName('info'),
|
// success: genSimilarColorsName('success'),
|
// warning: genSimilarColorsName('warning'),
|
// danger: genSimilarColorsName('danger')
|
// }
|
// },
|
theme: {
|
extend: {
|
backgroundColor: { // 此处用来定义主题的背景色基础样式
|
skin: {
|
bg: withOpacityValue('--color-bg-base'),
|
bgExr: withOpacityValue('--color-bg-base-exr'),
|
bgSide: withOpacityValue('--color-bg-side'),
|
bgBorder: withOpacityValue('--color-bg-border'),
|
fo: withOpacityValue('--color-text-font'),
|
card: withOpacityValue('--color-bg-card'),
|
btn: withOpacityValue('--color-bg-btn'),
|
avatar: withOpacityValue('--color-bg-avatar'),
|
'btn-hover': withOpacityValue('--color-bg-btn-hover'),
|
}
|
},
|
textColor: { // 文本的基础样式
|
'primary': 'var(--color-text-base)',
|
'btn-base': 'var(--color-btn-base)',
|
}
|
}
|
},
|
plugins: [require("@tailwindcss/typography")],
|
};
|
