style(ui): eslint-plugin-tailwindcss

ui/src/pages/AuthLayout.tsx

@@ -13,7 +13,7 @@ const AuthLayout = () => {
     <div className="container">
       <Outlet />
 
-      <Version className="fixed right-8 bottom-4" />
+      <Version className="fixed bottom-4 right-8" />
     </div>
   );
 };

ui/src/pages/ConsoleLayout.tsx

@@ -52,8 +52,8 @@ const ConsoleLayout = () => {
 
   return (
     <Layout className="min-h-screen" hasSider>
-      <Layout.Sider className="max-md:hidden max-md:static fixed top-0 left-0 h-full z-[20]" width="256px" theme="light">
-        <div className="flex flex-col items-center justify-between w-full h-full overflow-hidden">
+      <Layout.Sider className="fixed left-0 top-0 z-20 h-full max-md:static max-md:hidden" width="256px" theme="light">
+        <div className="flex size-full flex-col items-center justify-between overflow-hidden">
           <div className="w-full">
             <SiderMenu />
           </div>
@@ -64,8 +64,8 @@ const ConsoleLayout = () => {
       </Layout.Sider>
 
       <Layout className="pl-[256px] max-md:pl-0">
-        <Layout.Header className="sticky top-0 left-0 right-0 p-0 z-[19] shadow-sm" style={{ background: themeToken.colorBgContainer }}>
-          <div className="flex items-center justify-between size-full px-4 overflow-hidden">
+        <Layout.Header className="sticky inset-x-0 top-0 z-[19] p-0 shadow-sm" style={{ background: themeToken.colorBgContainer }}>
+          <div className="flex size-full items-center justify-between overflow-hidden px-4">
             <div className="flex items-center gap-4">
               <Button className="md:hidden" icon={<MenuOutlinedIcon />} size="large" onClick={handleSiderOpen} />
               <Drawer
@@ -82,7 +82,7 @@ const ConsoleLayout = () => {
                 <SiderMenu onSelect={() => handleSiderClose()} />
               </Drawer>
             </div>
-            <div className="flex-grow flex items-center justify-end gap-4 size-full overflow-hidden">
+            <div className="flex size-full grow items-center justify-end gap-4 overflow-hidden">
               <Tooltip title={t("common.menu.theme")} mouseEnterDelay={2}>
                 <ThemeToggleButton size="large" />
               </Tooltip>
@@ -159,11 +159,11 @@ const SiderMenu = memo(({ onSelect }: { onSelect?: (key: string) => void }) => {
 
   return (
     <>
-      <Link to="/" className="flex items-center gap-2 w-full px-4 font-semibold overflow-hidden">
-        <img src="/logo.svg" className="w-[36px] h-[36px]" />
-        <span className="w-[74px] h-[64px] leading-[64px] dark:text-white truncate">Certimate</span>
+      <Link to="/" className="flex w-full items-center gap-2 overflow-hidden px-4 font-semibold">
+        <img src="/logo.svg" className="size-[36px]" />
+        <span className="h-[64px] w-[74px] truncate leading-[64px] dark:text-white">Certimate</span>
       </Link>
-      <div className="flex-grow w-full overflow-x-hidden overflow-y-auto">
+      <div className="w-full grow overflow-y-auto overflow-x-hidden">
         <Menu
           items={menuItems}
           mode="vertical"

ui/src/pages/certificates/CertificateList.tsx

@@ -77,7 +77,7 @@ const CertificateList = () => {
           <div style={{ padding: 0 }}>
             <Menu items={items} selectable={false} />
             <Divider style={{ margin: 0 }} />
-            <Space className="justify-end w-full" style={{ padding: themeToken.paddingSM }}>
+            <Space className="w-full justify-end" style={{ padding: themeToken.paddingSM }}>
               <Button size="small" disabled={!filters.state} onClick={handleResetClick}>
                 {t("common.button.reset")}
               </Button>

ui/src/pages/login/Login.tsx

@@ -39,8 +39,8 @@ const Login = () => {
     <>
       {NotificationContextHolder}
 
-      <Card className="mx-auto mt-32 p-10 max-w-[35em] border dark:border-stone-500 rounded-md shadow-md">
-        <div className="flex items-center justify-center mb-10">
+      <Card className="mx-auto mt-32 max-w-[35em] rounded-md border p-10 shadow-md dark:border-stone-500">
+        <div className="mb-10 flex items-center justify-center">
           <img src="/logo.svg" className="w-16" />
         </div>
 

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -250,7 +250,7 @@ const WorkflowDetail = () => {
               <div className="py-12 lg:pr-36 xl:pr-48">
                 <WorkflowElements />
               </div>
-              <div className="absolute top-0 right-0 z-[1]">
+              <div className="absolute right-0 top-0 z-[1]">
                 <Space>
                   <Button disabled={!allowRun} icon={<CaretRightOutlinedIcon />} loading={isRunning} type="primary" onClick={handleRunClick}>
                     {t("workflow.detail.orchestration.action.run")}

ui/src/pages/workflows/WorkflowList.tsx

@@ -122,7 +122,7 @@ const WorkflowList = () => {
           <div style={{ padding: 0 }}>
             <Menu items={items} selectable={false} />
             <Divider style={{ margin: 0 }} />
-            <Space className="justify-end w-full" style={{ padding: themeToken.paddingSM }}>
+            <Space className="w-full justify-end" style={{ padding: themeToken.paddingSM }}>
               <Button size="small" disabled={!filters.state} onClick={handleResetClick}>
                 {t("common.button.reset")}
               </Button>

ui/src/pages/workflows/WorkflowNew.tsx

@@ -73,9 +73,9 @@ const WorkflowNew = () => {
       </Card>
 
       <div className="p-4">
-        <div className="max-w-[960px] mx-auto px-2">
+        <div className="mx-auto max-w-[960px] px-2">
           <Typography.Text type="secondary">
-            <div className="mt-4 mb-8 text-xl">{t("workflow.new.templates.title")}</div>
+            <div className="mb-8 mt-4 text-xl">{t("workflow.new.templates.title")}</div>
           </Typography.Text>
 
           <Row className="justify-stretch" gutter={[16, 16]}>
@@ -86,9 +86,9 @@ const WorkflowNew = () => {
                 hoverable
                 onClick={() => handleTemplateSelect(TEMPLATE_KEY_STANDARD)}
               >
-                <div className="flex items-center gap-4 w-full">
+                <div className="flex w-full items-center gap-4">
                   <Card.Meta
-                    className="flex-grow"
+                    className="grow"
                     title={t("workflow.new.templates.template.standard.title")}
                     description={t("workflow.new.templates.template.standard.description")}
                   />
@@ -103,9 +103,9 @@ const WorkflowNew = () => {
                 hoverable
                 onClick={() => handleTemplateSelect(TEMPLATE_KEY_BLANK)}
               >
-                <div className="flex items-center gap-4 w-full">
+                <div className="flex w-full items-center gap-4">
                   <Card.Meta
-                    className="flex-grow"
+                    className="grow"
                     title={t("workflow.new.templates.template.blank.title")}
                     description={t("workflow.new.templates.template.blank.description")}
                   />