fix tailwind errors

web/src/components/inputs/AppCodeEditor/themes/github_light_theme.ts

@@ -1,8 +1,7 @@
-import tailwind from '../../../../../tailwind.config';
 import type { editor } from 'monaco-editor';
-const colors = tailwind.theme.extend.colors;
 
 const editorBackground = '#ffffff';
+const primaryColor = '#7C3AED';
 
 const theme: editor.IStandaloneThemeData = {
   base: 'vs',
@@ -57,15 +56,15 @@ const theme: editor.IStandaloneThemeData = {
       token: 'entity.name.tag'
     },
     {
-      foreground: colors.buster.primary,
+      foreground: primaryColor,
       token: 'keyword'
     },
     {
-      foreground: colors.buster.primary,
+      foreground: primaryColor,
       token: 'storage'
     },
     {
-      foreground: colors.buster.primary,
+      foreground: primaryColor,
       token: 'storage.type'
     },
     {
@@ -126,7 +125,7 @@ const theme: editor.IStandaloneThemeData = {
     },
     {
       foreground: 'fafbfc',
-      background: colors.buster.primary,
+      background: primaryColor,
       fontStyle: 'italic underline',
       token: 'carriage-return'
     },
@@ -342,7 +341,7 @@ const theme: editor.IStandaloneThemeData = {
       foreground: '24292e',
       token: 'string.yaml'
     },
-    { foreground: colors.buster.primary, token: 'type' },
+    { foreground: primaryColor, token: 'type' },
     { foreground: '24292e', token: 'keyword.yaml' }, //booleans
     { foreground: 'b31d28', token: 'number.yaml' }
   ],

web/src/components/inputs/AppCodeEditor/themes/xcode_default_theme.ts

@@ -1,5 +1,4 @@
-import tailwind from '../../../../../tailwind.config';
-const colors = tailwind.theme.extend.colors;
+const primaryColor = '#7C3AED';
 
 const theme = {
   base: 'vs',
@@ -30,7 +29,7 @@ const theme = {
       token: 'constant.numeric'
     },
     {
-      foreground: colors.buster.primary,
+      foreground: primaryColor,
       token: 'constant.language'
     },
     {
@@ -42,15 +41,15 @@ const theme = {
       token: 'constant.other'
     },
     {
-      foreground: colors.buster.primary,
+      foreground: primaryColor,
       token: 'variable.language'
     },
     {
-      foreground: colors.buster.primary,
+      foreground: primaryColor,
       token: 'variable.other'
     },
     {
-      foreground: colors.buster.primary,
+      foreground: primaryColor,
       token: 'keyword'
     },
     {

web/src/components/list/BusterList/BusterListRowComponent.tsx

@@ -5,7 +5,7 @@ import { BusterListRow, BusterListColumn, BusterListRowItem, BusterListProps } f
 import Link from 'next/link';
 import { CheckboxColumn } from './CheckboxColumn';
 import { createStyles } from 'antd-style';
-import { HEIGHT_OF_ROW, sizes } from './config';
+import { HEIGHT_OF_ROW } from './config';
 
 export const BusterListRowComponent = React.memo(
   React.forwardRef<
@@ -185,11 +185,12 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
   cell: css`
     color: ${token.colorText};
-    font-size: ${sizes.base};
+    font-size: 13px;
+    @apply text-base;
 
     &.secondary {
       color: ${token.colorTextTertiary};
-      font-size: ${sizes.sm};
+      @apply text-xs;
     }
   `
 }));

web/src/components/list/BusterList/config.ts

@@ -1,6 +1,3 @@
-import tailwind from '../../../../tailwind.config';
-
-export const sizes = tailwind.theme.fontSize;
 export const HEIGHT_OF_HEADER = 32;
 export const HEIGHT_OF_SECTION_ROW = 36;
 export const HEIGHT_OF_ROW = 48;

web/src/components/tags/AppFormTag.tsx

@@ -1,8 +1,5 @@
-import { Tag } from 'antd';
 import { createStyles } from 'antd-style';
 import React from 'react';
-import tailwind from '../../../tailwind.config';
-const sizes = tailwind.theme.fontSize;
 
 const useStyles = createStyles(({ css, token }) => {
   return {
@@ -15,7 +12,7 @@ const useStyles = createStyles(({ css, token }) => {
       height: ${token.controlHeight}px;
       padding: 0px 8px;
       color: ${token.colorTextTertiary};
-      font-size: ${sizes.sm};
+      font-size: 11px;
     `
   };
 });

web/src/components/text/Text.tsx

@@ -3,9 +3,7 @@
 import React, { useMemo } from 'react';
 import { useFontStyles } from './useFontStyles';
 import { createStyles } from 'antd-style';
-import tailwind from '../../../tailwind.config';
 import { AppTooltip } from '../tooltip';
-const sizes = tailwind.theme.fontSize;
 
 interface TextProps {
   type?: 'secondary' | 'tertiary' | 'default' | 'danger' | 'primary' | 'inherit' | 'link';
@@ -21,25 +19,25 @@ interface TextProps {
 const useTextStyles = createStyles(({ css, token }) => {
   return {
     '2xl': css`
-      font-size: ${sizes['2xl']};
+      @apply text-2xl;
     `,
     lg: css`
-      font-size: ${sizes.lg};
+      @apply text-lg;
     `,
     md: css`
-      font-size: ${sizes.md};
+      @apply text-md;
     `,
     sm: css`
-      font-size: ${sizes.sm};
+      @apply text-sm;
     `,
     base: css`
-      font-size: ${sizes.base};
+      @apply text-base;
     `,
     xs: css`
-      font-size: ${sizes.xs};
+      @apply text-xs;
     `,
     xxs: css`
-      font-size: ${sizes.xxs};
+      @apply text-xxs;
     `
   };
 });

web/src/context/BusterStyles/BusterStyles.tsx

@@ -13,27 +13,14 @@ import { ThemeProvider } from 'antd-style';
 import { ThemeProvider as NextThemeProvider, useTheme as useNextTheme } from 'next-themes';
 import StyleRegistry from './StyleRegistry';
 import { AntdRegistry } from '@ant-design/nextjs-registry';
-import { configResponsive } from 'ahooks';
 import {
   useContextSelector,
   createContext,
   ContextSelector
 } from '@fluentui/react-context-selector';
-import tailwind from '../../../tailwind.config';
-
-const screens = tailwind.theme.screens;
 
 const { defaultAlgorithm, darkAlgorithm } = theme;
 
-configResponsive({
-  xs: parseInt(screens.xs),
-  sm: parseInt(screens.sm),
-  md: parseInt(screens.md),
-  lg: parseInt(screens.lg),
-  xl: parseInt(screens.xl),
-  '2xl': parseInt(screens['2xl'])
-});
-
 export const ENABLE_DARK_MODE = false;
 
 export const BaseBusterStyleProvider: React.FC<PropsWithChildren<{}>> = React.memo(

web/src/styles/busterAntDStyleConfig.tsx

@@ -1,10 +1,7 @@
 import type { ConfigProviderProps, ThemeConfig } from 'antd';
-import tailwindConfig from '../../tailwind.config';
 import { createStyles } from 'antd-style';
 import { AppMaterialIcons } from '@/components/icons/AppMaterialIcons';
 
-const screens = tailwindConfig.theme.screens;
-
 export const busterAppStyleConfig: ThemeConfig = {
   token: {
     lineWidth: 0.5,
@@ -32,12 +29,6 @@ export const busterAppStyleConfig: ThemeConfig = {
     colorSplit: '#E0E0E0',
     colorBgSpotlight: 'rgb(255, 255, 255)',
     colorBgMask: 'rgba(0, 0, 0, 0.125)',
-    screenXS: parseInt(screens.xs),
-    screenSM: parseInt(screens.sm),
-    screenMD: parseInt(screens.md),
-    screenLG: parseInt(screens.lg),
-    screenXL: parseInt(screens.xl),
-    screenXXL: parseInt(screens.xxl),
     borderRadius: 4,
     controlHeightSM: 24,
     controlHeight: 28,

web/src/styles/tailwind.css

@@ -1,21 +1,4 @@
 @import 'tailwindcss';
-
 @config '../../tailwind.config.ts';
 
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
+