feat: 优化 tailwind-config.css

Author: fxss5201

src/layout/LayoutFooter.tsx

@@ -12,13 +12,13 @@ function LayoutFooter({ className }: { className?: string }) {
     <div className={cn('flex justify-between items-start', className)}>
       {config.footer?.links?.length && <div className='flex flex-wrap flex-auto mr-10'>
         {config.footer.links.map(item => (
-          <ALink key={item.key} href={item.link} className={cn('mr-4', 'text-text hover:text-primary')}>
+          <ALink key={item.key} href={item.link} className={cn('mr-4', 'text-text-color hover:text-primary')}>
             {t(item.key || item.label, { defaultValue: item.label })}
           </ALink>
         ))}
       </div>}
       {config.footer?.recordInfo && <div className='flex-shrink-0'>
-        <a href={config.footer.recordInfo.recordLink} target='_blank' rel='noreferrer' className={'text-text hover:text-primary'}>
+        <a href={config.footer.recordInfo.recordLink} target='_blank' rel='noreferrer' className='a-primary'>
           {config.footer.recordInfo.recordNumber}
         </a>
       </div>}

src/tailwind-config.css

@@ -1,4 +1,17 @@
 @theme inline {
   --color-primary: var(--ant-color-primary);
-  --color-text: var(--ant-color-text);
+  --color-text-color: var(--ant-color-text);
+}
+
+@layer components {
+  /* 此处的 .a-primary 与 'text-text-color hover:text-primary' 等价，两个 .a-primary 类名的作用相同 || The .a-primary here is equivalent to 'text-text-color hover:text-primary', and the two .a-primary class names serve the same function */
+  .a-primary {
+    @apply text-text-color hover:text-primary;
+  }
+  /* .a-primary {
+    color: var(--ant-color-text);
+    @variant hover {
+      color: var(--ant-color-primary);
+    }
+  } */
 }