chore(tailwind): support tailwind class ordering in clsx functions [r8s-949] (#2292)

.prettierrc

@@ -17,5 +17,6 @@
       }
     }
   ],
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["clsx"]
 }

app/react/components/Badge/Badge.tsx

@@ -17,50 +17,50 @@ export type BadgeType =
 // the classes are typed in full because tailwind doesn't render the interpolated classes
 const typeClasses: Record<BadgeType, string> = {
   success: clsx(
-    'text-success-9 bg-success-2',
-    'th-dark:text-success-3 th-dark:bg-success-10',
-    'th-highcontrast:text-success-3 th-highcontrast:bg-success-10'
+    'bg-success-2 text-success-9',
+    'th-dark:bg-success-10 th-dark:text-success-3',
+    'th-highcontrast:bg-success-10 th-highcontrast:text-success-3'
   ),
   warn: clsx(
-    'text-warning-9 bg-warning-2',
-    'th-dark:text-warning-3 th-dark:bg-warning-10',
-    'th-highcontrast:text-warning-3 th-highcontrast:bg-warning-10'
+    'bg-warning-2 text-warning-9',
+    'th-dark:bg-warning-10 th-dark:text-warning-3',
+    'th-highcontrast:bg-warning-10 th-highcontrast:text-warning-3'
   ),
   danger: clsx(
-    'text-error-9 bg-error-2',
-    'th-dark:text-error-3 th-dark:bg-error-10',
-    'th-highcontrast:text-error-3 th-highcontrast:bg-error-10'
+    'bg-error-2 text-error-9',
+    'th-dark:bg-error-10 th-dark:text-error-3',
+    'th-highcontrast:bg-error-10 th-highcontrast:text-error-3'
   ),
   info: clsx(
-    'text-blue-9 bg-blue-2',
-    'th-dark:text-blue-3 th-dark:bg-blue-10',
-    'th-highcontrast:text-blue-3 th-highcontrast:bg-blue-10'
+    'bg-blue-2 text-blue-9',
+    'th-dark:bg-blue-10 th-dark:text-blue-3',
+    'th-highcontrast:bg-blue-10 th-highcontrast:text-blue-3'
   ),
   // the secondary classes are a bit darker in light mode and a bit lighter in dark mode
   successSecondary: clsx(
-    'text-success-9 bg-success-3',
-    'th-dark:text-success-3 th-dark:bg-success-9',
-    'th-highcontrast:text-success-3 th-highcontrast:bg-success-9'
+    'bg-success-3 text-success-9',
+    'th-dark:bg-success-9 th-dark:text-success-3',
+    'th-highcontrast:bg-success-9 th-highcontrast:text-success-3'
   ),
   warnSecondary: clsx(
-    'text-warning-9 bg-warning-3',
-    'th-dark:text-warning-3 th-dark:bg-warning-9',
-    'th-highcontrast:text-warning-3 th-highcontrast:bg-warning-9'
+    'bg-warning-3 text-warning-9',
+    'th-dark:bg-warning-9 th-dark:text-warning-3',
+    'th-highcontrast:bg-warning-9 th-highcontrast:text-warning-3'
   ),
   dangerSecondary: clsx(
-    'text-error-9 bg-error-3',
-    'th-dark:text-error-3 th-dark:bg-error-9',
-    'th-highcontrast:text-error-3 th-highcontrast:bg-error-9'
+    'bg-error-3 text-error-9',
+    'th-dark:bg-error-9 th-dark:text-error-3',
+    'th-highcontrast:bg-error-9 th-highcontrast:text-error-3'
   ),
   infoSecondary: clsx(
-    'text-blue-9 bg-blue-3',
-    'th-dark:text-blue-3 th-dark:bg-blue-9',
-    'th-highcontrast:text-blue-3 th-highcontrast:bg-blue-9'
+    'bg-blue-3 text-blue-9',
+    'th-dark:bg-blue-9 th-dark:text-blue-3',
+    'th-highcontrast:bg-blue-9 th-highcontrast:text-blue-3'
   ),
   muted: clsx(
-    'text-gray-9 bg-gray-3',
-    'th-dark:text-gray-3 th-dark:bg-gray-9',
-    'th-highcontrast:text-gray-3 th-highcontrast:bg-gray-9'
+    'bg-gray-3 text-gray-9',
+    'th-dark:bg-gray-9 th-dark:text-gray-3',
+    'th-highcontrast:bg-gray-9 th-highcontrast:text-gray-3'
   ),
 };
 

