chore: add prettier-plugin-tailwindcss

.prettierignore

@@ -0,0 +1 @@
+src/client/routeTree.gen.ts

.prettierrc.json

@@ -7,5 +7,6 @@
   "trailingComma": "es5",
   "bracketSpacing": true,
   "arrowParens": "always",
-  "jsxBracketSameLine": false
+  "jsxBracketSameLine": false,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

package.json

@@ -30,6 +30,7 @@
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "fs-extra": "^11.2.0",
+    "prettier-plugin-tailwindcss": "^0.5.12",
     "release-it": "^17.0.1",
     "tar": "^6.1.15",
     "ts-node": "^10.9.1",

pnpm-lock.yaml

@@ -42,6 +42,9 @@ importers:
       fs-extra:
         specifier: ^11.2.0
         version: 11.2.0
+      prettier-plugin-tailwindcss:
+        specifier: ^0.5.12
+        version: 0.5.12(prettier@3.2.5)
       release-it:
         specifier: ^17.0.1
         version: 17.0.1(typescript@5.2.2)
@@ -515,7 +518,7 @@ importers:
         version: 3.3.5(ts-node@10.9.1)
       ts-node:
         specifier: ^10.9.1
-        version: 10.9.1(@types/node@20.11.24)(typescript@4.7.4)
+        version: 10.9.1(@types/node@18.17.12)(typescript@4.7.4)
       typescript:
         specifier: ^4.7.4
         version: 4.7.4
@@ -6133,7 +6136,7 @@ packages:
     peerDependencies:
       react: '*'
     dependencies:
-      '@types/react': 18.2.21
+      '@types/react': 18.2.61
       prop-types: 15.8.1
       react: 17.0.2
 
@@ -9781,12 +9784,6 @@ packages:
   /@types/node@18.17.12:
     resolution: {integrity: sha512-d6xjC9fJ/nSnfDeU0AMDsaJyb1iHsqCSOdi84w4u+SlN/UgQdY5tRhpMzaFYsI4mnpvgTivEaQd0yOUhAtOnEQ==}
 
-  /@types/node@20.11.24:
-    resolution: {integrity: sha512-Kza43ewS3xoLgCEpQrsT+xRo/EJej1y0kVYGiLFE1NEODXGzTfwiC6tXTLMQskn1X4/Rjlh0MQUvx9W+L9long==}
-    dependencies:
-      undici-types: 5.26.5
-    dev: true
-
   /@types/nodemailer@6.4.11:
     resolution: {integrity: sha512-Ld2c0frwpGT4VseuoeboCXQ7UJIkK3X7Lx/4YsZEiUHtHsthWAOCYtf6PAiLhMtfwV0cWJRabLBS3+LD8x6Nrw==}
     dependencies:
@@ -9891,7 +9888,7 @@ packages:
     resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.2.21
+      '@types/react': 18.2.61
 
   /@types/react-slick@0.23.11:
     resolution: {integrity: sha512-52AbNhYN7u0ATqAUvap2MXNG3znUsJslAWgebUHrovvnJ6EG6oic+TZyC82XiwwvijRMyL2V0C2wPJbzsSwllw==}
@@ -20048,12 +20045,73 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
+  /prettier-plugin-tailwindcss@0.5.12(prettier@3.2.5):
+    resolution: {integrity: sha512-o74kiDBVE73oHW+pdkFSluHBL3cYEvru5YgEqNkBMFF7Cjv+w1vI565lTlfoJT4VLWDe0FMtZ7FkE/7a4pMXSQ==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 3.2.5
+    dev: true
+
   /prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     dev: true
 
+  /prettier@3.2.5:
+    resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /pretty-error@4.0.0:
     resolution: {integrity: sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==}
     dependencies:
@@ -24317,6 +24375,37 @@ packages:
       code-block-writer: 12.0.0
     dev: true
 
+  /ts-node@10.9.1(@types/node@18.17.12)(typescript@4.7.4):
+    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.9
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 18.17.12
+      acorn: 8.11.3
+      acorn-walk: 8.3.2
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 4.7.4
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    dev: true
+
   /ts-node@10.9.1(@types/node@18.17.12)(typescript@5.2.2):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
@@ -24379,37 +24468,6 @@ packages:
       yn: 3.1.1
     dev: false
 
-  /ts-node@10.9.1(@types/node@20.11.24)(typescript@4.7.4):
-    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
-    hasBin: true
-    peerDependencies:
-      '@swc/core': '>=1.2.50'
-      '@swc/wasm': '>=1.2.50'
-      '@types/node': '*'
-      typescript: '>=2.7'
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      '@swc/wasm':
-        optional: true
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.9
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.11.24
-      acorn: 8.11.3
-      acorn-walk: 8.3.2
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 4.7.4
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    dev: true
-
   /ts-pattern@4.3.0:
     resolution: {integrity: sha512-pefrkcd4lmIVR0LA49Imjf9DYLK8vtWhqBPA3Ya1ir8xCW0O2yjL9dsCVvI7pCodLC5q7smNpEtDR2yVulQxOg==}
     dev: true
@@ -24624,10 +24682,6 @@ packages:
     resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==}
     dev: true
 
