mirror of https://github.com/msgbyte/tailchat
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.7 KiB
JavaScript
115 lines
2.7 KiB
JavaScript
// tailwind.config.js
|
|
// Reference: https://www.tailwindcss.cn/docs/configuration
|
|
// 默认配置文件: https://unpkg.com/browse/tailwindcss@2.2.7/stubs/defaultConfig.stub.js
|
|
|
|
const plugin = require('tailwindcss/plugin');
|
|
const colors = require('tailwindcss/colors');
|
|
const path = require('path');
|
|
|
|
const customTheme = {
|
|
boxShadow: {
|
|
normal: 'rgba(0, 0, 0, 0.15) 0 0 8px',
|
|
elevationStroke: '0 0 0 1px rgba(4,4,5,0.15)',
|
|
elevationLow:
|
|
'0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05)',
|
|
elevationMedium: '0 4px 4px rgba(0,0,0,0.16)',
|
|
elevationHigh: '0 8px 16px rgba(0,0,0,0.24)',
|
|
},
|
|
};
|
|
|
|
const tailchat = plugin(({ addUtilities }) => {
|
|
// Reference: https://www.tailwindcss.cn/docs/plugins#adding-utilities
|
|
const newUtilities = {
|
|
'.thin-line-bottom': {
|
|
'&::after': {
|
|
content: '" "',
|
|
position: 'absolute',
|
|
display: 'block',
|
|
bottom: '1px',
|
|
left: 0,
|
|
right: 0,
|
|
height: '1px',
|
|
boxShadow: customTheme.boxShadow.elevationLow,
|
|
zIndex: 1,
|
|
pointerEvents: 'none',
|
|
},
|
|
},
|
|
};
|
|
|
|
addUtilities(newUtilities);
|
|
});
|
|
|
|
module.exports = {
|
|
purge: {
|
|
enabled: process.env.NODE_ENV !== 'development',
|
|
content: [path.resolve(__dirname, './src/**/*.{js,jsx,ts,tsx}')],
|
|
},
|
|
darkMode: 'class', // or 'media'
|
|
important: '#app',
|
|
theme: {
|
|
screens: {
|
|
lg: { min: '1024px' },
|
|
md: { max: '767px' },
|
|
sm: { max: '639px' },
|
|
mobile: { max: '639px' }, // alias
|
|
desktop: { min: '640px' }, // alias
|
|
},
|
|
extend: {
|
|
colors: {
|
|
inherit: {
|
|
DEFAULT: 'inherit',
|
|
},
|
|
navbar: {
|
|
light: colors.coolGray[300],
|
|
dark: colors.coolGray[900],
|
|
},
|
|
sidebar: {
|
|
light: colors.coolGray[200],
|
|
dark: colors.coolGray[800],
|
|
},
|
|
content: {
|
|
light: colors.coolGray[100],
|
|
dark: colors.coolGray[700],
|
|
},
|
|
typography: {
|
|
light: colors.coolGray[700],
|
|
dark: 'rgba(255, 255, 255, 0.85)',
|
|
},
|
|
},
|
|
borderRadius: {
|
|
'1/2': '50%',
|
|
},
|
|
spacing: {
|
|
18: '4.5rem',
|
|
142: '35.5rem',
|
|
160: '40rem',
|
|
},
|
|
lineHeight: {
|
|
13: '3.25rem',
|
|
},
|
|
boxShadow: {
|
|
...customTheme.boxShadow,
|
|
},
|
|
transitionProperty: {
|
|
width: 'width',
|
|
},
|
|
zIndex: {
|
|
'-1': '-1',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
extend: {
|
|
opacity: ['disabled'],
|
|
display: ['group-hover'],
|
|
borderRadius: ['hover'],
|
|
borderWidth: ['last'],
|
|
height: ['group-hover'],
|
|
},
|
|
},
|
|
plugins: [tailchat],
|
|
corePlugins: {
|
|
gap: false,
|
|
},
|
|
};
|