refactor(tailwind_classes) refactor tailwind classes to use new tailwind v4 util classes

Author: p2arthur

package-lock.json

@@ -93,7 +93,6 @@
     "react-router-dom": "6.24.0",
     "react-toastify": "^10.0.5",
     "tailwind-merge": "^2.2.1",
-    "tailwindcss-animate": "^1.0.7",
     "use-debounce": "^10.0.3",
     "uuid": "^10.0.0",
     "vaul": "^0.9.0",
@@ -112,6 +111,8 @@
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^12.0.2",
+    "@tailwindcss/postcss": "^4.1.14",
+    "@tailwindcss/vite": "^4.1.14",
     "@tauri-apps/cli": "^2.0.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^14.2.2",
@@ -121,7 +122,6 @@
     "@types/react-dom": "^18.2.19",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react-swc": "^3.11.0",
-    "autoprefixer": "^10.4.18",
     "better-npm-audit": "^3.7.3",
     "conventional-changelog-conventionalcommits": "^8.0.0",
     "cpy-cli": "^5.0.0",
@@ -130,16 +130,16 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-tailwindcss": "^3.17.5",
     "fake-indexeddb": "^6.0.0",
     "happy-dom": "^15.7.3",
     "npm-run-all2": "^8.0.4",
     "patch-package": "^8.0.0",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.6.14",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "semantic-release-export-data": "^1.0.1",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.1.14",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.15.0",
     "vite": "^7.0.5",

package.json

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

postcss.config.js

@@ -29,7 +29,7 @@ export function ApplicationLocalState({ application }: Props) {
 
   return (
     <div className="space-y-4 overflow-hidden">
-      <div className="max-w-[35rem] rounded-md border border-input bg-popover text-popover-foreground">
+      <div className="max-w-140 rounded-md border border-input bg-popover text-popover-foreground">
         <div className="flex items-center px-3">
           <MagnifyingGlassIcon className="mr-2 size-4 shrink-0 opacity-50" />
           <input
@@ -39,7 +39,7 @@ 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-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            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"
           />
           <Button
             onClick={handleClear}

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

@@ -5,7 +5,7 @@ import { CircleDollarSign, SquareArrowRight, Bolt, Snowflake, ShieldCheck, Key,
 import { TransactionType } from '@/features/transactions/models'
 
 const badgeVariants = cva(
-  'inline-flex h-5 items-center truncate rounded-md border px-1.5 py-0.5 text-xs tracking-tighter transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex h-5 items-center truncate rounded-md border px-1.5 py-0.5 text-xs tracking-tighter transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {

src/features/common/components/badge.tsx

@@ -7,7 +7,7 @@ import { Loader2 as Loader } from 'lucide-react'
 import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'
 
 const buttonVariants = cva(
-  'relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {

src/features/common/components/button.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { cn } from '@/features/common/utils'
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-sm p-4 [&:has(_h2)]:pt-2.5', className)} {...props} />
+  <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-xs p-4 [&:has(h2)]:pt-2.5', className)} {...props} />
 ))
 Card.displayName = 'Card'
 

src/features/common/components/card.tsx

@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      'peer h-4 w-4 shrink-0 border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className
     )}
     {...props}

src/features/common/components/checkbox.tsx

@@ -46,7 +46,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        '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
       )}
       {...props}
@@ -123,7 +123,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+      'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
       className
     )}
     {...props}

src/features/common/components/command.tsx

@@ -16,7 +16,7 @@ export function DescriptionList({ items, dtClassName }: Props) {
       {items.map((item, index) => (
         <dl key={index} className={cn('grid grid-cols-subgrid col-span-2')}>
           <dt className={cn('font-medium', dtClassName)}>{item.dt}</dt>
-          <dd className={cn('overflow-ellipsis whitespace-normal overflow-hidden')}>
+          <dd className={cn('text-ellipsis whitespace-normal overflow-hidden')}>
             {typeof item.dd === 'bigint' ? item.dd.toString() : item.dd}
           </dd>
         </dl>