-  /undici-types@5.26.5:
-    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
-    dev: true
-
   /unenv@1.7.4:
     resolution: {integrity: sha512-fjYsXYi30It0YCQYqLOcT6fHfMXsBr2hw9XC7ycf8rTG7Xxpe3ZssiqUnD0khrjiZEmkBXWLwm42yCSCH46fMw==}
     dependencies:

src/client/api/socketio.ts

@@ -117,7 +117,7 @@ interface UseSocketSubscribeListOptions<K, T> {
 const defaultFilter = () => true;
 export function useSocketSubscribeList<
   K extends keyof SubscribeEventMap = keyof SubscribeEventMap,
-  T = SubscribeEventData<K>
+  T = SubscribeEventData<K>,
 >(name: K, options: UseSocketSubscribeListOptions<K, T> = {}): T[] {
   const { filter = defaultFilter } = options;
   const { subscribe } = useSocket();

src/client/components/DateFilter.tsx

@@ -115,7 +115,7 @@ export const DateFilter: React.FC<DateFilterProps> = React.memo((props) => {
             {label}
             <DownOutlined
               className={clsx(
-                'transition-transform scale-y-75',
+                'scale-y-75 transition-transform',
                 showDropdown ? 'rotate-180' : 'rotate-0'
               )}
             />

src/client/components/EditableText.tsx

@@ -23,7 +23,7 @@ export const EditableText: React.FC<EditableTextProps> = React.memo((props) => {
         <Input
           className={clsx(
             props.className,
-            'border-0 p-0 outline-0 !shadow-none rounded-none'
+            'rounded-none border-0 p-0 !shadow-none outline-0'
           )}
           value={text}
           onChange={(e) => setText(e.target.value)}

src/client/components/HealthBar.tsx

@@ -27,10 +27,10 @@ export const HealthBar: React.FC<HealthBarProps> = React.memo((props) => {
           key={i}
           title={beat.title}
           className={clsx(
-            'rounded-full hover:scale-150 transition-transform',
+            'rounded-full transition-transform hover:scale-150',
             {
-              'w-[5px] h-4': size === 'small',
+              'h-4 w-[5px]': size === 'small',
-              'w-2 h-8': size === 'large',
+              'h-8 w-2': size === 'large',
             },
             {
               'bg-green-500': beat.status === 'health',

src/client/components/LanguageSelector.tsx

@@ -65,7 +65,7 @@ LanguageSelector.displayName = 'LanguageSelector';
 export const CountryFlag: React.FC<{ code: string }> = React.memo((props) => {
   return (
     <img
-      className="w-[27px] h-[18px] ml-6"
+      className="ml-6 h-[18px] w-[27px]"
       src={`/locales/${props.code}/flag.png`}
     />
   );

src/client/components/MetricCard.tsx

@@ -29,8 +29,8 @@ export const MetricCard: React.FC<MetricCardProps> = React.memo((props) => {
   );
 
   return (
-    <div className="flex flex-col justify-center min-w-[140px] min-h-[90px]">
+    <div className="flex min-h-[90px] min-w-[140px] flex-col justify-center">
-      <div className="flex items-center whitespace-nowrap font-bold text-4xl">
+      <div className="flex items-center whitespace-nowrap text-4xl font-bold">
         {format(value)}
       </div>
       <div className="flex items-center whitespace-nowrap font-bold">
@@ -44,8 +44,8 @@ export const MetricCard: React.FC<MetricCardProps> = React.memo((props) => {
       </div>
 
       {showPreviousPeriod && (
-        <div className="mt-2 lg:mt-4 opacity-60">
+        <div className="mt-2 opacity-60 lg:mt-4">
-          <div className="flex items-center whitespace-nowrap font-bold text-4xl">
+          <div className="flex items-center whitespace-nowrap text-4xl font-bold">
             {format(prev)}
           </div>
           <div className="flex items-center whitespace-nowrap font-bold">

src/client/components/NavItem.tsx

@@ -13,9 +13,9 @@ export const NavItem: React.FC<{
   return (
     <Link to={props.to}>
       <div
-        className={clsx('leading-[3.75rem] border-b-2', {
+        className={clsx('border-b-2 leading-[3.75rem]', {
-          'text-gray-950 dark:text-gray-200 border-blue-500': isCurrent,
+          'border-blue-500 text-gray-950 dark:text-gray-200': isCurrent,
-          'text-gray-900 dark:text-gray-400 border-transparent hover:text-gray-950 hover:border-blue-500':
+          'border-transparent text-gray-900 hover:border-blue-500 hover:text-gray-950 dark:text-gray-400':
             !isCurrent,
         })}
       >

src/client/components/PageHeader.tsx

@@ -8,12 +8,12 @@ export const PageHeader: React.FC<{
   action?: React.ReactNode;
 }> = React.memo((props) => {
   return (
-    <div className="h-24 flex items-center">
+    <div className="flex h-24 items-center">
-      <div className="text-2xl flex-1">
+      <div className="flex-1 text-2xl">
         {props.title}
         {props.desc && (
           <Tooltip title={props.desc}>
-            <QuestionCircleOutlined className="text-sm ml-2 cursor-help" />
+            <QuestionCircleOutlined className="ml-2 cursor-help text-sm" />
           </Tooltip>
         )}
       </div>

src/client/components/TimeEventChart.tsx

@@ -37,7 +37,7 @@ export const TimeEventChart: React.FC<{
             formatter: (text) => formatDateWithUnit(text, props.unit),
           },
         },
-      } satisfies ColumnConfig),
+      }) satisfies ColumnConfig,
     [props.data, props.unit]
   );
 

src/client/components/dashboard/AddButton.tsx

@@ -154,7 +154,7 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
             <span>{t('Add')}</span>
             <DownOutlined
               className={clsx(
-                'transition-transform scale-y-75',
+                'scale-y-75 transition-transform',
                 open && 'rotate-180'
               )}
             />

src/client/components/dashboard/Dashboard.tsx

@@ -51,7 +51,7 @@ export const Dashboard: React.FC = React.memo(() => {
     <div className="py-4">
       <div
         className={clsx(
-          'flex gap-2 justify-end bg-white dark:bg-gray-900 py-2',
+          'flex justify-end gap-2 bg-white py-2 dark:bg-gray-900',
           isEditMode && 'sticky top-0 z-10'
         )}
       >

src/client/components/modals/NotificationInfo/index.tsx

@@ -104,7 +104,7 @@ export const NotificationInfoModal: React.FC<NotificationInfoModalProps> =
           </div>
         }
       >
-        <div className="overflow-y-auto max-h-[80vh]">
+        <div className="max-h-[80vh] overflow-y-auto">
           <Form
             preserve={false}
             form={form}

src/client/components/monitor/MonitorEventList.tsx

@@ -35,15 +35,15 @@ export const MonitorEventList: React.FC<MonitorEventListProps> = React.memo(
               navigate(`/monitor/${item.monitorId}`);
             }}
           >
-            <div className="flex items-center w-full gap-2">
+            <div className="flex w-full items-center gap-2">
               <div
                 className={clsx(
-                  'min-w-[62px] py-1 px-2 rounded-full text-white inline-block text-center',
+                  'inline-block min-w-[62px] rounded-full px-2 py-1 text-center text-white',
                   item.type === 'UP'
                     ? 'bg-green-400'
                     : item.type === 'DOWN'
-                    ? 'bg-red-500'
+                      ? 'bg-red-500'
-                    : 'bg-amber-400'
+                      : 'bg-amber-400'
                 )}
               >
                 {item.type}

src/client/components/monitor/MonitorHealthBar.tsx

@@ -87,21 +87,21 @@ export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
     });
 
     return (
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <HealthBar size={size} beats={beats} />
 
         {showCurrentStatus && (
           <>
             {last(beats)?.status === 'health' ? (
-              <div className="bg-green-500 text-white px-4 py-1 rounded-full text-lg font-bold">
+              <div className="rounded-full bg-green-500 px-4 py-1 text-lg font-bold text-white">
                 {t('UP')}
               </div>
             ) : last(beats)?.status === 'error' ? (
-              <div className="bg-red-600 text-white px-4 py-1 rounded-full text-lg font-bold">
+              <div className="rounded-full bg-red-600 px-4 py-1 text-lg font-bold text-white">
                 {t('DOWN')}
               </div>
             ) : (
-              <div className="bg-gray-400 text-white px-4 py-1 rounded-full text-lg font-bold">
+              <div className="rounded-full bg-gray-400 px-4 py-1 text-lg font-bold text-white">
                 {t('NONE')}
               </div>
             )}

src/client/components/monitor/MonitorInfo.tsx

@@ -165,15 +165,15 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
   }
 
   return (
-    <div className="w-full h-full overflow-auto">
+    <div className="h-full w-full overflow-auto">
       <Spin spinning={isLoading}>
         <Space className="w-full" direction="vertical">
           <div className="flex justify-between">
             <Space direction="vertical">
-              <div className="text-2xl flex items-center gap-2">
+              <div className="flex items-center gap-2 text-2xl">
                 <span>{monitorInfo.name}</span>
                 {monitorInfo.active === false && (
-                  <div className="bg-red-500 rounded-full px-2 py-0.5 text-white text-xs">
+                  <div className="rounded-full bg-red-500 px-2 py-0.5 text-xs text-white">
                     {t('Stopped')}
                   </div>
                 )}
@@ -187,7 +187,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
               </div>
             </Space>
 
-            <div className="text-black dark:text-gray-200 text-opacity-75">
+            <div className="text-black text-opacity-75 dark:text-gray-200">
               {t('Monitored for {{dayNum}} days', {
                 dayNum: dayjs().diff(dayjs(monitorInfo.createdAt), 'days'),
               })}

src/client/components/monitor/MonitorListItem.tsx

@@ -70,7 +70,7 @@ export const MonitorListItem: React.FC<{
     <div
       className={clsx(
         className,
-        'flex rounded-lg py-3 px-4 mb-1 bg-green-500 bg-opacity-0 hover:bg-opacity-10 items-center',
+        'mb-1 flex items-center rounded-lg bg-green-500 bg-opacity-0 px-4 py-3 hover:bg-opacity-10',
         onClick && 'cursor-pointer'
       )}
       onClick={onClick}
@@ -78,7 +78,7 @@ export const MonitorListItem: React.FC<{
       <div>
         <span
           className={clsx(
-            'min-w-[62px] p-0.5 rounded-full text-white inline-block text-center',
+            'inline-block min-w-[62px] rounded-full p-0.5 text-center text-white',
             upPercent === 100 ? 'bg-green-400' : 'bg-amber-400'
           )}
         >

src/client/components/monitor/MonitorStatsBlock.tsx

@@ -9,7 +9,7 @@ export const MonitorStatsBlock: React.FC<MonitorStatsBlockProps> = React.memo(
   (props) => {
     return (
       <div>
-        <div className="font-bold mb-0.5">{props.title}</div>
+        <div className="mb-0.5 font-bold">{props.title}</div>
         <div className="text-gray-500">{props.desc}</div>
         <div>{props.text}</div>
       </div>

src/client/components/monitor/StatusPage/EditForm.tsx

@@ -75,7 +75,7 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
               return (
                 <>
                   <Form.Item label={t('Monitors')}>
-                    <div className="flex flex-col gap-2 mb-2">
+                    <div className="mb-2 flex flex-col gap-2">
                       {fields.map((field, index) => (
                         // monitor item
                         <>
@@ -95,7 +95,7 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
                               <MonitorPicker />
                             </Form.Item>
 
-                            <div className="flex item-center">
+                            <div className="item-center flex">
                               <div className="flex-1">
                                 <Form.Item
                                   name={[field.name, 'showCurrent']}
@@ -105,13 +105,13 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
                                   <Switch size="small" />
                                 </Form.Item>
 
-                                <span className="text-sm align-middle ml-1">
+                                <span className="ml-1 align-middle text-sm">
                                   {t('Show Current Response')}
                                 </span>
                               </div>
 
                               <MinusCircleOutlined
-                                className="text-lg mt-1.5"
+                                className="mt-1.5 text-lg"
                                 onClick={() => remove(field.name)}
                               />
                             </div>

src/client/components/monitor/StatusPage/Services.tsx

@@ -29,7 +29,7 @@ export const StatusPageServices: React.FC<StatusPageServicesProps> = React.memo(
     }
 
     return (
-      <div className="p-2.5 flex flex-col gap-4 rounded-md border border-gray-200 dark:border-gray-700">
+      <div className="flex flex-col gap-4 rounded-md border border-gray-200 p-2.5 dark:border-gray-700">
         {list.length > 0 ? (
           list.map((item) => (
             <MonitorListItem

src/client/components/monitor/StatusPage/index.tsx

@@ -64,9 +64,9 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
     );
 
     return (
-      <div className="w-full h-full flex">
+      <div className="flex h-full w-full">
         {editMode && (
-          <div className="w-1/3 overflow-auto py-8 px-4 border-r border-gray-300 dark:border-gray-600">
+          <div className="w-1/3 overflow-auto border-r border-gray-300 px-4 py-8 dark:border-gray-600">
             <MonitorStatusPageEditForm
               isLoading={loading}
               initialValues={info ?? {}}
@@ -77,12 +77,12 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
         )}
         <div
           className={clsx(
-            'mx-auto py-8 px-4 overflow-auto',
+            'mx-auto overflow-auto px-4 py-8',
             !editMode ? 'w-4/5' : 'w-2/3'
           )}
         >
           <div className="flex">
-            <div className="text-2xl mb-4 flex-1">{info?.title}</div>
+            <div className="mb-4 flex-1 text-2xl">{info?.title}</div>
 
             <ColorSchemeSwitcher />
           </div>
@@ -99,7 +99,7 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
             </div>
           )}
 
-          <div className="text-lg mb-2">{t('Services')}</div>
+          <div className="mb-2 text-lg">{t('Services')}</div>
 
           {info && (
             <StatusPageServices

src/client/components/telemetry/TelemetryList.tsx

@@ -216,7 +216,7 @@ const TelemetryListTable: React.FC<{
         width: 240,
         render: (_, record) => {
           return (
-            <div className="flex gap-2 justify-end">
+            <div className="flex justify-end gap-2">
               <Button
                 icon={<CodeOutlined />}
                 onClick={() => props.onShowUsage(record)}

src/client/components/telemetry/TelemetryMetricsTable.tsx

@@ -51,9 +51,9 @@ export const TelemetryMetricsTable: React.FC<MetricsTableProps> = React.memo(
           return (
             <div className="flex">
               <div className="w-12 text-right">{formatNumber(val)}</div>
-              <div className="inline-block w-12 relative border-l ml-1 px-1">
+              <div className="relative ml-1 inline-block w-12 border-l px-1">
                 <div
-                  className="bg-blue-300 absolute h-full bg-opacity-25 left-0 top-0 pointer-events-none"
+                  className="pointer-events-none absolute left-0 top-0 h-full bg-blue-300 bg-opacity-25"
                   style={{ width: `${percent}%` }}
                 />
                 <span>{percent.toFixed(0)}%</span>

src/client/components/telemetry/TelemetryOverview.tsx

@@ -85,17 +85,17 @@ export const TelemetryOverview: React.FC<{
   return (
     <Spin spinning={loading}>
       <div className="flex">
-        <div className="flex flex-1 text-2xl font-bold items-center">
+        <div className="flex flex-1 items-center text-2xl font-bold">
           <span className="mr-2">{info?.name}</span>
         </div>
 
         <div>{actions}</div>
       </div>
 
-      <div className="flex mb-10 flex-wrap justify-between">
+      <div className="mb-10 flex flex-wrap justify-between">
         <div className="flex-1">{stats && <MetricsBar stats={stats} />}</div>
 
-        <div className="flex items-center gap-2 justify-end flex-wrap w-full lg:w-1/3">
+        <div className="flex w-full flex-wrap items-center justify-end gap-2 lg:w-1/3">
           <div className="mr-2">
             <Switch
               checked={showPreviousPeriod}
@@ -137,7 +137,7 @@ const MetricsBar: React.FC<{
   const { pageviews, uniques } = props.stats || {};
 
   return (
-    <div className="flex gap-5 flex-wrap w-full">
+    <div className="flex w-full flex-wrap gap-5">
       <MetricCard
         label={t('views')}
         value={pageviews.value}

src/client/components/website/WebsiteInfo.tsx

@@ -79,8 +79,8 @@ export const WebsiteInfo: React.FC = React.memo(() => {
 
   return (
     <div>
-      <div className="h-24 flex items-center">
+      <div className="flex h-24 items-center">
-        <div className="text-2xl flex-1">{t('Website Info')}</div>
+        <div className="flex-1 text-2xl">{t('Website Info')}</div>
       </div>
 
       <div>

src/client/components/website/WebsiteList.tsx

@@ -129,7 +129,7 @@ const WebsiteListTable: React.FC<{ workspaceId: string }> = React.memo(
             const trackScript = `<script async defer src="${location.origin}/tracker.js" data-website-id="${record.id}"></script>`;
 
             return (
-              <div className="flex gap-2 justify-end">
+              <div className="flex justify-end gap-2">
                 <ModalButton
                   buttonProps={{
                     icon: <CodeOutlined />,
@@ -147,7 +147,7 @@ const WebsiteListTable: React.FC<{ workspaceId: string }> = React.memo(
                             format: 'text/plain',
                             text: trackScript,
                           }}
-                          className="h-[96px] flex p-2 rounded bg-black bg-opacity-5 border border-black border-opacity-10 overflow-auto"
+                          className="flex h-[96px] overflow-auto rounded border border-black border-opacity-10 bg-black bg-opacity-5 p-2"
                         >
                           <span>{trackScript}</span>
                         </Typography.Paragraph>

src/client/components/website/WebsiteMetricsTable.tsx

@@ -59,9 +59,9 @@ export const WebsiteMetricsTable: React.FC<MetricsTableProps> = React.memo(
           return (
             <div className="flex">
               <div className="w-12 text-right">{formatNumber(val)}</div>
-              <div className="inline-block w-12 relative border-l ml-1 px-1">
+              <div className="relative ml-1 inline-block w-12 border-l px-1">
                 <div
-                  className="bg-blue-300 absolute h-full bg-opacity-25 left-0 top-0 pointer-events-none"
+                  className="pointer-events-none absolute left-0 top-0 h-full bg-blue-300 bg-opacity-25"
                   style={{ width: `${percent}%` }}
                 />
                 <span>{percent.toFixed(0)}%</span>

src/client/components/website/WebsiteOnlineCount.tsx

@@ -17,7 +17,7 @@ export const WebsiteOnlineCount: React.FC<{
   if (typeof count === 'number' && count > 0) {
     return (
       <div className="flex items-center space-x-2">
-        <div className="w-2.5 h-2.5 rounded-full bg-green-500" />
+        <div className="h-2.5 w-2.5 rounded-full bg-green-500" />
         <span>
           {count} {t('current visitor')}
         </span>

src/client/components/website/WebsiteOverview.tsx

@@ -85,7 +85,7 @@ export const WebsiteOverview: React.FC<{
   return (
     <Spin spinning={loading}>
       <div className="flex">
-        <div className="flex flex-1 text-2xl font-bold items-center">
+        <div className="flex flex-1 items-center text-2xl font-bold">
           <span className="mr-2" title={website.domain ?? ''}>
             {website.name}
           </span>
@@ -113,10 +113,10 @@ export const WebsiteOverview: React.FC<{
         <div>{actions}</div>
       </div>
 
-      <div className="flex mb-10 flex-wrap justify-between">
+      <div className="mb-10 flex flex-wrap justify-between">
         <div className="flex-1">{stats && <MetricsBar stats={stats} />}</div>
 
-        <div className="flex items-center gap-2 justify-end flex-wrap w-full lg:w-1/3">
+        <div className="flex w-full flex-wrap items-center justify-end gap-2 lg:w-1/3">
           <div className="mr-2">
             <Switch
               checked={showPreviousPeriod}
@@ -160,7 +160,7 @@ const MetricsBar: React.FC<{
   const prevBouncesNum = Math.min(uniques.prev, bounces.prev) / uniques.prev;
 
   return (
-    <div className="flex gap-5 flex-wrap w-full">
+    <div className="flex w-full flex-wrap gap-5">
       <MetricCard
         label={t('views')}
         value={pageviews.value}

src/client/components/website/WebsiteVisitorMap/VisitorLeafletMap.tsx

@@ -40,7 +40,7 @@ export const VisitorLeafletMap: React.FC<{
 }> = React.memo((props) => {
   return (
     <MapContainer
-      className="w-full h-[60vh]"
+      className="h-[60vh] w-full"
       center={mapCenter}
       zoom={2}
       minZoom={2}

src/client/hooks/useGlobalRangeDate.tsx

@@ -30,7 +30,7 @@ export function useGlobalRangeDate(): {
 
       return {
         label: (
-          <div className="flex gap-2 items-center flex-nowrap">
+          <div className="flex flex-nowrap items-center gap-2">
             <CalendarOutlined />
             <span>
               {`${dayjs(_startDate).format('YYYY-MM-DD HH:mm')} - ${dayjs(

src/client/index.css

@@ -19,9 +19,11 @@ a {
   text-decoration: none;
 }
 
-#root, .App {
+#root,
+.App {
   height: 100%;
-  font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
 }
 
 .App.dark {

src/client/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

src/client/pages/Layout.tsx

@@ -80,9 +80,9 @@ export const Layout: React.FC = React.memo(() => {
   );
 
   return (
-    <div className="flex flex-col h-full dark:bg-gray-900 dark:text-gray-300">
+    <div className="flex h-full flex-col dark:bg-gray-900 dark:text-gray-300">
       {showHeader && (
-        <div className="flex items-center bg-gray-100 dark:bg-gray-800 px-4 sticky top-0 z-20 h-[62px]">
+        <div className="sticky top-0 z-20 flex h-[62px] items-center bg-gray-100 px-4 dark:bg-gray-800">
           {isMobile && (
             <>
               <Button
@@ -96,7 +96,7 @@ export const Layout: React.FC = React.memo(() => {
                 placement="left"
                 closeIcon={false}
               >
-                <div className="flex flex-col h-full pt-12">
+                <div className="flex h-full flex-col pt-12">
                   <div className="flex-1">
                     <MobileNavItem
                       to="/dashboard"
@@ -142,8 +142,8 @@ export const Layout: React.FC = React.memo(() => {
             </>
           )}
 
-          <div className="px-2 mr-10 font-bold flex items-center">
+          <div className="mr-10 flex items-center px-2 font-bold">
-            <img src="/icon.svg" className="w-10 h-10 mr-2" />
+            <img src="/icon.svg" className="mr-2 h-10 w-10" />
             <span className="text-xl dark:text-gray-200">Tianji</span>
           </div>
 
@@ -171,9 +171,9 @@ export const Layout: React.FC = React.memo(() => {
           )}
         </div>
       )}
-      <div className="flex-1 w-full overflow-hidden">
+      <div className="w-full flex-1 overflow-hidden">
-        <div className="h-full px-1 sm:px-4 overflow-auto">
+        <div className="h-full overflow-auto px-1 sm:px-4">
-          <div className="max-w-7xl m-auto">
+          <div className="m-auto max-w-7xl">
             <Outlet />
           </div>
         </div>

src/client/pages/Login.tsx

@@ -26,10 +26,10 @@ export const Login: React.FC = React.memo(() => {
   const { allowRegister } = useGlobalConfig();
 
   return (
-    <div className="w-full h-full flex justify-center items-center dark:bg-gray-900">
+    <div className="flex h-full w-full items-center justify-center dark:bg-gray-900">
       <div className="w-80 -translate-y-1/4">
         <div className="text-center">
-          <img className="w-24 h-24" src="/icon.svg" />
+          <img className="h-24 w-24" src="/icon.svg" />
         </div>
         <Typography.Title className="text-center" level={2}>
           Tianji

src/client/pages/Monitor/Detail.tsx

@@ -11,7 +11,7 @@ export const MonitorDetail: React.FC = React.memo(() => {
   }
 
   return (
-    <div className="px-2 h-full">
+    <div className="h-full px-2">
       <MonitorInfo monitorId={monitorId} />
     </div>
   );

src/client/pages/Monitor/Overview.tsx

@@ -14,7 +14,7 @@ export const MonitorOverview: React.FC = React.memo(() => {
 
   return (
     <div className="px-2">
-      <div className="grid gap-4 grid-cols-2">
+      <div className="grid grid-cols-2 gap-4">
         <Card hoverable={true}>
           <div>{t('Monitors')}</div>
           <div className="text-2xl font-semibold">{monitors.length}</div>

src/client/pages/Monitor/index.tsx

@@ -15,9 +15,9 @@ export const MonitorPage: React.FC = React.memo(() => {
   const navigate = useNavigate();
 
   return (
-    <div className="h-full flex flex-col">
+    <div className="flex h-full flex-col">
       <div>
-        <div className="px-4 pt-4 flex gap-4">
+        <div className="flex gap-4 px-4 pt-4">
           <Button
             type="primary"
             size="large"
@@ -34,7 +34,7 @@ export const MonitorPage: React.FC = React.memo(() => {
           </Button>
         </div>
       </div>
-      <div className="py-5 flex flex-1 overflow-hidden">
+      <div className="flex flex-1 overflow-hidden py-5">
         <div className="w-5/12 rounded bg-gray-50 dark:bg-gray-800">
           <MonitorList />
         </div>

src/client/pages/Register.tsx

@@ -25,10 +25,10 @@ export const Register: React.FC = React.memo(() => {
   });
 
   return (
-    <div className="w-full h-full flex justify-center items-center">
+    <div className="flex h-full w-full items-center justify-center">
       <div className="w-80 -translate-y-1/4">
         <div className="text-center">
-          <img className="w-24 h-24" src="/icon.svg" />
+          <img className="h-24 w-24" src="/icon.svg" />
         </div>
         <Typography.Title className="text-center" level={2}>
           {t('Register Account')}

src/client/pages/Servers.tsx

@@ -56,8 +56,8 @@ export const Servers: React.FC = React.memo(() => {
 
   return (
     <div>
-      <div className="h-24 flex items-center">
+      <div className="flex h-24 items-center">
-        <div className="text-2xl flex-1">{t('Servers')}</div>
+        <div className="flex-1 text-2xl">{t('Servers')}</div>
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-1 text-gray-500">
             <Switch
@@ -311,7 +311,7 @@ export const InstallScript: React.FC = React.memo(() => {
           format: 'text/plain',
           text: command,
         }}
-        className="h-[96px] flex p-2 rounded bg-black bg-opacity-5 border border-black border-opacity-10 overflow-auto"
+        className="flex h-[96px] overflow-auto rounded border border-black border-opacity-10 bg-black bg-opacity-5 p-2"
       >
         <span>{command}</span>
       </Typography.Paragraph>

src/client/pages/Settings/AuditLog.tsx

@@ -59,7 +59,7 @@ export const AuditLog: React.FC = React.memo(() => {
 
       <Card>
         <List>
-          <div ref={parentRef} className="h-[560px] overflow-auto w-full">
+          <div ref={parentRef} className="h-[560px] w-full overflow-auto">
             {virtualItems.length === 0 && <Empty />}
 
             <div
@@ -88,19 +88,19 @@ export const AuditLog: React.FC = React.memo(() => {
                         t('Nothing more to load')
                       )
                     ) : (
-                      <div className="flex items-center overflow-hidden h-7">
+                      <div className="flex h-7 items-center overflow-hidden">
                         {item.relatedType && (
                           <ColorTag label={item.relatedType} />
                         )}
                         <div
-                          className="opacity-60 mr-2 text-xs w-9"
+                          className="mr-2 w-9 text-xs opacity-60"
                           title={dayjs(item.createdAt).format(
                             'YYYY-MM-DD HH:mm:ss'
                           )}
                         >
                           {dayjs(item.createdAt).format('MM-DD HH:mm')}
                         </div>
-                        <div className="overflow-auto h-full flex-1">
+                        <div className="h-full flex-1 overflow-auto">
                           {item.content}
                         </div>
                       </div>

src/client/pages/Settings/Usage.tsx

@@ -26,9 +26,9 @@ export const Usage: React.FC = React.memo(() => {
       <PageHeader title={t('Usage')} />
 
       <Card>
-        <div className="text-lg mb-2">
+        <div className="mb-2 text-lg">
           {t('Statistic Date')}:
-          <span className="font-bold ml-2">
+          <span className="ml-2 font-bold">
             {startDate.format('YYYY/MM/DD')} - {endDate.format('YYYY/MM/DD')}
           </span>
         </div>

src/client/pages/Settings/index.tsx

@@ -54,7 +54,7 @@ export const SettingsPage: React.FC = React.memo(() => {
 
   return (
     <div className="flex h-full">
-      <div className="w-full md:w-1/6 pt-10">
+      <div className="w-full pt-10 md:w-1/6">
         <Menu
           className="h-full"
           onClick={onClick}
@@ -63,7 +63,7 @@ export const SettingsPage: React.FC = React.memo(() => {
           items={items}
         />
       </div>
-      <div className="w-full md:w-5/6 py-2 px-4">
+      <div className="w-full px-4 py-2 md:w-5/6">
         <Routes>
           <Route path="/" element={<WebsiteList />} />
           <Route path="/websites" element={<WebsiteList />} />

src/client/pages/Telemetry/Detail.tsx

@@ -32,7 +32,7 @@ export const TelemetryDetailPage: React.FC = React.memo(() => {
           />
         </Card.Grid>
 
-        <Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]">
+        <Card.Grid hoverable={false} className="min-h-[470px] !w-1/3">
           <TelemetryMetricsTable
             telemetryId={telemetryId}
             type="source"
@@ -42,7 +42,7 @@ export const TelemetryDetailPage: React.FC = React.memo(() => {
           />
         </Card.Grid>
 
-        <Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]">
+        <Card.Grid hoverable={false} className="min-h-[470px] !w-1/3">
           <TelemetryMetricsTable
             telemetryId={telemetryId}
             type="event"
@@ -52,7 +52,7 @@ export const TelemetryDetailPage: React.FC = React.memo(() => {
           />
         </Card.Grid>
 
-        <Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]">
+        <Card.Grid hoverable={false} className="min-h-[470px] !w-1/3">
           <TelemetryMetricsTable
             telemetryId={telemetryId}
             type="country"

src/client/pages/Website/Detail.tsx

@@ -44,7 +44,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
         <Card.Grid hoverable={false} className="!w-full">
           <WebsiteOverview website={website} showDateFilter={true} />
         </Card.Grid>
-        <Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]">
+        <Card.Grid hoverable={false} className="min-h-[470px] !w-1/2">
           <WebsiteMetricsTable
             websiteId={websiteId}
             type="url"
@@ -53,7 +53,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
             endAt={endAt}
           />
         </Card.Grid>
-        <Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]">
+        <Card.Grid hoverable={false} className="min-h-[470px] !w-1/2">
           <WebsiteMetricsTable
             websiteId={websiteId}
             type="referrer"
@@ -62,7 +62,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
             endAt={endAt}
           />
         </Card.Grid>
-        <Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]">
+        <Card.Grid hoverable={false} className="min-h-[470px] !w-1/3">
           <WebsiteMetricsTable
             websiteId={websiteId}
             type="browser"
@@ -71,7 +71,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
             endAt={endAt}
           />
         </Card.Grid>
-        <Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]">
+        <Card.Grid hoverable={false} className="min-h-[470px] !w-1/3">
           <WebsiteMetricsTable
             websiteId={websiteId}
             type="os"
@@ -80,7 +80,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
             endAt={endAt}
           />
         </Card.Grid>
-        <Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]">
+        <Card.Grid hoverable={false} className="min-h-[470px] !w-1/3">
           <WebsiteMetricsTable
             websiteId={websiteId}
             type="device"
@@ -89,7 +89,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
             endAt={endAt}
           />
         </Card.Grid>
-        <Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]">
+        <Card.Grid hoverable={false} className="min-h-[470px] !w-1/2">
           <WebsiteMetricsTable
             websiteId={websiteId}
             type="country"
@@ -99,7 +99,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
           />
           <Button
             size="small"
-            className="m-auto flex flex-row-reverse items-center mt-1"
+            className="m-auto mt-1 flex flex-row-reverse items-center"
             styles={{ icon: { marginRight: 0, marginLeft: 8 } }}
             icon={<RightOutlined className="m-0" />}
             onClick={() => navigate(`/website/${websiteId}/map`)}
@@ -107,7 +107,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
             {t('Visitor Map')}
           </Button>
         </Card.Grid>
-        <Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]">
+        <Card.Grid hoverable={false} className="min-h-[470px] !w-1/2">
           <WebsiteMetricsTable
             websiteId={websiteId}
             type="event"

src/client/pages/Website/Map.tsx

@@ -35,7 +35,7 @@ export const WebsiteVisitorMapPage: React.FC = React.memo(() => {
 
   return (
     <div className="py-6">
-      <div className="pb-2 flex items-center justify-between">
+      <div className="flex items-center justify-between pb-2">
         <Button
           size="large"
           icon={<LeftOutlined />}

src/client/store/settings.ts

@@ -10,7 +10,7 @@ export const useSettingsStore = create<SettingsState>()(
     () =>
       ({
         colorScheme: 'light' as const,
-      } as SettingsState),
+      }) as SettingsState,
     {
       name: 'settings',
     }