fix: use tailwind

Author: hujiahao-hjh

shell/app/common/components/edit-field.tsx

@@ -281,10 +281,11 @@ export const EditField = React.forwardRef((props: IProps, _compRef) => {
     <div className={`common-edit-field ${className}`}>
       {label && (
         <div
+          data-required="* "
           className={classnames(
             labelStyle === 'desc' ? 'color-text-sub' : 'color-text',
             'mb4',
-            showRequiredMark ? 'ant-form-item-required' : '',
+            showRequiredMark ? 'before:required' : '',
           )}
           style={{ paddingLeft: '10px' }}
         >

shell/app/styles/antd-extension.scss

@@ -414,15 +414,15 @@ div.ant-table {
   }
 }
 
-.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
-  display: inline-block;
-  margin-right: 4px;
-  color: #ff4d4f;
-  font-size: 14px;
-  font-family: SimSun, sans-serif;
-  line-height: 1;
-  content: '*';
-}
+// .ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
+//   display: inline-block;
+//   margin-right: 4px;
+//   color: #ff4d4f;
+//   font-size: 14px;
+//   font-family: SimSun, sans-serif;
+//   line-height: 1;
+//   content: '*';
+// }
 
 // Leave the styles unchanged from nusi to antd4.x
 .ant-table-thead > tr > th,

shell/tailwind.config.js

@@ -106,6 +106,13 @@ module.exports = {
     extend: {},
   },
   plugins: [
+    plugin(({ addVariant, e }) => {
+      addVariant('before', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${e(`before${separator}${className}`)}::before`;
+        });
+      });
+    }),
     plugin(({ addUtilities }) => {
       const newUtilities = {
         '.nowrap': {
@@ -118,8 +125,15 @@ module.exports = {
           cursor: 'not-allowed',
         },
       };
+      const contentUtilities = {
+        '.required': {
+          content: 'attr(data-required)',
+          color: '#f5222d',
+        },
+      };
 
       addUtilities(newUtilities, ['responsive', 'hover']);
+      addUtilities(contentUtilities, ['before']);
     }),
   ],
   purge: {