| const fontFamilySans = [ | |
| 'ui-sans-serif', | |
| 'system-ui', | |
| '-apple-system', | |
| 'BlinkMacSystemFont', | |
| '"Segoe UI"', | |
| 'Roboto', | |
| '"Helvetica Neue"', | |
| 'Arial', | |
| '"Noto Sans"', | |
| 'sans-serif', | |
| '"Apple Color Emoji"', | |
| '"Segoe UI Emoji"', | |
| '"Segoe UI Symbol"', | |
| '"Noto Color Emoji"', | |
| ]; | |
| const tailwindConfig = { | |
| content: ['./src/**/*.{js,jsx,ts,tsx}'], | |
| corePlugins: { | |
| preflight: false, | |
| }, | |
| theme: { | |
| fontFamily: { | |
| inter: ['"Inter"', ...fontFamilySans], | |
| }, | |
| screens: { | |
| // devLake sm断点 | |
| 'sm': { 'max': '1024px' }, | |
| 'mobile': { 'max': '550px' }, | |
| // devStream sm断点 | |
| 'sm2': '640px', | |
| 'md': '768px', | |
| 'lg': '1024px', | |
| 'xl': '1280px', | |
| '2xl': '1536px', | |
| }, | |
| spacing: { | |
| 1: '8px', | |
| 2: '12px', | |
| 3: '16px', | |
| 4: '24px', | |
| 5: '32px', | |
| 6: '48px', | |
| 7: '64px', | |
| 8: '80px', | |
| 9: '96px', | |
| 10: '112px', | |
| 11: '128px', | |
| }, | |
| extend: { | |
| colors: { | |
| primary: '#7497F7', | |
| 'primary-light': '#99B3F9', | |
| 'primary-100': '#F0F4FE', | |
| 'primary-200': '#DBE4FD', | |
| 'primary-300': '#BDCEFB', | |
| 'primary-500': '#7497F7', | |
| 'primary-800': '#3C5088', | |
| neutral: { | |
| invert: '#FFFFFF', | |
| 300: '#94959F', | |
| 400: '#70727F', | |
| 500: '#4D4E5F', | |
| 600: '#292B3F', | |
| }, | |
| secondary: { | |
| 500: "#FF8B8B", | |
| } | |
| }, | |
| fontSize: { | |
| // devlake | |
| heading0: ['48px', { lineHeight: '64px' }], | |
| heading1: ['32px', { lineHeight: '40px' }], | |
| heading2: ['24px', { lineHeight: '30px' }], | |
| heading3: ['20px', { lineHeight: '25px' }], | |
| heading4: ['16px', { lineHeight: '20px' }], | |
| label14: ['14px', { lineHeight: '20px' }], | |
| label16: ['16px', { lineHeight: '24px' }], | |
| label18: ['18px', { lineHeight: '24px' }], | |
| label24: ['24px', { lineHeight: '32px' }], | |
| // devstream | |
| heading1stream: ['32px', { lineHeight: 1.25 }], | |
| heading2stream: ['24px', { lineHeight: 1.25 }], | |
| heading3stream: ['20px', { lineHeight: 1.25 }], | |
| heading4stream: ['16px', { lineHeight: 1.25 }], | |
| label14stream: ['14px', { lineHeight: 1.43 }], | |
| label18stream: ['18px', { lineHeight: 1.56 }], | |
| // common | |
| body: ['14px', { lineHeight: 1.214 }], | |
| "body-sm": ['12px', { lineHeight: 1.25 }], | |
| "body-large": ['24px', { lineHeight: '32px' }], | |
| }, | |
| dropShadow: { | |
| xl: ['0px 3.2px 16px rgba(153, 179, 249, 0.1)'], | |
| }, | |
| // 属性值非响应式，无需修改 | |
| boxShadow: { | |
| sm: '0px 2.4px 4.8px -0.8px rgba(0, 0, 0, 0.2), 0px 1.6px 8px rgba(0, 0, 0, 0.2)', | |
| lg: '0px 4.8px 9.6px -0.8px rgba(0, 0, 0, 0.2), 0px 3.2px 16px rgba(0, 0, 0, 0.2)', | |
| lower: '0px 1.2px 2.4px -0.8px rgba(0, 0, 0, 0.1), 0px 0.8px 4px rgba(0, 0, 0, 0.07)', | |
| high: '0px 9.6px 19.2px -0.8px rgba(0, 0, 0, 0.1), 0px 6.4px 32px rgba(0, 0, 0, 0.07)', | |
| card: '0px 20px 64px -0.8px rgba(0, 0, 0, 0.06)', | |
| hide: '0px 0px 0px 0px rgba(0, 0, 0, 0)', | |
| }, | |
| }, | |
| }, | |
| plugins: [], | |
| }; | |
| module.exports = { | |
| tailwindConfig | |
| } |