Upgrade Tailwind to v4

Author: binary-koan

bun.lockb

@@ -28,14 +28,17 @@
     "zod": "^3.21.4"
   },
   "eslintConfig": {
-    "extends": ["react-app"]
+    "extends": [
+      "react-app"
+    ]
   },
   "devDependencies": {
     "@babel/core": "^7.21.8",
     "@babel/preset-typescript": "^7.21.5",
     "@graphql-codegen/cli": "^4.0.0",
     "@graphql-codegen/typescript": "^4.0.0",
     "@graphql-codegen/typescript-operations": "^4.0.0",
+    "@tailwindcss/postcss": "^4.1.13",
     "@types/lodash": "^4.14.194",
     "@types/node": "^20.2.3",
     "@types/web": "^0.0.99",
@@ -45,7 +48,7 @@
     "eslint-plugin-solid": "^0.12.1",
     "nodemon": "^2.0.22",
     "postcss": "^8.4.23",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^4.1.13",
     "typescript": "latest"
   },
   "module": "index.ts",

web/package.json

@@ -1,8 +1,8 @@
-import autoprefixer from 'autoprefixer';
-import { BunPlugin } from "bun";
-import postcss from 'postcss';
-import tailwindcss from 'tailwindcss';
-import tailwindConfig from './tailwind.config';
+import autoprefixer from "autoprefixer"
+import { BunPlugin } from "bun"
+import postcss from "postcss"
+import tailwindcss from "@tailwindcss/postcss"
+import tailwindConfig from "./tailwind.config"
 
 /**
  * @type {BunPlugin}
@@ -18,11 +18,11 @@ export const postcssPlugin = {
 
         return {
           contents: result.css,
-          loader: "file",
-        };
+          loader: "file"
+        }
       } catch (e) {
         console.error(e)
       }
-    });
-  },
-};
+    })
+  }
+}

web/postcss-plugin.js

@@ -12,7 +12,7 @@ const DefaultLoader = () => (
   </div>
 )
 const DefaultFailure: Component<{ error: any }> = (props) => (
-  <div class="rounded bg-red-100 p-4 text-red-700">{props.error.message}</div>
+  <div class="rounded-sm bg-red-100 p-4 text-red-700">{props.error.message}</div>
 )
 
 export const Cell: <Data, Variables, OtherProps = never>(props: {

web/src/components/Cell.tsx

@@ -24,7 +24,7 @@ const InnerPageWrapper: Component<{
       </PageHeader>
       <div
         classList={{
-          "p-4 shadow-sm lg:rounded lg:p-6 bg-white": props.contentBackground !== false
+          "p-4 shadow-xs lg:rounded-sm lg:p-6 bg-white": props.contentBackground !== false
         }}
       >
         {props.children}

web/src/components/InnerPageWrapper.tsx

@@ -12,7 +12,7 @@ import { fixAssetPath } from "../utils/fixAssetPath"
 
 const MainNavigation: Component = () => {
   return (
-    <div class="z-navbar fixed bottom-0 left-0 right-0 top-auto bg-white pb-[env(safe-area-inset-bottom)] shadow md:bottom-auto md:top-0 md:pb-0 md:pl-4">
+    <div class="z-navbar fixed bottom-0 left-0 right-0 top-auto bg-white pb-[env(safe-area-inset-bottom)] shadow-sm md:bottom-auto md:top-0 md:pb-0 md:pl-4">
       <div class="flex items-center md:mx-auto md:max-w-5xl md:px-2">
         <Link href="/" class="mr-4 hidden md:block">
           <img class="w-24" src={fixAssetPath(logoImage)} />

web/src/components/MainNavigation.tsx

@@ -38,10 +38,10 @@ const AccountsList: Component<{
   const defaultAccountId = () => props.currentUser?.currentUser?.defaultAccount?.id
 
   return (
-    <div class="flex flex-col gap-px bg-gray-100 shadow-sm">
+    <div class="shadow-xs flex flex-col gap-px bg-gray-100">
       <For each={props.data.accounts}>
         {(account) => (
-          <div class="flex items-center bg-white px-4 py-2 shadow-sm">
+          <div class="shadow-xs flex items-center bg-white px-4 py-2">
             <div class="mr-4 min-w-0 flex-1">
               <h3 class="mb-1 truncate leading-none">{account.name}</h3>
               <p class="text-xs leading-tight text-gray-600">{account.currency.code}</p>
@@ -50,10 +50,11 @@ const AccountsList: Component<{
               size="sm"
               variant="ghost"
               colorScheme={account.id === defaultAccountId() ? "primary" : "neutral"}
-              class="ml-auto mr-2"
+              class="ml-auto mr-2 gap-2 text-xs"
               title={"Set default to " + account.name}
               onClick={() => setDefaultAccount({ id: account.id })}
             >
+              {account.id === defaultAccountId() && "Default "}
               <IconAsterisk />
             </Button>
             <LinkButton

web/src/components/accounts/AccountsList.tsx

@@ -12,7 +12,7 @@ interface InputCustomProps {
 }
 
 export const inputClasses = (props: InputCustomProps) =>
-  `border rounded border-gray-200 ring-0 ring-indigo-200 transition focus:border-indigo-400 focus:outline-0 focus:ring focus-within:border-indigo-400 focus-within:outline-0 focus-within:ring disabled:pointer-events-none disabled:opacity-50 ${
+  `border rounded border-gray-200 ring-0 ring-indigo-200 transition focus:border-indigo-400 focus:outline-0 focus:ring-3 focus-within:border-indigo-400 focus-within:outline-0 focus-within:ring-3 disabled:pointer-events-none disabled:opacity-50 ${
     // eslint-disable-next-line solid/reactivity
     INPUT_SIZES[props.size || "md"]
   }`

web/src/components/base/Input.tsx

@@ -27,7 +27,7 @@ export const InputGroupInput = (allProps: InputProps) => {
 
   return (
     <input
-      class={`my-[-1px] h-10 flex-1 bg-transparent px-4 outline-0 ${props.class}`}
+      class={`-my-px h-10 flex-1 bg-transparent px-4 outline-0 ${props.class}`}
       {...elementProps}
     />
   )

web/src/components/base/InputGroup.tsx

@@ -47,7 +47,7 @@ const BudgetGroup: Component<BudgetGroupProps> = (props) => {
             <IconListSearch />
           </LinkButton>
         </h2>
-        <div class="bg-white pl-6 pr-4 pt-4 shadow-sm lg:mb-6 lg:ml-4">
+        <div class="bg-white pl-6 pr-4 pt-4 shadow-xs lg:mb-6 lg:ml-4">
           <Show when={!props.items.length}>
             <div class="pb-4">No transactions</div>
           </Show>