chore(eslint): implement eslint-tailwind-beta to work with tailwind v4

Author: p2arthur

eslint.config.mjs

@@ -4,6 +4,7 @@ import react from 'eslint-plugin-react'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import reactHooks from 'eslint-plugin-react-hooks'
 import prettier from 'eslint-config-prettier'
+import tailwind from 'eslint-plugin-tailwindcss'
 
 export default tseslint.config(
   eslint.configs.recommended,
@@ -33,7 +34,9 @@ export default tseslint.config(
       react,
       'react-refresh': reactRefresh,
       'react-hooks': reactHooks,
+      tailwindcss: tailwind,
     },
+
     rules: {
       //   ...react.configs.recommended.rules,
       //   ...react.configs['jsx-runtime'].rules,
@@ -45,7 +48,9 @@ export default tseslint.config(
         { ignoreRestSiblings: true, argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
       ],
       '@typescript-eslint/no-empty-object-type': 'off',
+      'tailwindcss/classnames-order': 'warn',
     },
+    settings: { tailwindcss: { config: false } },
   },
   prettier
 )

src/features/app-interfaces/components/create/app-details.tsx

@@ -118,7 +118,7 @@ export function AppDetails({ machine }: Props) {
 
   return (
     <Form
-      className="duration-300 animate-in fade-in-20"
+      className="animate-in fade-in-20 duration-300"
       schema={schema}
       onSubmit={next}
       defaultValues={defaultValues}

src/features/app-interfaces/components/create/deploy-app.tsx

@@ -243,7 +243,7 @@ export function DeployApp({ machine }: Props) {
   }, [methodDefinitions, appSpec, openDialog])
 
   return (
-    <div className="duration-300 animate-in fade-in-20">
+    <div className="animate-in fade-in-20 duration-300">
       {transactions.length === 0 && (
         <div className="mb-4">
           <DescriptionList items={deploymentOptions} dtClassName="self-center" />

src/features/app-interfaces/components/create/deployment-details.tsx

@@ -223,7 +223,7 @@ export function DeploymentDetails({ machine }: Props) {
 
   return (
     <Form
-      className="duration-300 animate-in fade-in-20"
+      className="animate-in fade-in-20 duration-300"
       schema={formSchema}
       onSubmit={next}
       defaultValues={defaultValues}

src/features/app-interfaces/components/create/from-deployment-card.tsx

@@ -32,7 +32,7 @@ export function FromDeploymentCard({ machine }: Props) {
           <span>Deploy a new app and create an app interface.</span>
         </div>
         <div className="flex grow flex-col">
-          <div className="plausible-event-name=app-lab-deploy-new-app ml-auto mt-auto">
+          <div className="plausible-event-name=app-lab-deploy-new-app mt-auto ml-auto">
             <Button onClick={fromDeploymentSelected} {...disabledProps}>
               {deployAppLabel}
             </Button>

src/features/app-interfaces/components/create/upload-app-spec.tsx

@@ -44,7 +44,7 @@ export function UploadAppSpec({ machine, supportedStandards }: Props) {
 
   return (
     <Form
-      className="duration-300 animate-in fade-in-20"
+      className="animate-in fade-in-20 duration-300"
       schema={selectAppSpecFormSchema}
       defaultValues={{ file: state.context.file }}
       onSubmit={next}

src/features/applications/components/application-local-state.tsx

@@ -29,7 +29,7 @@ export function ApplicationLocalState({ application }: Props) {
 
   return (
     <div className="space-y-4 overflow-hidden">
-      <div className="max-w-140 rounded-md border border-input bg-popover text-popover-foreground">
+      <div className="border-input bg-popover text-popover-foreground max-w-140 rounded-md border">
         <div className="flex items-center px-3">
           <MagnifyingGlassIcon className="mr-2 size-4 shrink-0 opacity-50" />
           <input
@@ -39,14 +39,14 @@ export function ApplicationLocalState({ application }: Props) {
             id="local-state-address"
             value={address}
             onChange={handleInput}
-            className="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            className="placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
           />
           <Button
             onClick={handleClear}
             variant="no-style"
             size="icon"
             aria-label="Clear local state address search"
-            className="size-4 text-muted-foreground"
+            className="text-muted-foreground size-4"
           >
             <XIcon />
           </Button>

src/features/applications/components/application-method-definitions.tsx

@@ -204,7 +204,7 @@ function Argument({ index, argument }: ArgumentProps) {
 
   return (
     <div>
-      <h5 className="mb-1.5 text-primary">{`Argument ${index + 1}`}</h5>
+      <h5 className="text-primary mb-1.5">{`Argument ${index + 1}`}</h5>
       <DescriptionList items={items} dtClassName="w-24 truncate" />
     </div>
   )

src/features/blocks/components/latest-blocks.tsx

@@ -21,8 +21,8 @@ export function LatestBlocks({ latestBlocks }: Props) {
           <ul>
             {latestBlocks.map((block) => (
               <li key={block.round} className="border-b last:border-0">
-                <BlockLink round={block.round} className="flex w-full gap-2 p-3.5 text-sm animate-in fade-in-20 hover:bg-accent">
-                  <Box className="hidden text-primary sm:max-lg:block xl:block" />
+                <BlockLink round={block.round} className="animate-in fade-in-20 hover:bg-accent flex w-full gap-2 p-3.5 text-sm">
+                  <Box className="text-primary hidden sm:max-lg:block xl:block" />
                   <div>
                     <h3 className={cn('leading-none mb-2')}>{block.round.toString()}</h3>
                     <DateFormatted className="truncate" date={new Date(block.timestamp)} />

src/features/common/components/accordion.tsx

@@ -29,7 +29,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDownIcon className="text-muted-foreground size-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
@@ -41,7 +41,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden px-4 text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden px-4 text-sm"
     {...props}
   >
     <div className={cn('pb-4 pt-0', className)}>{children}</div>