app/react/components/BoxSelector/BoxSelector.tsx

@@ -44,8 +44,8 @@ export function BoxSelector<T extends Value>({
 }: Props<T>) {
   const rootClassName = clsx(
     useGridLayout
-      ? 'grid gap-2.5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
-      : 'w-full flex flex-wrap gap-2.5 overflow-hidden mb-1 mt-1',
+      ? 'grid grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
+      : 'mb-1 mt-1 flex w-full flex-wrap gap-2.5 overflow-hidden',
     className
   );
 

app/react/components/BoxSelector/LogoIcon.tsx

@@ -6,9 +6,7 @@ type Props = IconProps;
 
 export function LogoIcon({ icon, iconClass }: Props) {
   return (
-    <div
-      className="inline-flex h-14 w-14 items-center justify-center text-7xl"
-    >
+    <div className="inline-flex h-14 w-14 items-center justify-center text-7xl">
       <Icon icon={icon} className={clsx('!flex', iconClass)} />
     </div>
   );

app/react/components/StatusBadge.tsx

@@ -17,38 +17,38 @@ export type StatusBadgeType =
 
 const typeClasses: Record<StatusBadgeType, string> = {
   success: clsx(
-    'text-white bg-success-7',
-    'th-dark:text-white th-dark:bg-success-9'
+    'bg-success-7 text-white',
+    'th-dark:bg-success-9 th-dark:text-white'
   ),
   warning: clsx(
-    'text-white bg-warning-7',
-    'th-dark:text-white th-dark:bg-warning-9'
+    'bg-warning-7 text-white',
+    'th-dark:bg-warning-9 th-dark:text-white'
   ),
   danger: clsx(
-    'text-white bg-error-7',
-    'th-dark:text-white th-dark:bg-error-9'
+    'bg-error-7 text-white',
+    'th-dark:bg-error-9 th-dark:text-white'
   ),
-  info: clsx('text-white bg-blue-7', 'th-dark:text-white th-dark:bg-blue-9'),
+  info: clsx('bg-blue-7 text-white', 'th-dark:bg-blue-9 th-dark:text-white'),
   // the lite classes are a bit lighter in light mode and the same in dark mode
   successLite: clsx(
-    'text-success-9 bg-success-3',
-    'th-dark:text-white th-dark:bg-success-9'
+    'bg-success-3 text-success-9',
+    'th-dark:bg-success-9 th-dark:text-white'
   ),
   warningLite: clsx(
-    'text-warning-9 bg-warning-3',
-    'th-dark:text-white th-dark:bg-warning-9'
+    'bg-warning-3 text-warning-9',
+    'th-dark:bg-warning-9 th-dark:text-white'
   ),
   dangerLite: clsx(
-    'text-error-9 bg-error-3',
-    'th-dark:text-white th-dark:bg-error-9'
+    'bg-error-3 text-error-9',
+    'th-dark:bg-error-9 th-dark:text-white'
   ),
   mutedLite: clsx(
-    'text-gray-9 bg-gray-3',
-    'th-dark:text-white th-dark:bg-gray-9'
+    'bg-gray-3 text-gray-9',
+    'th-dark:bg-gray-9 th-dark:text-white'
   ),
   infoLite: clsx(
-    'text-blue-9 bg-blue-3',
-    'th-dark:text-white th-dark:bg-blue-9'
+    'bg-blue-3 text-blue-9',
+    'th-dark:bg-blue-9 th-dark:text-white'
   ),
   default: '',
 };

app/react/components/Stepper/Step.tsx

@@ -85,7 +85,7 @@ function getStepState({
 
 function getButtonClasses({ isActive, isCompleted, isClickable }: StepState) {
   return clsx(
-    'flex items-center gap-2 rounded-lg border border-solid px-3 py-2 transition-all text-inherit font-medium',
+    'flex items-center gap-2 rounded-lg border border-solid px-3 py-2 font-medium text-inherit transition-all',
     getButtonStateClasses({ isActive, isCompleted }),
     isClickable
       ? clsx(

app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EditButtons.tsx

@@ -22,7 +22,7 @@ export function EditButtons({ environment }: { environment: Environment }) {
   const configRoute = getConfigRoute(environment);
 
   const buttonsClasses = clsx(
-    'w-full h-full !ml-0 !rounded-none',
+    '!ml-0 h-full w-full !rounded-none',
     'hover:bg-gray-3',
     'th-dark:hover:bg-gray-9',
     'th-highcontrast:hover:bg-white th-highcontrast:hover:text-black'