182 lines
3.8 KiB
JavaScript
182 lines
3.8 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
||
import plugin from 'tailwindcss/plugin';
|
||
|
||
import tailwindcss_themer from 'tailwindcss-themer';
|
||
|
||
module.exports = {
|
||
content: [
|
||
'./src/pages/**/*.tsx',
|
||
'./src/components/**/*.tsx',
|
||
'./src/layouts/**/*.tsx',
|
||
],
|
||
theme: {
|
||
extend: {
|
||
keyframes: {
|
||
// 变大变小动画
|
||
scale: {
|
||
'0%, 100%': {
|
||
transform: 'scale(0.9)',
|
||
},
|
||
'40%': {
|
||
transform: 'scale(1.0)',
|
||
},
|
||
'70%': {
|
||
transform: 'scale(0.9)',
|
||
},
|
||
},
|
||
// 从上方掉下来，然后在反弹回来
|
||
bounceIn: {
|
||
'0%': {
|
||
transform: 'translateY(-200px)',
|
||
},
|
||
'80%': {
|
||
transform: 'translateY(100px)',
|
||
},
|
||
'100%': {
|
||
transform: 'translateY(0)',
|
||
},
|
||
},
|
||
// 购买记录动画
|
||
record: {
|
||
'0%': {
|
||
transform: 'translate(0, 30px)',
|
||
},
|
||
'100%': {
|
||
transform: 'translate(0, calc(30px - 100%))',
|
||
},
|
||
},
|
||
},
|
||
colors: {
|
||
brand: {
|
||
100: '#FEF7D8',
|
||
200: '#FEECB2',
|
||
300: '#FEDE8C',
|
||
400: '#FED16F',
|
||
500: '#FEBB40',
|
||
600: '#DA972E',
|
||
700: '#B67620',
|
||
800: '#935814',
|
||
900: '#79430C',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
plugins: [
|
||
plugin(function ({ addComponents }) {
|
||
const newUtilities = {
|
||
'.safe-top': {
|
||
paddingTop: 'constant(safe-area-inset-top)',
|
||
// paddingTop: "env(safe-area-inset-top)",
|
||
},
|
||
'.safe-left': {
|
||
paddingLeft: 'constant(safe-area-inset-left)',
|
||
// paddingLeft: "env(safe-area-inset-left)",
|
||
},
|
||
'.safe-right': {
|
||
paddingRight: 'constant(safe-area-inset-right)',
|
||
// paddingRight: "env(safe-area-inset-right)",
|
||
},
|
||
'.safe-bottom': {
|
||
paddingBottom: 'constant(safe-area-inset-bottom)',
|
||
// paddingBottom: "env(safe-area-inset-bottom)",
|
||
},
|
||
'.disable-scrollbars': {
|
||
scrollbarWidth: 'none',
|
||
'-ms-overflow-style': 'none',
|
||
'&::-webkit-scrollbar': {
|
||
width: '0px',
|
||
background: 'transparent',
|
||
display: 'none',
|
||
},
|
||
'& *::-webkit-scrollbar': {
|
||
width: '0px',
|
||
background: 'transparent',
|
||
display: 'none',
|
||
},
|
||
'& *': {
|
||
scrollbarWidth: 'none',
|
||
'-ms-overflow-style': 'none',
|
||
},
|
||
},
|
||
'.no-tap-highlighting': {
|
||
'webkit-tap-highlight-color': 'rgba(0,0,0,0)',
|
||
},
|
||
'.shadow-normal': {
|
||
boxShadow: '0px 2px 8px 0px #0000001A',
|
||
},
|
||
};
|
||
|
||
addComponents(newUtilities);
|
||
}),
|
||
tailwindcss_themer({
|
||
defaultTheme: {
|
||
extend: {
|
||
colors: {
|
||
// 主色 & 功能色
|
||
primary: {
|
||
50: '#f0f7ff',
|
||
100: '#e0efff',
|
||
200: '#c9e2ff',
|
||
300: '#a6d0ff',
|
||
400: '#7cb6ff',
|
||
500: '#6CA0FF', // 您的主色
|
||
600: '#3b7de6',
|
||
700: '#2b63c2',
|
||
800: '#1f4b9c',
|
||
900: '#18387d',
|
||
950: '#0f234a',
|
||
},
|
||
|
||
// 您自定义的中性色（如果不想用Tailwind默认的grayscale）
|
||
neutral: {
|
||
darkest: '#333333',
|
||
darker: '#666666',
|
||
dark: '#999999',
|
||
base: '#DDDDDD',
|
||
light: '#EEEEEE',
|
||
lightest: '#F8F9FA',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
themes: [
|
||
{
|
||
name: 'partner',
|
||
selectors: ['.partner-mode', '[data-theme="partner"]'],
|
||
extend: {
|
||
colors: {
|
||
primary: {
|
||
50: '#fff8eb',
|
||
100: '#ffefd1',
|
||
200: '#ffdca8',
|
||
300: '#ffc374',
|
||
400: '#ffa03c',
|
||
500: '#FF8C00', // 您的主色
|
||
600: '#f06d00',
|
||
700: '#c65300',
|
||
800: '#9d4108',
|
||
900: '#7e370b',
|
||
950: '#441b05',
|
||
},
|
||
|
||
// 您自定义的中性色（如果不想用Tailwind默认的grayscale）
|
||
neutral: {
|
||
darkest: '#333333',
|
||
darker: '#666666',
|
||
dark: '#999999',
|
||
base: '#DDDDDD',
|
||
light: '#EEEEEE',
|
||
lightest: '#F8F9FA',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
}),
|
||
],
|
||
corePlugins: {
|
||
// preflight: false,
|
||
divideStyle: true,
|
||
},
|
||
};
|