chore(prettier): add tailwind prettier plugin [EE-4809] (#8221)

* add prettier plugin

* apply tailwind prettier formatting

app/react/portainer/HomeView/EdgeLoadingSpinner.tsx

@@ -9,7 +9,7 @@ export function EdgeLoadingSpinner() {
   return (
     <div className={clsx('row', styles.root)}>
       Connecting to the Edge environment...
-      <Icon icon={Settings} className="animate-spin-slow !ml-1" />
+      <Icon icon={Settings} className="!ml-1 animate-spin-slow" />
     </div>
   );
 }

app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx

@@ -50,7 +50,7 @@ export function AssociateAMTDialog({
           Select the environments to add to associate to OpenAMT. You may select
           across multiple pages.
         </span>
-        <div className="h-8 flex items-center">
+        <div className="flex h-8 items-center">
           <Checkbox
             id="settings-container-truncate-name"
             label="Select all (in this page)"
@@ -63,7 +63,7 @@ export function AssociateAMTDialog({
             {environments.map((env) => (
               <div
                 key={env.Id}
-                className={clsx('h-8 flex items-center pt-1 pl-2')}
+                className={clsx('flex h-8 items-center pt-1 pl-2')}
               >
                 <Checkbox
                   id={`${env.Id}`}
@@ -76,7 +76,7 @@ export function AssociateAMTDialog({
               </div>
             ))}
           </div>
-          <div className="pt-3 flex justify-end w-full">
+          <div className="flex w-full justify-end pt-3">
             <PaginationControls
               showAll={totalCount <= 100}
               page={page}

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

@@ -27,7 +27,7 @@ export function EditButtons({ environment }: { environment: Environment }) {
   );
 
   return (
-    <ButtonsGrid className="w-11 ml-3">
+    <ButtonsGrid className="ml-3 w-11">
       <LinkButton
         disabled={!isAdmin}
         to="portainer.endpoints.endpoint"
@@ -85,8 +85,8 @@ function ButtonsGrid({
   return (
     <div
       className={clsx(
-        'grid border border-solid rounded-r-lg',
-        'border-gray-5 th-dark:border-gray-9 th-highcontrast:border-white',
+        'grid rounded-r-lg border border-solid',
+        'border-gray-5 th-highcontrast:border-white th-dark:border-gray-9',
         'overflow-hidden',
         className
       )}

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

@@ -30,7 +30,7 @@ export function EnvironmentBrowseButtons({
 
   const dashboardRoute = getDashboardRoute(environment);
   return (
-    <div className="flex flex-col gap-2 justify-center [&>*]:h-1/3 h-24 w-full">
+    <div className="flex h-24 w-full flex-col justify-center gap-2 [&>*]:h-1/3">
       {isBE &&
         (browseStatus !== 'snapshot' ? (
           <LinkButton
@@ -42,7 +42,7 @@ export function EnvironmentBrowseButtons({
             }}
             size="medium"
             color="light"
-            className="w-full !py-0 !m-0"
+            className="!m-0 w-full !py-0"
             title={
               !isEdgeAsync
                 ? 'Browse snapshot is only available for async environments'
@@ -55,7 +55,7 @@ export function EnvironmentBrowseButtons({
           <Button
             icon={X}
             onClick={onClickDisconnect}
-            className="w-full !py-0 !m-0 opacity-60"
+            className="!m-0 w-full !py-0 opacity-60"
             size="medium"
             color="light"
           >
@@ -77,7 +77,7 @@ export function EnvironmentBrowseButtons({
           size="medium"
           onClick={onClickBrowse}
           color="primary"
-          className="w-full !py-0 !m-0"
+          className="!m-0 w-full !py-0"
         >
           Live connect
         </LinkButton>
@@ -85,7 +85,7 @@ export function EnvironmentBrowseButtons({
         <Button
           icon={WifiOff}
           onClick={onClickDisconnect}
-          className="w-full !py-0 !m-0 opacity-60"
+          className="!m-0 w-full !py-0 opacity-60"
           size="medium"
           color="primary"
         >
@@ -125,7 +125,7 @@ function BrowseStatusTag({ status }: { status: BrowseStatus }) {
 
 function Disconnected() {
   return (
-    <div className="flex items-center gap-2 justify-center">
+    <div className="flex items-center justify-center gap-2">
       <Icon icon={WifiOff} />
       Disconnected
     </div>
@@ -136,12 +136,12 @@ function Connected() {
   return (
     <div
       className={clsx(
-        'flex items-center gap-2 justify-center rounded-lg',
+        'flex items-center justify-center gap-2 rounded-lg',
         'text-green-8 th-dark:text-green-4',
         'bg-green-3 th-dark:bg-green-3/30'
       )}
     >
-      <div className="rounded-full h-2 w-2 bg-green-8 th-dark:bg-green-4" />
+      <div className="h-2 w-2 rounded-full bg-green-8 th-dark:bg-green-4" />
       Connected
     </div>
   );
@@ -151,12 +151,12 @@ function Snapshot() {
   return (
     <div
       className={clsx(
-        'flex items-center gap-2 justify-center rounded-lg',
+        'flex items-center justify-center gap-2 rounded-lg',
         'text-warning-7 th-dark:text-warning-4',
-        'bg-warning-3 th-dark:bg-warning-3/10 th-highcontrast:bg-warning-3/30'
+        'bg-warning-3 th-highcontrast:bg-warning-3/30 th-dark:bg-warning-3/10'
       )}
     >
-      <div className="rounded-full h-2 w-2 bg-warning-7" />
+      <div className="h-2 w-2 rounded-full bg-warning-7" />
       Browsing Snapshot
     </div>
   );

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

@@ -59,14 +59,14 @@ export function EnvironmentItem({
         className="no-link"
       >
         <button
-          className="blocklist-item flex items-stretch overflow-hidden min-h-[110px] bg-transparent w-full !m-0 !pr-56"
+          className="blocklist-item !m-0 flex min-h-[110px] w-full items-stretch overflow-hidden bg-transparent !pr-56"
           onClick={onClickBrowse}
           type="button"
         >
-          <div className="ml-2 self-center flex justify-center">
+          <div className="ml-2 flex justify-center self-center">
             <EnvironmentIcon type={environment.Type} />
           </div>
-          <div className="ml-3 mr-auto flex justify-center gap-3 flex-col items-start">
+          <div className="ml-3 mr-auto flex flex-col items-start justify-center gap-3">
             <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
               <span className="font-bold">{environment.Name}</span>
               {isEdge ? (
@@ -114,8 +114,8 @@ export function EnvironmentItem({
       Buttons are extracted out of the main button because it causes errors with react and accessibility issues
       see https://stackoverflow.com/questions/66409964/warning-validatedomnesting-a-cannot-appear-as-a-descendant-of-a
       */}
-      <div className="absolute inset-y-0 right-0 flex justify-end w-56">
-        <div className="py-3 flex items-center flex-1">
+      <div className="absolute inset-y-0 right-0 flex w-56 justify-end">
+        <div className="flex flex-1 items-center py-3">
           <EnvironmentBrowseButtons
             environment={environment}
             onClickBrowse={onClickBrowse}

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

@@ -18,7 +18,7 @@ export function EnvironmentStats({ environment }: Props) {
   const component = getComponent(platform, environment);
 
   return (
-    <span className="blocklist-item-desc flex items-center gap-x-10 gap-y-2 flex-wrap">
+    <span className="blocklist-item-desc flex flex-wrap items-center gap-x-10 gap-y-2">
       {component}
     </span>
   );

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

@@ -153,9 +153,9 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
               </div>
             }
           >
-            <div className="flex gap-4 items-center">
+            <div className="flex items-center gap-4">
               <SearchBar
-                className="!bg-transparent !m-0 !min-w-[350px]"
+                className="!m-0 !min-w-[350px] !bg-transparent"
                 value={searchBarValue}
                 onChange={setSearchBarValue}
                 placeholder="Search by name, group, tag, status, URL..."
@@ -209,7 +209,7 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
             />
           </div>
           <div
-            className="blocklist !p-0 mt-5 !space-y-2"
+            className="blocklist mt-5 !space-y-2 !p-0"
             data-cy="home-endpointList"
           >
             {renderItems(
@@ -389,7 +389,7 @@ function renderItems(
 ) {
   if (isLoading) {
     return (
-      <div className="text-center text-muted" data-cy="home-loadingEndpoints">
+      <div className="text-muted text-center" data-cy="home-loadingEndpoints">
         Loading...
       </div>
     );
@@ -397,7 +397,7 @@ function renderItems(
 
   if (!totalCount) {
     return (
-      <div className="text-center text-muted" data-cy="home-noEndpoints">
+      <div className="text-muted text-center" data-cy="home-noEndpoints">
         No environments available.
       </div>
     );

app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx

@@ -69,7 +69,7 @@ export function KubeconfigPrompt({
       role="dialog"
       onDismiss={onClose}
     >
-      <DialogContent className="p-0 bg-transparent modal-dialog">
+      <DialogContent className="modal-dialog bg-transparent p-0">
         <div className="modal-dialog">
           <div className="modal-content">
             <div className="modal-header">
@@ -89,7 +89,7 @@ export function KubeconfigPrompt({
                 </div>
               </form>
               <br />
-              <div className="h-8 flex items-center">
+              <div className="flex h-8 items-center">
                 <Checkbox
                   id="settings-container-truncate-name"
                   label="Select all (in this page)"
@@ -106,7 +106,7 @@ export function KubeconfigPrompt({
                         key={env.Id}
                         className={clsx(
                           styles.checkbox,
-                          'h-8 flex items-center pt-1'
+                          'flex h-8 items-center pt-1'
                         )}
                       >
                         <Checkbox
@@ -120,7 +120,7 @@ export function KubeconfigPrompt({
                       </div>
                     ))}
                 </div>
-                <div className="pt-3 flex justify-end w-full">
+                <div className="flex w-full justify-end pt-3">
                   <PaginationControls
                     showAll={totalCount <= 100}
                     page={page}

app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx

@@ -27,7 +27,7 @@ export function SortbySelector({
 }: Props) {
   const sorted = sortByButton && !!value;
   return (
-    <div className="flex items-center gap-1 justify-end">
+    <div className="flex items-center justify-end gap-1">
       <Select
         placeholder={placeHolder}
         options={filterOptions}
@@ -37,7 +37,7 @@ export function SortbySelector({
       />
 
       <button
-        className={clsx(styles.sortButton, 'h-[34px] !m-0')}
+        className={clsx(styles.sortButton, '!m-0 h-[34px]')}
         type="button"
         disabled={!sorted}
         onClick={(e) => {

app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx

@@ -11,22 +11,22 @@ export function UpdateBadge() {
   return (
     <span
       className={clsx(
-        'inline-flex items-center gap-2 p-1 font-normal border-solid border border-transparent rounded-3xl h-fit',
+        'inline-flex h-fit items-center gap-2 rounded-3xl border border-solid border-transparent p-1 font-normal',
         'bg-blue-3 text-blue-8',
         'th-dark:bg-blue-8 th-dark:text-white',
-        'th-highcontrast:bg-transparent th-highcontrast:text-white th-highcontrast:border-white'
+        'th-highcontrast:border-white th-highcontrast:bg-transparent th-highcontrast:text-white'
       )}
     >
-      <span className="hidden 2xl:!inline text-sm">
+      <span className="hidden text-sm 2xl:!inline">
         Update Available: Edge Agent {version}
       </span>
       <Link
         to="portainer.endpoints.updateSchedules.create"
         className={clsx(
-          'badge font-normal border-solid border border-transparent',
+          'badge border border-solid border-transparent font-normal',
           'bg-blue-8 text-blue-3',
           'th-dark:bg-blue-3 th-dark:text-blue-8 th-dark:hover:bg-blue-5 th-dark:hover:text-blue-8',
-          'th-highcontrast:bg-transparent th-highcontrast:text-white th-highcontrast:hover:bg-gray-warm-7 th-highcontrast:hover:text-white th-highcontrast:border-white'
+          'th-highcontrast:border-white th-highcontrast:bg-transparent th-highcontrast:text-white th-highcontrast:hover:bg-gray-warm-7 th-highcontrast:hover:text-white'
         )}
       >
         Schedule Update

app/react/portainer/access-control/AccessManagement/PorAccessManagementUsersSelector.tsx

@@ -76,7 +76,7 @@ function Label({ option }: { option: Option }) {
   const Icon = option.Type === 'user' ? UserIcon : TeamIcon;
 
   return (
-    <div className="flex gap-1 items-center">
+    <div className="flex items-center gap-1">
       <Icon />
       <span>{option.Name}</span>
     </div>

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx

@@ -92,7 +92,7 @@ export function WizardKubernetes({ onCreate }: Props) {
         );
       case EnvironmentCreationTypes.KubeConfigEnvironment:
         return (
-          <div className="px-1 py-5 border border-solid border-orange-1">
+          <div className="border border-solid border-orange-1 px-1 py-5">
             <BEFeatureIndicator
               featureId={options.find((o) => o.value === type)?.feature}
             />

app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList.tsx

@@ -19,7 +19,7 @@ interface Props {
 
 function Item({ item, onChange }: ItemProps<Gpu>) {
   return (
-    <div className="flex gap-2 flex-grow">
+    <div className="flex flex-grow gap-2">
       <InputGroup size="small" className="flex-grow">
         <InputGroup.Addon>GPU Name</InputGroup.Addon>
         <InputGroup.Input

app/react/portainer/environments/wizard/components/Option/Option.module.css

@@ -1,9 +1,9 @@
 .root {
   --selected-item-color: var(--blue-2);
   @apply border border-solid;
-  @apply bg-gray-2 border-gray-5 text-black;
-  @apply th-dark:bg-gray-iron-10 th-dark:border-gray-neutral-8 th-dark:text-white;
-  @apply th-highcontrast:bg-gray-iron-10 th-highcontrast:border-gray-neutral-8 th-highcontrast:text-white;
+  @apply border-gray-5 bg-gray-2 text-black;
+  @apply th-dark:border-gray-neutral-8 th-dark:bg-gray-iron-10 th-dark:text-white;
+  @apply th-highcontrast:border-gray-neutral-8 th-highcontrast:bg-gray-iron-10 th-highcontrast:text-white;
 
   display: block;
   width: 200px;
@@ -36,8 +36,8 @@
 }
 
 .active {
-  @apply bg-blue-3 border-blue-6;
-  @apply th-dark:bg-blue-10 th-dark:border-blue-7;
+  @apply border-blue-6 bg-blue-3;
+  @apply th-dark:border-blue-7 th-dark:bg-blue-10;
 
   box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
 }

app/react/portainer/environments/wizard/components/Option/Option.tsx

@@ -44,11 +44,11 @@ export function Option({
       disabled={isLimited}
       onClick={onClick}
     >
-      <div className="flex items-end justify-center text-center mt-2">
+      <div className="mt-2 flex items-end justify-center text-center">
         <IconComponent selected={active} className={styles.iconComponent} />
       </div>
 
-      <div className="mt-3 text-center flex flex-col">
+      <div className="mt-3 flex flex-col text-center">
         <h3>{title}</h3>
         <h5>{description}</h5>
         {isLimited && (