Added prettier-plugin-tailwindcss and sorted the classes + some small fixes (#630)

* Added prettier-plugin-tailwindcss and sorted the classes

* Added tsc into staged check + some type improvements

frontend/.prettierrc.yaml

@@ -3,3 +3,6 @@ tabWidth: 2
 semi: true
 singleQuote: false
 bracketSpacing: true
+plugins:
+  - "prettier-plugin-tailwindcss" # should be last https://github.com/tailwindlabs/prettier-plugin-tailwindcss?tab=readme-ov-file#compatibility-with-other-prettier-plugins
+tailwindStylesheet: "./src/index.css"

frontend/package-lock.json

@@ -53,6 +53,7 @@
         "husky": "^9.1.7",
         "lint-staged": "^16.2.7",
         "prettier": "^3.7.1",
+        "prettier-plugin-tailwindcss": "^0.7.1",
         "storybook": "10.0.8",
         "tailwindcss": "^4.1.17",
         "typescript": "^5.9.3",
@@ -10281,6 +10282,85 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.1.tgz",
+      "integrity": "sha512-Bzv1LZcuiR1Sk02iJTS1QzlFNp/o5l2p3xkopwOrbPmtMeh3fK9rVW5M3neBQzHq+kGKj/4LGQMTNcTH4NGPtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-hermes": "*",
+        "@prettier/plugin-oxc": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-hermes": {
+          "optional": true
+        },
+        "@prettier/plugin-oxc": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

frontend/package.json

@@ -49,6 +49,7 @@
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
     "prettier": "^3.7.1",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "storybook": "10.0.8",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
@@ -60,7 +61,8 @@
       "npm run lint:fix",
       "npm run prettier:fix"
     ],
