优化

client/web/tailwind.config.js

@@ -0,0 +1,252 @@
+// 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(({ e, 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',
+      },
+    },
+    '.thin-scrollbar': {
+      '&::-webkit-scrollbar': {
+        width: '8px',
+        height: '8px',
+      },
+      '&::-webkit-scrollbar-thumb': {
+        borderWidth: '2px',
+        borderRadius: '3px',
+      },
+      '&::-webkit-scrollbar-track': {
+        borderWidth: '2px',
+        borderRadius: '4px',
+      },
+    },
+  };
+
+  addUtilities(newUtilities);
+
+  addUtilities(
+    {
+      '.overflow-smart': {
+        overflow: ['auto', 'overlay'],
+      },
+      '.overflow-x-smart': {
+        'overflow-x': ['auto', 'overlay'],
+      },
+      '.overflow-y-smart': {
+        'overflow-y': ['auto', 'overlay'],
+      },
+    },
+    {
+      variants: ['hover'],
+    }
+  );
+
+  // Fork from https://github.com/ItzAfroBoy/tailwindcss-zoom/blob/master/index.js
+  const percents = [
+    {
+      key: '1/2',
+      value: '50%',
+    },
+    {
+      key: '1/3',
+      value: '33.333333%',
+    },
+    {
+      key: '2/3',
+      value: '66.666667%',
+    },
+    {
+      key: '1/4',
+      value: '25%',
+    },
+    {
+      key: '3/4',
+      value: '75%',
+    },
+    {
+      key: '1/5',
+      value: '20%',
+    },
+    {
+      key: '2/5',
+      value: '40%',
+    },
+    {
+      key: '3/5',
+      value: '60%',
+    },
+    {
+      key: '4/5',
+      value: '80%',
+    },
+    {
+      key: '1/6',
+      value: '16.666667%',
+    },
+    {
+      key: '5/6',
+      value: '83.333333%',
+    },
+    {
+      key: '1/10',
+      value: '10%',
+    },
+    {
+      key: '3/10',
+      value: '30%',
+    },
+    {
+      key: '7/10',
+      value: '70%',
+    },
+    {
+      key: '9/10',
+      value: '90%',
+    },
+    {
+      key: 'full',
+      value: '100%',
+    },
+    {
+      key: '1.1',
+      value: '110%',
+    },
+    {
+      key: '1.2',
+      value: '120%',
+    },
+    {
+      key: '1.25',
+      value: '125%',
+    },
+    {
+      key: '1.5',
+      value: '150%',
+    },
+    {
+      key: '1.75',
+      value: '175%',
+    },
+    {
+      key: '2',
+      value: '200%',
+    },
+  ];
+
+  const zoom = percents.map((item) => {
+    return {
+      [`.${e(`zoom-${item.key}`)}`]: {
+        zoom: item.value,
+      },
+    };
+  });
+
+  addUtilities(zoom, {
+    variants: ['responsive', 'hover'],
+  });
+});
+
+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: {
+      sm: { min: '640px' },
+      md: { min: '768px' },
+      lg: { min: '1024px' },
+      xl: { min: '1280px' },
+      '2xl': { min: '1536px' },
+      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'],
+      overflow: ['hover'],
+    },
+  },
+  plugins: [tailchat],
+  corePlugins: {
+    gap: false,
+  },
+};