feat: tailwindcss兼容antd

package.json

@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.0",
-    "@tuia/eslint-config-common": "3.0.1-beta.2",
     "antd": "^5.24.5",
     "axios": "^1.8.4",
     "dayjs": "^1.11.13",
@@ -27,6 +26,7 @@
   },
   "devDependencies": {
     "@ant-design/v5-patch-for-react-19": "^1.0.3",
+    "@tuia/eslint-config-common": "3.0.1-beta.2",
     "@types/numeral": "^2.0.5",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",

src/App.tsx

 import { Suspense } from 'react'
 
+import { StyleProvider } from '@ant-design/cssinjs'
 import routes from '~react-pages'
+import { ConfigProvider } from 'antd'
 
 import Layouts from './layouts'
 
 const App: React.FC = () => {
   return (
     <Suspense fallback={<Spin fullscreen />}>
-      <Layouts>{useRoutes(routes)}</Layouts>
+      <StyleProvider layer>
+        <ConfigProvider>
+          <Layouts>{useRoutes(routes)}</Layouts>
+        </ConfigProvider>
+      </StyleProvider>
     </Suspense>
   )
 }

src/index.css

-@import "tailwindcss"
\ No newline at end of file
+@import "tailwindcss/utilities";
+@import "tailwindcss/theme";
+/* @import "tailwindcss/preflight"; */
\ No newline at end of file

src/layouts/BasicLayout.tsx

@@ -21,15 +21,16 @@ const BasicLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
   const navigate = useNavigate()
 
   return (
-    <Layout style={{ minHeight: '100vh' }}>
-      <Sider breakpoint='lg'>
-        <div className='demo-logo-vertical' />
-        <Menu theme='dark' mode='vertical' items={menuItems} onSelect={({ key }) => navigate(key)} />
-      </Sider>
+    <Layout className='min-h-screen text-9xl'>
+      <Header className='p-0' />
       <Layout>
-        <Header style={{ padding: 0, background: colorBgContainer }} />
-        <Content style={{ margin: '24px 16px 0' }}>
-          <div style={{ padding: 24, background: colorBgContainer }}>{children}</div>
+        <Sider breakpoint='lg'>
+          <Menu theme='dark' mode='vertical' items={menuItems} onSelect={({ key }) => navigate(key)} />
+        </Sider>
+        <Content className='mt-6 mx-4'>
+          <div className='p-6' style={{ background: colorBgContainer }}>
+            {children}
+          </div>
         </Content>
       </Layout>
     </Layout>

src/main.tsx

@@ -3,11 +3,12 @@ import { createRoot } from 'react-dom/client'
 import { HashRouter } from 'react-router-dom'
 
 import App from './App'
-import './index.css'
 
 import '@ant-design/v5-patch-for-react-19'
 import 'antd/dist/reset.css'
 
+import './index.css'
+
 const app = createRoot(document.getElementById('root')!)
 
 app.render(