tailiwndcss一开始的时候有点麻烦，但是越写越熟练，IDE也有样式提示，自己也能扩展类名，结合上scss可以实现各种复杂能力，再加上css模块化的能力，真的就是原地起飞了。非常推荐。

举个例子

创建基础样式文件 src/styles/base.module.scss

.full-screen {
  @apply absolute top-0 right-0 bottom-0 left-0;
}
.flex-center {
  @apply flex items-center justify-center;
}

创建引用的业务样式文件 src/styles/layout.module.scss

@use "base.module";

// 非404页面
.container {
  @extend .flex-center;
}

// 404页面需要多几个全局类
.container404 {
  @extend .container;

  // 修改antd的默认样式, 不加哈希值，原样替换
  :global(.ant-pro-layout-container) {
    @apply h-screen;
  }
  :global(.ant-layout-content) {
    @apply flex-1;
  }
  :global(.ant-pro-page-container) {
    @extend .flex-center;
    @apply h-full;
  }
}

业务组件中引入业务scss文件

import styles from '@/styles/layout.module.scss';
import { ProLayout } from '@ant-design/pro-components';

const Layout = () => {
  // 自定义路由封装hook
  const { is404Page, goToRoute, reFresh } = useProjectRoute();
  
  // 其他代码...
  
  return (
     <ProLayout
       className={is404Page ? styles.container404 : styles.container}
       // 其他代码...		
     </ProLayout>
  )
}
export default Layout;