fix: remove dev-website-tailwind-config dependency and update tailwind configuration

package.json

@@ -22,7 +22,6 @@
     "@tailwindcss/line-clamp": "^0.4.2",
     "autoprefixer": "^10.4.8",
     "clsx": "^1.1.1",
-    "dev-website-tailwind-config": "github:merico-dev/dev-website-tailwind-config",
     "mdx-mermaid": "^1.3.2",
     "mermaid": "^9.1.3",
     "postcss": "^8.4.16",

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 
-let {tailwindConfig} = require('dev-website-tailwind-config');
+let {tailwindConfig} = require('./tailwind.preset');
 
 tailwindConfig.darkMode = ['class', '[data-theme="dark"]'];
 

tailwind.preset.js

@@ -0,0 +1,112 @@
+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
+  }