-    "*.{json,css,md,mdx}": "npm run prettier:fix"
+    "*.{json,css,md,mdx}": "npm run prettier:fix",
+    "src/*.{ts,tsx}": "npm run tsc:check"
   },
   "scripts": {
     "dev": "vite",

frontend/src/App.tsx

@@ -22,9 +22,9 @@ const queryClient = new QueryClient({
 
 const PageLayout = () => {
   return (
-    <div className="flex flex-col h-screen">
+    <div className="flex h-screen flex-col">
       <Header />
-      <div className="bg-body-background bg-no-repeat bg-[url('./assets/body-background.svg')] flex-1">
+      <div className="flex-1 bg-body-background bg-[url('./assets/body-background.svg')] bg-no-repeat">
         <Outlet />
       </div>
     </div>

frontend/src/components/Button.tsx

@@ -27,7 +27,7 @@ export default function Button(props: ButtonProps): JSX.Element {
     <>
       <button
         onClick={props.onClick}
-        className={`${props.className} bg-white border border-gray-300  hover:bg-gray-50 text-black  py-1 px-4 rounded-sm `}
+        className={`${props.className} rounded-sm border border-gray-300 bg-white px-4 py-1 text-black hover:bg-gray-50`}
         disabled={props.disabled}
       >
         {props.children}

frontend/src/components/ClustersList.tsx

@@ -107,7 +107,7 @@ function ClustersList({
   };
 
   return (
-    <div className="bg-white flex flex-col p-2 rounded-sm custom-shadow text-cluster-list w-48 m-5 h-fit pb-4 custom-">
+    <div className="custom- custom-shadow m-5 flex h-fit w-48 flex-col rounded-sm bg-white p-2 pb-4 text-cluster-list">
       {!clusterMode ? (
         <>
           <label className="font-bold">Clusters</label>
@@ -115,10 +115,10 @@ function ClustersList({
             return (
               <span
                 key={cluster.Name}
-                className="data-cy-clusterName flex items-center mt-2 text-xs"
+                className="data-cy-clusterName mt-2 flex items-center text-xs"
               >
                 <input
-                  className="cursor-pointer data-cy-clustersInput"
+                  className="data-cy-clustersInput cursor-pointer"
                   onChange={(e) => {
                     onClusterChange(e.target.value);
                   }}
@@ -128,7 +128,7 @@ function ClustersList({
                   checked={cluster.Name === selectedCluster}
                   name="clusters"
                 />
-                <label htmlFor={cluster.Name} className="ml-1 ">
+                <label htmlFor={cluster.Name} className="ml-1">
                   {getCleanClusterName(cluster.Name)}
                 </label>
               </span>
@@ -137,11 +137,11 @@ function ClustersList({
         </>
       ) : null}
 
-      <label className="font-bold mt-4">Namespaces</label>
+      <label className="mt-4 font-bold">Namespaces</label>
       {namespaces
         ?.sort((a, b) => a.name.localeCompare(b.name))
         ?.map((namespace) => (
-          <span key={namespace.name} className="flex items-center mt-2 text-xs">
+          <span key={namespace.name} className="mt-2 flex items-center text-xs">
             <input
               type="checkbox"
               id={namespace.name}

frontend/src/components/InstalledPackages/HealthStatus.tsx

@@ -27,7 +27,7 @@ const HealthStatus = ({ statusData }: Props) => {
                   : cond.status === "Progressing"
                     ? "bg-warning"
                     : "bg-danger"
-              } w-2.5 h-2.5 rounded-xs`}
+              } h-2.5 w-2.5 rounded-xs`}
             ></span>
           </Tooltip>
         );

frontend/src/components/InstalledPackages/InstalledPackageCard.tsx

@@ -80,7 +80,7 @@ export default function InstalledPackageCard({
       ref={ref}
       className={`${
         borderLeftColor[release.status]
-      } text-xs grid grid-cols-12 items-center bg-white rounded-md p-2 py-6 my-2 custom-shadow border-l-4 border-l-[${statusColor}] cursor-pointer ${
+      } custom-shadow my-2 grid grid-cols-12 items-center rounded-md border-l-4 bg-white p-2 py-6 text-xs border-l-[${statusColor}] cursor-pointer ${
         isMouseOver && "custom-shadow-lg"
       }`}
       onMouseOver={handleMouseOver}
@@ -90,31 +90,31 @@ export default function InstalledPackageCard({
       <img
         src={release.icon || HelmGrayIcon}
         alt="helm release icon"
-        className="w-[45px] mx-4 col-span-1 min-w-[45px]"
+        className="col-span-1 mx-4 w-[45px] min-w-[45px]"
       />
 
       <div className="col-span-11 -mb-5">
         <div className="grid grid-cols-11">
-          <div className="col-span-3 font-bold text-xl mr-0.5 font-roboto-slab">
+          <div className="col-span-3 mr-0.5 font-roboto-slab text-xl font-bold">
             {release.name}
           </div>
           <div className="col-span-3">
             <StatusLabel status={release.status} />
           </div>
           <div className="col-span-2 font-bold">{release.chart}</div>
-          <div className="col-span-1 font-bold text-xs">
+          <div className="col-span-1 text-xs font-bold">
             #{release.revision}
           </div>
-          <div className="col-span-1 font-bold text-xs">
+          <div className="col-span-1 text-xs font-bold">
             {release.namespace}
           </div>
-          <div className="col-span-1 font-bold text-xs">{getAge(release)}</div>
+          <div className="col-span-1 text-xs font-bold">{getAge(release)}</div>
         </div>
         <div
-          className="grid grid-cols-11 text-xs mt-3"
+          className="mt-3 grid grid-cols-11 text-xs"
           style={{ marginBottom: "12px" }}
         >
-          <div className="col-span-3 h-12 line-clamp-3 mr-1">
+          <div className="col-span-3 mr-1 line-clamp-3 h-12">
             {release.description}
           </div>
           <div className="col-span-3 mr-2">
@@ -124,11 +124,11 @@ export default function InstalledPackageCard({
               <Spinner size={4} />
             )}
           </div>
-          <div className="col-span-2 text-muted flex flex-col items">
+          <div className="items col-span-2 flex flex-col text-muted">
             <span>CHART VERSION</span>
             {(canUpgrade || installRepoSuggestion) && (
               <div
-                className="text-upgradable flex flex-row items-center gap-1 font-bold"
+                className="flex flex-row items-center gap-1 font-bold text-upgradable"
                 title={`upgrade available: ${latestVersionData?.version} from ${latestVersionData?.repository}`}
               >
                 {canUpgrade && !installRepoSuggestion ? (

frontend/src/components/InstalledPackages/InstalledPackagesHeader.tsx

@@ -17,22 +17,22 @@ export default function InstalledPackagesHeader({
     !isLoading && (numOfPackages === undefined || numOfPackages === 0)
   );
   return (
-    <div className="custom-shadow rounded-t-md  ">
+    <div className="custom-shadow rounded-t-md">
-      <div className="flex items-center justify-between bg-white px-2 py-0.5 font-inter rounded-t-md ">
+      <div className="flex items-center justify-between rounded-t-md bg-white px-2 py-0.5 font-inter">
         <div className="flex items-center">
           <img
             src={HeaderLogo}
             alt="Helm-DashBoard"
-            className="display-inline h-12 ml-3 mr-3 w-[28px] "
+            className="display-inline mr-3 ml-3 h-12 w-[28px]"
           />
-          <h2 className="display-inline font-bold text-base ">{`Installed Charts (${
+          <h2 className="display-inline text-base font-bold">{`Installed Charts (${
             numOfPackages || "0"
           })`}</h2>
         </div>
 
         <div className="w-1/3">
           <input
-            className="border border-installed-charts-filter  rounded-sm p-1 text-sm w-11/12"
+            className="w-11/12 rounded-sm border border-installed-charts-filter p-1 text-sm"
             placeholder="Filter..."
             type="text"
             onChange={(ev) => setFilterKey(ev.target.value)}
@@ -41,7 +41,7 @@ export default function InstalledPackagesHeader({
       </div>
 
       {showNoPackageAlert && (
-        <div className="bg-white rounded-sm shadow-sm display-none no-charts mt-3 text-sm p-4">
+        <div className="display-none no-charts mt-3 rounded-sm bg-white p-4 text-sm shadow-sm">
           Looks like you don&apos;t have any charts installed.
           &quot;Repository&quot; section may be a good place to start.
         </div>

frontend/src/components/SelectMenu.tsx

@@ -75,7 +75,7 @@ export function SelectMenuItem({
 export default function SelectMenu(props: SelectMenuProps): JSX.Element {
   const { header, children } = props;
   return (
-    <div className="card flex flex-col">
+    <div className="flex flex-col card">
       <h2 className="text-xl font-bold">{header}</h2>
       <div className="flex flex-col">{children}</div>
     </div>

frontend/src/components/ShutDownButton.tsx

@@ -6,7 +6,7 @@ import { useShutdownHelmDashboard } from "../API/other";
 function ShutDownButton() {
   const { mutate: signOut, status } = useShutdownHelmDashboard();
 
-  const handleClick = async () => {
+  const handleClick = () => {
     signOut();
   };
 
@@ -22,7 +22,7 @@ function ShutDownButton() {
       <button
         onClick={handleClick}
         title="Shut down the Helm Dashboard application"
-        className="flex justify-center w-full mr-5 py-3 border border-transparent hover:border hover:border-gray-500 rounded-sm hover:rounded-lg"
+        className="mr-5 flex w-full justify-center rounded-sm border border-transparent py-3 hover:rounded-lg hover:border hover:border-gray-500"
       >
         <BsPower className="w-6" />
       </button>

frontend/src/components/Spinner/index.tsx

@@ -3,7 +3,7 @@ export default function Spinner({ size = 8 }: { size?: number }) {
     <div role="status">
       <svg
         aria-hidden="true"
-        className={`w-${size} h-${size} mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600`}
+        className={`w-${size} h-${size} mr-2 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

frontend/src/components/Tabs.tsx

@@ -25,12 +25,10 @@ export default function Tabs({ tabs, selectedTab }: TabsProps) {
         {tabs.map((tab) => (
           <button
             key={tab.label}
-            className={`cursor-pointer px-4 py-2 text-sm font-normal text-tab-color focus:outline-hidden"
+            className={`focus:outline-hidden" cursor-pointer px-4 py-2 text-sm font-normal text-tab-color ${
-              ${
               selectedTab.value === tab.value &&
               "border-b-[3px] border-tab-color"
-              }
+            } `}
-            `}
             onClick={() => moveTab(tab)}
           >
             {tab.label}

frontend/src/components/TabsBar.stories.tsx

@@ -17,15 +17,15 @@ export const Default = {
     tabs: [
       {
         name: "tab1",
-        component: <div className="w-250 h-250 bg-green-400">tab1</div>,
+        component: <div className="h-250 w-250 bg-green-400">tab1</div>,
       },
       {
         name: "tab2",
-        component: <div className="w-250 h-250 bg-red-400">tab2</div>,
+        component: <div className="h-250 w-250 bg-red-400">tab2</div>,
       },
       {
         name: "tab3",
-        component: <div className="w-250 h-250 bg-blue-400">tab3</div>,
+        component: <div className="h-250 w-250 bg-blue-400">tab3</div>,
       },
     ],
     activeTab: "tab1",

frontend/src/components/TextInput.tsx

@@ -24,7 +24,7 @@ export interface TextInputProps {
 export default function TextInput(props: TextInputProps): JSX.Element {
   return (
     <div className="mb-6">
-      <label className="block ml-1 mb-1 text-sm font-medium text-gray-900dark:text-white">
+      <label className="text-gray-900dark:text-white mb-1 ml-1 block text-sm font-medium">
         {props.label}
         {/* if prop.isMandatory is true, add a whitespace and a red star to signify it*/}
         {props.isMandatory ? <span className="text-red-500"> *</span> : ""}
@@ -32,7 +32,7 @@ export default function TextInput(props: TextInputProps): JSX.Element {
       <input
         type="text"
         placeholder={props.placeholder}
-        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
+        className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
       />
     </div>
   );

frontend/src/components/Tooltip.tsx

@@ -20,7 +20,7 @@ export default function Tooltip({
       <div
         id={id}
         role="tooltip"
-        className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip dark:bg-gray-700"
+        className="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-xs transition-opacity duration-300 dark:bg-gray-700"
       >
         {title}
         <div className="tooltip-arrow" data-popper-arrow></div>
@@ -29,14 +29,14 @@ export default function Tooltip({
       <button
         data-tooltip-target="tooltip-default"
         type="button"
-        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-hidden focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        className="rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 focus:outline-hidden dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
       >
         Default tooltip
       </button>
       <div
         id="tooltip-default"
         role="tooltip"
-        className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip dark:bg-gray-700"
+        className="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-xs transition-opacity duration-300 dark:bg-gray-700"
       >
         Tooltip content
         <div className="tooltip-arrow" data-popper-arrow></div>

frontend/src/components/Troubleshoot.tsx

@@ -8,7 +8,7 @@ export const Troubleshoot = () => {
         target="_blank"
         rel="noreferrer"
       >
-        <button className="bg-primary text-white p-2 flex items-center rounded-sm text-sm font-medium font-roboto">
+        <button className="flex items-center rounded-sm bg-primary p-2 font-roboto text-sm font-medium text-white">
           Troubleshoot in Komodor
           <RiExternalLinkLine className="ml-2 text-lg" />
         </button>

frontend/src/components/common/DropDown.tsx

@@ -62,21 +62,21 @@ function DropDown({ items }: DropDownProps) {
               Y: e.pageY,
             }));
           }}
-          className="flex items-center justify-between cursor-pointer"
+          className="flex cursor-pointer items-center justify-between"
         >
           Help
-          <img src={ArrowDownIcon} className="ml-2 w-[10px] h-[10px]" />
+          <img src={ArrowDownIcon} className="ml-2 h-[10px] w-[10px]" />
         </button>
       </div>
       {popupState.isOpen && (
         <div
           ref={modalRef}
-          className={`z-10 flex flex-col py-1 gap-1 bg-white mt-3 absolute rounded-sm border top-[${popupState.Y}] left-[${popupState.X}] border-gray-200`}
+          className={`absolute z-10 mt-3 flex flex-col gap-1 rounded-sm border bg-white py-1 top-[${popupState.Y}] left-[${popupState.X}] border-gray-200`}
         >
           {items.map((item) => (
             <Fragment key={item.id}>
               {item.isSeparator ? (
-                <div className="bg-gray-300 h-[1px]" />
+                <div className="h-[1px] bg-gray-300" />
               ) : (
                 <div
                   onClick={() => {
@@ -86,9 +86,9 @@ function DropDown({ items }: DropDownProps) {
                       isOpen: false,
                     }));
                   }}
-                  className={`cursor-pointer font-normal flex items-center gap-2 py-1 pl-3 pr-7 hover:bg-dropdown ${
+                  className={`flex cursor-pointer items-center gap-2 py-1 pr-7 pl-3 font-normal hover:bg-dropdown ${
                     item.isDisabled
-                      ? "cursor-default hover:bg-transparent text-gray-400"
+                      ? "cursor-default text-gray-400 hover:bg-transparent"
                       : ""
                   }`}
                 >

frontend/src/components/common/StatusLabel.tsx

@@ -31,7 +31,7 @@ function StatusLabel({ status, isRollback }: StatusLabelProps) {
         justifyContent: "space-between",
       }}
     >
-      <span className={`${statusColor} font-bold text-xs`}>
+      <span className={`${statusColor} text-xs font-bold`}>
         ● {status.toUpperCase()}
       </span>
       {isRollback && <AiOutlineReload size={14} />}

frontend/src/components/modal/AddRepositoryModal.tsx

@@ -80,10 +80,10 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
       isOpen={isOpen}
       onClose={onClose}
       bottomContent={
-        <div className="flex justify-end p-6 gap-2 border-t border-gray-200 rounded-b dark:border-gray-600">
+        <div className="flex justify-end gap-2 rounded-b border-t border-gray-200 p-6 dark:border-gray-600">
           <button
             data-cy="add-chart-repository-button"
-            className="flex items-center text-white font-medium px-3 py-1.5 bg-primary hover:bg-add-repo focus:ring-4 focus:outline-hidden focus:ring-blue-300 disabled:bg-blue-300 rounded-lg text-base text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 cursor-pointer"
+            className="flex cursor-pointer items-center rounded-lg bg-primary px-3 py-1.5 text-center text-base font-medium text-white hover:bg-add-repo focus:ring-4 focus:ring-blue-300 focus:outline-hidden disabled:bg-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
             onClick={addRepository}
             disabled={isLoading}
           >
@@ -95,7 +95,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
     >
       <div className="flex gap-x-3">
         <label className="flex-1" htmlFor="name">
-          <div className="mb-2 text-sm require">Name</div>
+          <div className="require mb-2 text-sm">Name</div>
           <input
             value={formData.name}
             onChange={(e) =>
@@ -109,11 +109,11 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
             data-cy="add-chart-name"
             type="text"
             placeholder="Komodorio"
-            className="rounded-lg p-2 w-full border border-gray-300 focus:outline-hidden focus:border-sky-500 input-box-shadow"
+            className="input-box-shadow w-full rounded-lg border border-gray-300 p-2 focus:border-sky-500 focus:outline-hidden"
           />
         </label>
         <label className="flex-1" htmlFor="url">
-          <div className="mb-2 text-sm require">URL</div>
+          <div className="require mb-2 text-sm">URL</div>
           <input
             value={formData.url}
             onChange={(e) =>
@@ -127,12 +127,12 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
             data-cy="add-chart-url"
             type="text"
             placeholder="https://helm-charts.komodor.io"
-            className="rounded-lg p-2 w-full border border-gray-300  focus:outline-hidden focus:border-sky-500 input-box-shadow"
+            className="input-box-shadow w-full rounded-lg border border-gray-300 p-2 focus:border-sky-500 focus:outline-hidden"
           />
         </label>
       </div>
       <div className="flex gap-x-3">
-        <label className="flex-1 " htmlFor="username">
+        <label className="flex-1" htmlFor="username">
           <div className="mb-2 text-sm">Username</div>
           <input
             onChange={(e) =>
@@ -144,7 +144,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
             required
             id="username"
             type="text"
-            className="rounded-lg p-2 w-full border border-gray-300  focus:outline-hidden focus:border-sky-500 input-box-shadow"
+            className="input-box-shadow w-full rounded-lg border border-gray-300 p-2 focus:border-sky-500 focus:outline-hidden"
           />
         </label>
         <label className="flex-1" htmlFor="password">
@@ -159,7 +159,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
             required
             id="password"
             type="text"
-            className="rounded-lg p-2 w-full border border-gray-300 focus:outline-hidden focus:border-sky-500 input-box-shadow"
+            className="input-box-shadow w-full rounded-lg border border-gray-300 p-2 focus:border-sky-500 focus:outline-hidden"
           />
         </label>
       </div>

frontend/src/components/modal/ErrorModal.tsx

@@ -14,7 +14,7 @@ export default function ErrorModal({
   contentText,
 }: ErrorModalProps) {
   const ErrorTitle = (
-    <div className="font-medium text-2xl text-error-color">
+    <div className="text-2xl font-medium text-error-color">
       <div className="flex gap-3">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -33,8 +33,8 @@ export default function ErrorModal({
   );
 
   const bottomContent = (
-    <div className="flex py-6 px-4 gap-2 border-t border-gray-200 rounded-b dark:border-gray-600">
+    <div className="flex gap-2 rounded-b border-t border-gray-200 px-4 py-6 dark:border-gray-600">
-      <span className="text-sm text-muted fs-80 text-gray-500">
+      <span className="fs-80 text-sm text-gray-500 text-muted">
         Hint: Komodor has the same HELM capabilities, with enterprise features
         and support.{" "}
         <a
@@ -56,7 +56,7 @@ export default function ErrorModal({
       onClose={onClose}
       bottomContent={bottomContent}
     >
-      <p className="text-error-color border-green-400">{contentText}</p>
+      <p className="border-green-400 text-error-color">{contentText}</p>
     </Modal>
   );
 }

frontend/src/components/modal/GlobalErrorModal.tsx

@@ -14,7 +14,7 @@ export default function GlobalErrorModal({
   contentText,
 }: ErrorModalProps) {
   const ErrorTitle = (
-    <div className="font-medium text-2xl text-error-color">
+    <div className="text-2xl font-medium text-error-color">
       <div className="flex gap-3">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -55,7 +55,7 @@ export default function GlobalErrorModal({
     >
       <p
         style={{ minWidth: "500px" }}
-        className="text-error-color border-green-400 text-sm"
+        className="border-green-400 text-sm text-error-color"
       >
         {contentText}
       </p>

frontend/src/components/modal/InstallChartModal/ChartValues.tsx

@@ -11,13 +11,13 @@ export const ChartValues = ({
   return (
     <div className="w-1/2">
       <label
-        className="block tracking-wide text-gray-700 text-xl font-medium mb-2"
+        className="mb-2 block text-xl font-medium tracking-wide text-gray-700"
         htmlFor="grid-user-defined-values"
       >
         Chart Value Reference:
       </label>
       <pre
-        className="text-base bg-chart-values p-2 rounded-sm font-medium w-full max-h-[330px] block overflow-y-auto font-sf-mono"
+        className="block max-h-[330px] w-full overflow-y-auto rounded-sm bg-chart-values p-2 font-sf-mono text-base font-medium"
         dangerouslySetInnerHTML={
           chartValues && !loading
             ? {

frontend/src/components/modal/InstallChartModal/DefinedValues.tsx

@@ -15,7 +15,7 @@ export const DefinedValues = ({
   loading,
 }: DefinedValuesProps) => {
   return (
-    <div className="flex w-full gap-6 mt-4">
+    <div className="mt-4 flex w-full gap-6">
       <UserDefinedValues
         initialValue={initialValue}
         onValuesChange={onUserValuesChange}

frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx

@@ -169,7 +169,7 @@ export const InstallReleaseChartModal = ({
       window.location.reload();
     },
     onError: (error) => {
-      setInstallError((error as Error)?.message || "Failed to update");
+      setInstallError(error?.message || "Failed to update");
     },
   });
 

frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx

@@ -149,7 +149,7 @@ export const InstallRepoChartModal = ({
       navigate(`/${response.namespace}/${response.name}/installed/revision/1`);
     },
     onError: (error) => {
-      setInstallError((error as Error)?.message || "Failed to update");
+      setInstallError(error?.message || "Failed to update");
     },
   });
 

frontend/src/components/modal/InstallChartModal/InstallUpgradeTitle.tsx

@@ -17,7 +17,7 @@ export const InstallUpgradeTitle: FC<InstallUpgradeProps> = ({
     <div className="font-bold">
       {`${text}`}
       {(isUpgrade || releaseValues) && (
-        <span className="text-green-700 ml-1">{chartName}</span>
+        <span className="ml-1 text-green-700">{chartName}</span>
       )}
     </div>
   );

frontend/src/components/modal/InstallChartModal/ManifestDiff.tsx

@@ -35,7 +35,7 @@ export const ManifestDiff = ({ diff, isLoading, error }: ManifestDiffProps) => {
 
   if (isLoading && !error) {
     return (
-      <div className="flex text-lg items-end">
+      <div className="flex items-end text-lg">
         <Spinner />
         Calculating diff...
       </div>
@@ -47,7 +47,7 @@ export const ManifestDiff = ({ diff, isLoading, error }: ManifestDiffProps) => {
       <h4 className="text-xl">Manifest changes:</h4>
 
       {error ? (
-        <p className="text-red-600 text-lg">
+        <p className="text-lg text-red-600">
           Failed to get upgrade info: {error.toString()}
         </p>
       ) : diff ? (

frontend/src/components/modal/InstallChartModal/UserDefinedValues.tsx

@@ -20,9 +20,9 @@ export const UserDefinedValues = ({
   }, [debouncedValue, onValuesChange, initialValue]);
 
   return (
-    <div className="w-1/2 ">
+    <div className="w-1/2">
       <label
-        className="block tracking-wide text-gray-700 text-xl font-medium mb-2"
+        className="mb-2 block text-xl font-medium tracking-wide text-gray-700"
         htmlFor="grid-user-defined-values"
       >
         User-Defined Values:
@@ -32,7 +32,7 @@ export const UserDefinedValues = ({
         defaultValue={initialValue}
         onChange={(e) => setUserDefinedValues(e.target.value)}
         rows={14}
-        className="block p-2.5 w-full text-md text-gray-900 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 resize-none font-monospace"
+        className="text-md font-monospace block w-full resize-none rounded-lg border border-gray-300 p-2.5 text-gray-900 focus:border-blue-500 focus:ring-blue-500"
       ></textarea>
     </div>
   );

frontend/src/components/modal/InstallChartModal/VersionToInstall.tsx

@@ -42,7 +42,7 @@ export const VersionToInstall: FC<{
 
   const currentVersion =
     chartVersion && showCurrentVersion ? (
-      <p className="text-xl text-muted ml-2">
+      <p className="ml-2 text-xl text-muted">
         {"(current version is "}
         <span className="text-green-700">{`${chartVersion}`}</span>
         {")"}
@@ -71,12 +71,12 @@ export const VersionToInstall: FC<{
     [options, initialVersion]
   );
   return (
-    <div className="flex gap-2 text-xl items-center">
+    <div className="flex items-center gap-2 text-xl">
       {versions?.length && (selectedOption || initOpt) ? (
         <>
           Version to install:{" "}
           <Select
-            className="basic-single cursor-pointer min-w-[272px]"
+            className="basic-single min-w-[272px] cursor-pointer"
             classNamePrefix="select"
             isClearable={false}
             isSearchable={false}
@@ -96,9 +96,9 @@ export const VersionToInstall: FC<{
 
                 return (
                   <OriginalSingleValue {...props}>
-                    <span className="text-green-700 font-bold">{children}</span>
+                    <span className="font-bold text-green-700">{children}</span>
                     {props.data.check && showCurrentVersion && (
-                      <BsCheck2 className="inline-block ml-2 text-green-700 font-bold" />
+                      <BsCheck2 className="ml-2 inline-block font-bold text-green-700" />
                     )}
                   </OriginalSingleValue>
                 );
@@ -106,7 +106,7 @@ export const VersionToInstall: FC<{
               Option: ({ children, innerProps, data }) => (
                 <div
                   className={
-                    "flex items-center py-2 pl-4 pr-2 text-green-700 hover:bg-blue-100"
+                    "flex items-center py-2 pr-2 pl-4 text-green-700 hover:bg-blue-100"
                   }
                   {...innerProps}
                 >
@@ -114,7 +114,7 @@ export const VersionToInstall: FC<{
                   {data.check && showCurrentVersion && (
                     <BsCheck2
                       fontWeight={"bold"}
-                      className="inline-block ml-2 text-green-700 font-bold"
+                      className="ml-2 inline-block font-bold text-green-700"
                     />
                   )}
                 </div>

frontend/src/components/modal/Modal.tsx

@@ -71,21 +71,21 @@ const Modal = ({
 
   const getTitle = (title: string | ReactNode) => {
     if (typeof title === "string")
-      return <h3 className="text-xl font-medium text-grey">{title}</h3>;
+      return <h3 className="text-grey text-xl font-medium">{title}</h3>;
     else return title;
   };
 
   return createPortal(
     <>
       {isOpen && (
-        <div className="fixed inset-0 bg-black/75 transition-opacity ">
+        <div className="fixed inset-0 bg-black/75 transition-opacity">
           <div className="flex justify-center">
             <div
               style={{
                 maxHeight: "95vh",
                 overflow: "hidden",
               }}
-              className={`relative rounded-lg shadow-sm  m-7 w-2/5 max-w-[1300px] ${
+              className={`relative m-7 w-2/5 max-w-[1300px] rounded-lg shadow-sm ${
                 !containerClassNames ||
                 (containerClassNames && !containerClassNames.includes("bg-"))
                   ? "bg-white"
@@ -93,17 +93,17 @@ const Modal = ({
               } ${containerClassNames ?? ""}`}
             >
               {title && (
-                <div className="flex items-start justify-between p-4 border-b rounded-t ">
+                <div className="flex items-start justify-between rounded-t border-b p-4">
                   {getTitle(title)}
                   {onClose ? (
                     <button
                       type="button"
-                      className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer"
+                      className="ml-auto inline-flex cursor-pointer items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
                       data-modal-hide="staticModal"
                       onClick={() => onClose()}
                     >
                       <svg
-                        className="w-5 h-5"
+                        className="h-5 w-5"
                         fill="currentColor"
                         viewBox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg"
@@ -118,20 +118,20 @@ const Modal = ({
                   ) : null}
                 </div>
               )}
-              <div className="p-4 gap-6 overflow-y-auto max-h-[calc(100vh_-_200px)]">
+              <div className="max-h-[calc(100vh_-_200px)] gap-6 overflow-y-auto p-4">
                 {children}
               </div>
               {bottomContent ? (
                 <div className="p-5 text-sm">{bottomContent}</div>
               ) : (
-                <div className="flex justify-end p-6 gap-2 border-t border-gray-200 rounded-b ">
+                <div className="flex justify-end gap-2 rounded-b border-t border-gray-200 p-6">
                   {actions?.map((action) => (
                     <button
                       key={action.id}
                       type="button"
                       className={
                         action.isLoading
-                          ? `flex items-center font-bold justify-around gap-1 ${getClassName(
+                          ? `flex items-center justify-around gap-1 font-bold ${getClassName(
                               action
                             )}`
                           : `${getClassName(action)} `

frontend/src/components/repository/ChartViewer.tsx

@@ -21,11 +21,11 @@ function ChartViewer({ chart }: ChartViewerProps) {
     <>
       <div
         data-cy="chart-viewer-install-button"
-        className="grid grid-cols-10 gap-3 hover:bg-body-background p-4 text-sm"
+        className="grid grid-cols-10 gap-3 p-4 text-sm hover:bg-body-background"
         onMouseOver={handleMouseOver}
         onMouseOut={handleMouseOut}
       >
-        <span className="col-span-2 font-semibold flex flex-row items-center gap-1 text-base">
+        <span className="col-span-2 flex flex-row items-center gap-1 text-base font-semibold">
           <img src={chart.icon} className="h-4" />
           {chart.name}
         </span>
@@ -33,7 +33,7 @@ function ChartViewer({ chart }: ChartViewerProps) {
         <span className="col-span-1 text-center">{chart.version}</span>
         <span className="col-span-1 text-center">
           <button
-            className={`bg-white border border-gray-300 px-2 p-1 rounded-md font-semibold ${
+            className={`rounded-md border border-gray-300 bg-white p-1 px-2 font-semibold ${
               showInstallButton ? "visible" : "invisible"
             }`}
             onClick={() => setShowInstallModal(true)}

frontend/src/components/repository/RepositoriesList.tsx

@@ -30,7 +30,7 @@ function RepositoriesList({
 
   return (
     <>
-      <div className="h-fit bg-white w-72 flex flex-col p-3 rounded-sm custom-shadow text-dark gap-3">
+      <div className="custom-shadow flex h-fit w-72 flex-col gap-3 rounded-sm bg-white p-3 text-dark">
         <label className="font-bold">Repositories</label>
         <div className="flex flex-col gap-1">
           {repositories?.map((repository) => (
@@ -60,7 +60,7 @@ function RepositoriesList({
           data-cy="install-repository-button"
           type="button"
           style={{ marginTop: "10px" }}
-          className="h-8 w-fit flex items-center gap-2 border rounded-sm text-muted border-gray-300 px-3 py-1 text-sm font-semibold cursor-pointer"
+          className="flex h-8 w-fit cursor-pointer items-center gap-2 rounded-sm border border-gray-300 px-3 py-1 text-sm font-semibold text-muted"
           onClick={() => setShowAddRepositoryModal(true)}
         >
           + Add Repository
@@ -68,7 +68,7 @@ function RepositoriesList({
         <p className="text-xs">
           Charts developers: you can also add local directories as chart source.
           Use{" "}
-          <span className="text-green-600 font-monospace">--local-chart</span>{" "}
+          <span className="font-monospace text-green-600">--local-chart</span>{" "}
           CLI switch to specify it.
         </p>
       </div>

frontend/src/components/repository/RepositoryViewer.tsx

@@ -75,7 +75,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
 
   if (repository === undefined) {
     return (
-      <div className="bg-white rounded-sm shadow-sm display-none no-charts mt-3 text-sm p-4">
+      <div className="display-none no-charts mt-3 rounded-sm bg-white p-4 text-sm shadow-sm">
         Looks like you don&apos;t have any repositories installed. You can add
         one with the &quot;Add Repository&quot; button on the left side bar.
       </div>
@@ -83,10 +83,10 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
   }
 
   return (
-    <div className="flex flex-col p-6 gap-3 bg-white custom-shadow border rounded-md">
+    <div className="custom-shadow flex flex-col gap-3 rounded-md border bg-white p-6">
-      <span className="text-muted font-bold text-xs">REPOSITORY</span>
+      <span className="text-xs font-bold text-muted">REPOSITORY</span>
       <div className="flex justify-between">
-        <span className="text-dark text-3xl font-semibold">
+        <span className="text-3xl font-semibold text-dark">
           {repository?.name}
         </span>
 
@@ -97,7 +97,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
                 update.mutate();
               }}
             >
-              <span className="h-8 flex items-center gap-2 bg-white border border-gray-300 px-5 py-1 text-sm font-semibold rounded-sm">
+              <span className="flex h-8 items-center gap-2 rounded-sm border border-gray-300 bg-white px-5 py-1 text-sm font-semibold">
                 {update.isPending ? <Spinner size={4} /> : <BsArrowRepeat />}
                 Update
               </span>
@@ -107,7 +107,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
                 removeRepository();
               }}
             >
-              <span className="h-8 flex items-center gap-2 bg-white border border-gray-300 px-5 py-1 text-sm font-semibold rounded-sm">
+              <span className="flex h-8 items-center gap-2 rounded-sm border border-gray-300 bg-white px-5 py-1 text-sm font-semibold">
                 {isRemoveLoading ? <Spinner size={4} /> : <BsTrash3 />}
                 Remove
               </span>
@@ -118,15 +118,15 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
             value={searchValue}
             type="text"
             placeholder="Filter..."
-            className="mt-2  h-8 p-2 text-sm w-full border border-gray-300 focus:outline-hidden focus:border-sky-500 input-box-shadow rounded-sm"
+            className="input-box-shadow mt-2 h-8 w-full rounded-sm border border-gray-300 p-2 text-sm focus:border-sky-500 focus:outline-hidden"
           />
         </div>
       </div>
-      <span className="text-dark text-sm bg-repository px-3 py-1 rounded-md self-start -mt-10">
+      <span className="-mt-10 self-start rounded-md bg-repository px-3 py-1 text-sm text-dark">
         URL: <span className="font-bold">{repository?.url}</span>
       </span>
 
-      <div className="bg-secondary grid grid-cols-10 text-xs font-bold p-2 px-4 mt-4 rounded-md">
+      <div className="mt-4 grid grid-cols-10 rounded-md bg-secondary p-2 px-4 text-xs font-bold">
         <span className="col-span-2">CHART NAME</span>
         <span className="col-span-6">DESCRIPTION</span>
         <span className="col-span-1 text-center">VERSION</span>
@@ -141,7 +141,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
       )}
 
       {showNoChartsAlert && (
-        <div className="bg-white rounded-sm shadow-sm display-none no-charts mt-3 text-sm p-4">
+        <div className="display-none no-charts mt-3 rounded-sm bg-white p-4 text-sm shadow-sm">
           Looks like you don&apos;t have any repositories installed. You can add
           one with the &quot;Add Repository&quot; button on the left side bar.
         </div>

frontend/src/components/revision/RevisionDetails.tsx

@@ -162,13 +162,13 @@ export default function RevisionDetails({
     const navigate = useNavigate();
     return (
       <header className="flex flex-wrap justify-between">
-        <h1 className=" text-3xl font-semibold float-left mb-1 font-roboto-slab">
+        <h1 className="float-left mb-1 font-roboto-slab text-3xl font-semibold">
           {chart}
         </h1>
-        <div className="flex flex-row flex-wrap gap-3 float-right h-fit">
+        <div className="float-right flex h-fit flex-row flex-wrap gap-3">
           <div className="flex flex-col">
             <Button
-              className="flex justify-center items-center gap-2 min-w-[150px] text-sm font-semibold disabled:bg-gray-200"
+              className="flex min-w-[150px] items-center justify-center gap-2 text-sm font-semibold disabled:bg-gray-200"
               onClick={() => setIsReconfigureModalOpen(true)}
               disabled={isLoadingLatestVersion || isRefetchingLatestVersion}
             >
@@ -210,14 +210,14 @@ export default function RevisionDetails({
                     `/repository?add_repo=true&repo_url=${latestVerData[0].urls[0]}&repo_name=${latestVerData[0].repository}`
                   );
                 }}
-                className="underline text-sm cursor-pointer text-blue-600"
+                className="cursor-pointer text-sm text-blue-600 underline"
               >
                 Add repository for it: {latestVerData[0].repository}
               </span>
             ) : (
               <span
                 onClick={() => refetchLatestVersion()}
-                className="underline cursor-pointer text-xs"
+                className="cursor-pointer text-xs underline"
               >
                 Check for new version
               </span>
@@ -230,7 +230,7 @@ export default function RevisionDetails({
               {" "}
               <Button
                 onClick={handleRunTests}
-                className="flex items-center gap-2 h-1/2 text-sm font-semibold"
+                className="flex h-1/2 items-center gap-2 text-sm font-semibold"
               >
                 <BsCheckCircle />
                 Run tests
@@ -242,7 +242,7 @@ export default function RevisionDetails({
                 onClose={() => setShowTestResults(false)}
               >
                 {isRunningTests ? (
-                  <div className="flex mr-2 items-center">
+                  <div className="mr-2 flex items-center">
                     <Spinner /> Waiting for completion..
                   </div>
                 ) : (
@@ -263,10 +263,10 @@ export default function RevisionDetails({
     : isNewerVersion(installedRevision.chart_ver, latestVerData?.[0]?.version);
 
   return (
-    <div className="flex flex-col px-16 pt-5 gap-3">
+    <div className="flex flex-col gap-3 px-16 pt-5">
       <StatusLabel status={release.status} />
       <Header />
-      <div className="flex flex-row gap-6 text-sm -mt-4">
+      <div className="-mt-4 flex flex-row gap-6 text-sm">
         <span>
           Revision <span className="font-semibold">#{release.revision}</span>
         </span>
@@ -306,7 +306,7 @@ export default function RevisionDetails({
 
 function RevisionTag({ caption, text }: RevisionTagProps) {
   return (
-    <span className="bg-revision p-1 rounded-sm px-2 text-sm">
+    <span className="rounded-sm bg-revision p-1 px-2 text-sm">
       <span>{caption}:</span>
       <span className="font-bold"> {text}</span>
     </span>
@@ -352,7 +352,7 @@ const Rollback = ({
       : revisionInt;
 
   const rollbackTitle = (
-    <div className="font-semibold text-lg">
+    <div className="text-lg font-semibold">
       Rollback <span className="text-red-500">{chart}</span> from revision{" "}
       {installedRevision.revision} to {rollbackRevision}
     </div>
@@ -441,7 +441,7 @@ const Rollback = ({
     <>
       <Button
         onClick={handleRollback}
-        className="flex items-center gap-2 h-1/2 text-sm font-semibold"
+        className="flex h-1/2 items-center gap-2 text-sm font-semibold"
       >
         <BsArrowRepeat />
         Rollback to #{rollbackRevision}
@@ -470,7 +470,7 @@ const Uninstall = () => {
     },
   });
   const uninstallTitle = (
-    <div className="font-semibold text-lg">
+    <div className="text-lg font-semibold">
       Uninstall <span className="text-red-500">{chart}</span> from namespace{" "}
       <span className="text-red-500">{namespace}</span>
     </div>
@@ -480,7 +480,7 @@ const Uninstall = () => {
     <>
       <Button
         onClick={() => setIsOpen(true)}
-        className="flex items-center gap-2 hover:bg-red-200 h-1/2 text-sm font-semibold"
+        className="flex h-1/2 items-center gap-2 text-sm font-semibold hover:bg-red-200"
       >
         <BsTrash3 />
         Uninstall
@@ -507,18 +507,18 @@ const Uninstall = () => {
                 key={
                   resource.apiVersion + resource.kind + resource.metadata.name
                 }
-                className="flex justify-start gap-1 w-full mb-3"
+                className="mb-3 flex w-full justify-start gap-1"
               >
                 <span
                   style={{
                     textAlign: "end",
                     paddingRight: "30px",
                   }}
-                  className=" w-3/5  italic"
+                  className="w-3/5 italic"
                 >
                   {resource.kind}
                 </span>
-                <span className=" w-4/5 font-semibold">
+                <span className="w-4/5 font-semibold">
                   {resource.metadata.name}
                 </span>
               </div>

frontend/src/components/revision/RevisionDiff.tsx

@@ -134,7 +134,7 @@ function RevisionDiff({
 
   return (
     <div>
-      <div className="flex mb-3 p-2 border border-gray-200 border-revision flex-row items-center justify-between w-full bg-white rounded-sm">
+      <div className="mb-3 flex w-full flex-row items-center justify-between rounded-sm border border-gray-200 border-revision bg-white p-2">
         <div className="flex items-center">
           <input
             checked={viewMode === "view"}
@@ -143,7 +143,7 @@ function RevisionDiff({
             type="radio"
             value="view"
             name="notes-view"
-            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300"
+            className="h-4 w-4 border-gray-300 bg-gray-100 text-blue-600"
           />
           <label
             htmlFor="view"
@@ -160,7 +160,7 @@ function RevisionDiff({
             type="radio"
             value="diff-with-previous"
             name="notes-view"
-            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300"
+            className="h-4 w-4 border-gray-300 bg-gray-100 text-blue-600"
           />
           <label
             htmlFor="diff-with-previous"
@@ -177,7 +177,7 @@ function RevisionDiff({
             type="radio"
             value="diff-with-specific-revision"
             name="notes-view"
-            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300"
+            className="h-4 w-4 border-gray-300 bg-gray-100 text-blue-600"
           />
           <label
             htmlFor="diff-with-specific-revision"
@@ -186,7 +186,7 @@ function RevisionDiff({
             <div>
               Diff with specific revision:
               <input
-                className="border ml-2 border-gray-500 w-10 p-1 rounded-xs"
+                className="ml-2 w-10 rounded-xs border border-gray-500 p-1"
                 type="text"
                 value={specificVersion}
                 onChange={(e) => setSpecificVersion(Number(e.target.value))}
@@ -201,7 +201,7 @@ function RevisionDiff({
               type="checkbox"
               onChange={handleUserDefinedCheckbox}
               checked={!!userDefinedValue}
-              className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+              className="h-4 w-4 rounded-sm border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
             />
             <label
               htmlFor="user-define-only-checkbox"
@@ -214,8 +214,8 @@ function RevisionDiff({
       </div>
       {isLoading ? <Spinner /> : ""}
       {viewMode === VIEW_MODE_VIEW_ONLY && content ? (
-        <div className="bg-white overflow-x-auto w-full p-3 relative">
+        <div className="relative w-full overflow-x-auto bg-white p-3">
-          <pre className="bg-white rounded-sm font-sf-mono">
+          <pre className="rounded-sm bg-white font-sf-mono">
             {parse(content)}
           </pre>
         </div>
@@ -223,7 +223,7 @@ function RevisionDiff({
         ""
       )}
       <div
-        className="bg-white w-full relative leading-5 font-sf-mono"
+        className="relative w-full bg-white font-sf-mono leading-5"
         //@ts-ignore
         ref={diffElement}
       ></div>

frontend/src/components/revision/RevisionResource.tsx

@@ -30,11 +30,11 @@ export default function RevisionResource({ isLatest }: Props) {
   return (
     <table
       cellPadding={6}
-      className="border-spacing-y-2 font-semibold border-separate w-full text-xs "
+      className="w-full border-separate border-spacing-y-2 text-xs font-semibold"
     >
-      <thead className="bg-zinc-200 font-bold h-8 rounded-sm">
+      <thead className="h-8 rounded-sm bg-zinc-200 font-bold">
         <tr>
-          <td className="pl-6 rounded-sm">RESOURCE TYPE</td>
+          <td className="rounded-sm pl-6">RESOURCE TYPE</td>
           <td>NAME</td>
           <td>STATUS</td>
           <td>STATUS MESSAGE</td>
@@ -44,7 +44,7 @@ export default function RevisionResource({ isLatest }: Props) {
       {isLoading ? (
         <Spinner />
       ) : (
-        <tbody className="bg-white mt-4 h-8 rounded-sm w-full">
+        <tbody className="mt-4 h-8 w-full rounded-sm bg-white">
           {resources?.length ? (
             resources
               .sort(function (a, b) {
@@ -65,7 +65,7 @@ export default function RevisionResource({ isLatest }: Props) {
               ))
           ) : (
             <tr>
-              <div className="bg-white rounded-sm shadow-sm display-none no-charts mt-3 text-sm p-4">
+              <div className="display-none no-charts mt-3 rounded-sm bg-white p-4 text-sm shadow-sm">
                 Looks like you don&apos;t have any resources.{" "}
                 <RiExternalLinkLine className="ml-2 text-lg" />
               </div>
@@ -99,14 +99,14 @@ const ResourceRow = ({
 
   return (
     <>
-      <tr className="min-w-[100%] min-h[70px] text-sm py-2">
+      <tr className="min-h[70px] min-w-[100%] py-2 text-sm">
-        <td className="pl-6 rounded-sm text-sm font-normal w-48">{kind}</td>
+        <td className="w-48 rounded-sm pl-6 text-sm font-normal">{kind}</td>
-        <td className="font-bold text-sm w-56">{name}</td>
+        <td className="w-56 text-sm font-bold">{name}</td>
         <td>{reason ? <Badge type={badgeType}>{reason}</Badge> : null}</td>
         <td className="rounded-sm text-gray-100">
-          <div className="flex flex-col gap-1 flex-start">
+          <div className="flex-start flex flex-col gap-1">
             {message && (
-              <div className="text-gray-500 font-thin">{message}</div>
+              <div className="font-thin text-gray-500">{message}</div>
             )}
             {(badgeType === "error" || badgeType === "warning") && (
               <Troubleshoot />
@@ -115,7 +115,7 @@ const ResourceRow = ({
         </td>
         <td className="rounded-sm">
           {isLatest && reason !== "NotFound" ? (
-            <div className="flex justify-end items-center mr-36">
+            <div className="mr-36 flex items-center justify-end">
               <Button className="px-1 text-xs" onClick={toggleDrawer}>
                 Describe
               </Button>
@@ -127,7 +127,7 @@ const ResourceRow = ({
         open={isOpen}
         onClose={toggleDrawer}
         direction="right"
-        className="min-w-[85%] "
+        className="min-w-[85%]"
       >
         {isOpen ? (
           <DescribeResource
@@ -171,10 +171,10 @@ const DescribeResource = ({
   const badgeType = getBadgeType(status);
   return (
     <>
-      <div className="flex justify-between px-3 py-4 border-b ">
+      <div className="flex justify-between border-b px-3 py-4">
         <div>
           <div className="flex gap-3">
-            <h3 className="font-medium text-xl font-poppins">{name}</h3>
+            <h3 className="font-poppins text-xl font-medium">{name}</h3>
             <Badge type={badgeType}>{reason}</Badge>
           </div>
           <p className="m-0 mt-4 font-inter text-sm font-normal">{kind}</p>
@@ -183,7 +183,7 @@ const DescribeResource = ({
         <div className="flex items-center gap-4 pr-4">
           <a
             href="https://www.komodor.com/helm-dash/?utm_campaign=Helm%20Dashboard%20%7C%20CTA&amp;utm_source=helm-dash&amp;utm_medium=cta&amp;utm_content=helm-dash"
-            className="bg-primary text-white p-1.5 text-sm flex items-center rounded-sm"
+            className="flex items-center rounded-sm bg-primary p-1.5 text-sm text-white"
             target="_blank"
             rel="noreferrer"
           >
@@ -197,7 +197,7 @@ const DescribeResource = ({
             aria-label="Close"
             onClick={closeDrawer}
           >
-            <img src={closeIcon} alt="close" className="w-[16px] h-[16px]" />
+            <img src={closeIcon} alt="close" className="h-[16px] w-[16px]" />
           </button>
         </div>
       </div>
@@ -205,9 +205,9 @@ const DescribeResource = ({
       {isLoading ? (
         <Spinner />
       ) : (
-        <div className="h-full overflow-y-auto ">
+        <div className="h-full overflow-y-auto">
           <pre
-            className="bg-white rounded-sm p-4 font-medium text-base font-sf-mono"
+            className="rounded-sm bg-white p-4 font-sf-mono text-base font-medium"
             style={{ overflow: "unset" }}
             dangerouslySetInnerHTML={{
               __html: yamlFormattedData,

frontend/src/components/revision/RevisionsList.tsx

@@ -40,18 +40,18 @@ export default function RevisionsList({
             }
             onClick={() => changeRelease(release.revision)}
             key={release.revision}
-            className={`flex flex-col border border-gray-200 rounded-md mx-5 p-2 gap-4 cursor-pointer ${
+            className={`mx-5 flex cursor-pointer flex-col gap-4 rounded-md border border-gray-200 p-2 ${
               release.revision === selectedRevision
                 ? "border-revision-dark bg-white"
                 : "border-revision-light bg-body-background"
             }`}
           >
-            <div className="flex flex-wrap row justify-between">
+            <div className="row flex flex-wrap justify-between">
               <StatusLabel status={release.status} isRollback={isRollback} />
               <span className="font-bold">#{release.revision}</span>
             </div>
             <div
-              className="self-end text-muted text-xs flex flex-wrap gap-1"
+              className="flex flex-wrap gap-1 self-end text-xs text-muted"
               style={{
                 width: "100%",
                 display: "flex",

frontend/src/layout/Header.tsx

@@ -58,8 +58,8 @@ export default function Header() {
     }`;
 
   return (
-    <div className="h-16 flex items-center justify-between bg-white custom-shadow">
+    <div className="custom-shadow flex h-16 items-center justify-between bg-white">
-      <div className="h-16 flex items-center gap-6 min-w-fit ">
+      <div className="flex h-16 min-w-fit items-center gap-6">
         <LinkWithSearchParams to={"/installed"} exclude={["tab"]}>
           <img
             src={LogoHeader}
@@ -67,9 +67,9 @@ export default function Header() {
             className="ml-3 w-48 min-w-[80px]"
           />
         </LinkWithSearchParams>
-        <span className="ml-3 w-px h-3/5 bg-gray-200" />
+        <span className="ml-3 h-3/5 w-px bg-gray-200" />
         <div className="inline-block w-full">
-          <ul className="w-full items-center flex md:flex-row md:justify-between md:mt-0 md:text-sm md:font-normal md:border-0 ">
+          <ul className="flex w-full items-center md:mt-0 md:flex-row md:justify-between md:border-0 md:text-sm md:font-normal">
             <li>
               <LinkWithSearchParams
                 to={"/installed"}
@@ -135,19 +135,19 @@ export default function Header() {
           </ul>
         </div>
       </div>
-      <div className="h-16 flex items-center text-sm ">
+      <div className="flex h-16 items-center text-sm">
-        <div className="flex p-1 gap-2 border bottom-gray-200 rounded-sm min-w-max">
+        <div className="bottom-gray-200 flex min-w-max gap-2 rounded-sm border p-1">
           <img src={WatcherIcon} width={40} height={40} />
           <div className="flex flex-col">
             <a
               href="https://komodor.com/helm-dash/"
-              className="text-link-color font-bold"
+              className="font-bold text-link-color"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="flex font-bold items-center gap-2 min-w-[25%] ">
+              <div className="flex min-w-[25%] items-center gap-2 font-bold">
                 Upgrade your HELM experience - Free
-                <BsBoxArrowUpRight className="w-[14px] h-[14px]" />
+                <BsBoxArrowUpRight className="h-[14px] w-[14px]" />
               </div>
             </a>
             <label className="text-muted">
@@ -156,7 +156,7 @@ export default function Header() {
           </div>
         </div>
 
-        <span className="w-px h-3/5 bg-gray-200 ml-3" />
+        <span className="ml-3 h-3/5 w-px bg-gray-200" />
         {!clusterMode ? <ShutDownButton /> : null}
       </div>
     </div>

frontend/src/pages/Installed.tsx

@@ -74,7 +74,7 @@ function Installed() {
   }, [data, filterKey, selectedNamespaces]);
 
   return (
-    <div className="flex flex-row w-full">
+    <div className="flex w-full flex-row">
       <ClustersList
         selectedCluster={context ?? ""}
         filteredNamespaces={selectedNamespaces}
@@ -82,7 +82,7 @@ function Installed() {
         installedReleases={data}
       />
 
-      <div className="p-5 w-[calc(100%-17rem)]">
+      <div className="w-[calc(100%-17rem)] p-5">
         <InstalledPackagesHeader
           isLoading={isLoading || isRefetching}
           filteredReleases={filteredReleases}

frontend/src/pages/Repository.tsx

@@ -59,7 +59,7 @@ function RepositoryPage() {
   }, [repositories, repoFromParams]);
 
   return (
-    <div className="flex flex-row p-5 gap-4">
+    <div className="flex flex-row gap-4 p-5">
       <RepositoriesList
         repositories={repositories}
         onRepositoryChanged={handleRepositoryChanged}

frontend/src/pages/Revision.tsx

@@ -31,7 +31,7 @@ function Revision() {
   );
 
   const sortedReleases = useMemo(
-    () => (releaseRevisions as ReleaseRevision[])?.sort(descendingSort),
+    () => releaseRevisions?.sort(descendingSort),
     [releaseRevisions]
   );
 
@@ -46,8 +46,8 @@ function Revision() {
 
   return (
     <div className="flex">
-      <div className="flex flex-col gap-2 w-1/6 min-h-screen bg-[#E8EDF2] pb-4">
+      <div className="flex min-h-screen w-1/6 flex-col gap-2 bg-[#E8EDF2] pb-4">
-        <label className="mt-5 mx-5 text-sm text-dark font-semibold">
+        <label className="mx-5 mt-5 text-sm font-semibold text-dark">
           Revisions
         </label>
         {isLoadingHistory ? (
@@ -60,9 +60,9 @@ function Revision() {
         )}
       </div>
 
-      <div className="w-5/6 min-h-screen bg-body-background pb-4">
+      <div className="min-h-screen w-5/6 bg-body-background pb-4">
         {isLoadingHistory ? (
-          <div className=" p-4">
+          <div className="p-4">
             <Spinner />
           </div>
         ) : selectedRelease ? (
@@ -81,12 +81,12 @@ function Revision() {
 const RevisionSidebarSkeleton = () => {
   return (
     <>
-      <div className="border border-gray-200 rounded-md mx-5 p-2 gap-4 animate-pulse  h-[74px] w-[88%] bg-gray-100" />
+      <div className="mx-5 h-[74px] w-[88%] animate-pulse gap-4 rounded-md border border-gray-200 bg-gray-100 p-2" />
-      <div className="border border-gray-200 rounded-md mx-5 p-2 gap-4 animate-pulse  h-[74px] w-[88%] bg-gray-100" />
+      <div className="mx-5 h-[74px] w-[88%] animate-pulse gap-4 rounded-md border border-gray-200 bg-gray-100 p-2" />
-      <div className="border border-gray-200 rounded-md mx-5 p-2 gap-4 animate-pulse  h-[74px] w-[88%] bg-gray-100" />
+      <div className="mx-5 h-[74px] w-[88%] animate-pulse gap-4 rounded-md border border-gray-200 bg-gray-100 p-2" />
-      <div className="border border-gray-200 rounded-md mx-5 p-2 gap-4 animate-pulse  h-[74px] w-[88%] bg-gray-100" />
+      <div className="mx-5 h-[74px] w-[88%] animate-pulse gap-4 rounded-md border border-gray-200 bg-gray-100 p-2" />
-      <div className="border border-gray-200 rounded-md mx-5 p-2 gap-4 animate-pulse  h-[74px] w-[88%] bg-gray-100" />
+      <div className="mx-5 h-[74px] w-[88%] animate-pulse gap-4 rounded-md border border-gray-200 bg-gray-100 p-2" />
-      <div className="border border-gray-200 rounded-md mx-5 p-2 gap-4 animate-pulse  h-[74px] w-[88%] bg-gray-100" />
+      <div className="mx-5 h-[74px] w-[88%] animate-pulse gap-4 rounded-md border border-gray-200 bg-gray-100 p-2" />
     </>
   );
 };

frontend/yarn.lock

@@ -5265,6 +5265,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier-plugin-tailwindcss@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.1.tgz"
+  integrity sha512-Bzv1LZcuiR1Sk02iJTS1QzlFNp/o5l2p3xkopwOrbPmtMeh3fK9rVW5M3neBQzHq+kGKj/4LGQMTNcTH4NGPtQ==
+
 prettier@^3.0.0, prettier@^3.7.1:
   version "3.7.1"
   resolved "https://registry.npmjs.org/prettier/-/prettier-3.7.1.tgz"