tailwind v4

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.8.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
   "organizeImports": {
     "enabled": true
   },
@@ -47,15 +47,16 @@
         "noSwitchDeclarations": "off",
         "noChildrenProp": "off",
         "noUnusedVariables": "warn",
-        "noUnusedImports":"warn",
+        "noUnusedImports": "warn",
         "useJsxKeyInIterable": "off"
       },
       "a11y": {
         "useButtonType": "off",
         "useAltText": "off",
         "useKeyWithMouseEvents": "off",
         "useKeyWithClickEvents": "off",
-        "noSvgWithoutTitle": "off"
+        "noSvgWithoutTitle": "off",
+        "noLabelWithoutControl": "off"
       }
     }
   },

package.json

@@ -58,6 +58,7 @@
     "@sentry/react": "8.47.0",
     "@stripe/react-stripe-js": "3.1.1",
     "@stripe/stripe-js": "5.3.0",
+    "@tailwindcss/vite": "^4.0.0",
     "@vercel/blob": "0.27.1",
     "@vercel/kv": "3.0.0",
     "@vercel/remix": "2.15.2",
@@ -95,10 +96,9 @@
   },
   "devDependencies": {
     "@aws-lite/dynamodb-types": "0.3.11",
-    "@biomejs/biome": "1.8.1",
+    "@biomejs/biome": "1.9.4",
     "@remix-run/dev": "2.15.2",
     "@remix-run/testing": "2.15.2",
-    "@tailwindcss/container-queries": "0.1.1",
     "@tailwindcss/typography": "0.5.15",
     "@testing-library/dom": "10.1.0",
     "@testing-library/jest-dom": "6.4.6",
@@ -110,15 +110,12 @@
     "@types/react": "18.2.62",
     "@types/react-csv": "1.1.10",
     "@types/react-dom": "18.2.19",
-    "autoprefixer": "10.4.20",
     "jsdom": "24.1.0",
     "lefthook": "1.6.15",
     "msw": "2.3.1",
-    "postcss": "8.4.49",
-    "postcss-import": "16.1.0",
-    "tailwindcss": "3.4.3",
+    "tailwindcss": "^4.0.0",
     "typescript": "5.5",
-    "vite": "5.1.0",
+    "vite": "5.2.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "2.1.8"
   }

src/components/BankDetails/BankDetails.tsx

@@ -71,7 +71,7 @@ export default function BankDetails({
         disabled={isSubmitting}
       />
 
-      <Separator classes="before:bg-gray-l3 after:bg-gray-l3 before:dark:bg-navy after:dark:bg-navy" />
+      <Separator classes="before:bg-gray-l3 after:bg-gray-l3 dark:before:bg-navy dark:after:bg-navy" />
 
       <RecipientDetails
         amount={amnt}

src/components/BankDetails/RecipientDetails/RecipientDetailsForm/RecipientDetailsForm.tsx

@@ -204,7 +204,7 @@ export default function RecipientDetailsForm({
                       !!getFieldState(f.key).error
                         ? "border-red"
                         : "border-gray-l4"
-                    } rounded px-4 py-3.5 text-sm has-[:checked]:border-blue-d1 has-[:disabled]:bg-gray-l5 w-32 h-10 focus-within:ring-1 focus-within:ring-blue-l2`}
+                    } rounded px-4 py-3.5 text-sm has-checked:border-blue-d1 has-disabled:bg-gray-l5 w-32 h-10 focus-within:ring-1 focus-within:ring-blue-l2`}
                   >
                     <input
                       className="appearance none w-0 h-0"

src/components/ContentLoader.tsx

@@ -7,7 +7,9 @@ export default function ContentLoader({
   return (
     <div
       {...props}
-      className={className + " bg-gray-l4 dark:bg-navy animate-pulse rounded"}
+      className={
+        className + " bg-gray-l4 dark:bg-navy animate-pulse rounded-sm"
+      }
     />
   );
 }

src/components/CountrySelector/Options.tsx

@@ -3,7 +3,7 @@ import { isEmpty } from "helpers";
 import type { Country } from "types/components";
 
 const containerStyle =
-  "absolute top-full mt-2 z-10 w-full bg-white dark:bg-blue-d6 shadow-lg rounded overflow-y-scroll scroller";
+  "absolute top-full mt-2 z-10 w-full bg-white dark:bg-blue-d6 shadow-lg rounded-sm overflow-y-scroll scroller";
 
 type Props = {
   query: string;
@@ -22,7 +22,7 @@ export default function Options({ query, options }: Props) {
       {(!isEmpty(options) &&
         filtered.map((country) => (
           <ComboboxOption
-            className="data-[selected]:bg-blue-l2 hover:bg-blue-l2 flex items-center gap-2 p-2 text-sm font-heading"
+            className="data-selected:bg-blue-l2 hover:bg-blue-l2 flex items-center gap-2 p-2 text-sm font-heading"
             key={country.name}
             value={country}
           >

src/components/CurrencySelector/CurrencyOptions.tsx

@@ -43,19 +43,19 @@ export default function CurrencyOptions({
       classes={{
         container:
           classes +
-          " font-heading bg-white w-full rounded border border-gray-l4 p-2 text-sm text-navy-l1 shadow-lg",
+          " font-heading bg-white w-full rounded-sm border border-gray-l4 p-2 text-sm text-navy-l1 shadow-lg",
       }}
     >
       {(currencies) => (
         <ComboboxOptions
           anchor="bottom"
-          className={`${classes} w-[var(--input-width)] bg-white dark:bg-blue-d6 shadow-lg rounded [--anchor-max-height:13rem] overflow-y-auto scroller text-base ring-1 ring-black ring-opacity-5 focus:outline-none`}
+          className={`${classes} w-[var(--input-width)] bg-white dark:bg-blue-d6 shadow-lg rounded-sm [--anchor-max-height:13rem] overflow-y-auto scroller text-base ring-1 ring-black ring-opacity-5 focus:outline-hidden`}
         >
           {currencies.map(({ code, name, min, rate }) => (
             <ComboboxOption
               key={code}
               value={{ code, name, min, rate }}
-              className="flex items-center gap-2 p-2 cursor-pointer truncate data-[selected]:bg-[--accent-secondary] hover:bg-[--accent-secondary]"
+              className="flex items-center gap-2 p-2 cursor-pointer truncate data-selected:bg-(--accent-secondary) hover:bg-(--accent-secondary)"
             >
               {!!name ? `${code.toUpperCase()} - ${name}` : code.toUpperCase()}
             </ComboboxOption>

src/components/DonateMethods/DonateMethods.tsx

@@ -91,7 +91,7 @@ function Method({
       dragControls={controls}
       id={value.id}
       style={{ y }}
-      className="flex items-center gap-2 border border-gray-l4 p-3 aria-disabled:bg-gray-l4 aria-disabled:text-gray rounded bg-white select-none"
+      className="flex items-center gap-2 border border-gray-l4 p-3 aria-disabled:bg-gray-l4 aria-disabled:text-gray rounded-sm bg-white select-none"
     >
       <input
         type="checkbox"

src/components/FileDropzone/FileDropzone.tsx

@@ -55,7 +55,7 @@ export const FileDropzone = forwardRef<El, Props>((props, ref) => {
         data-disabled={props.disabled || props.value === "loading"}
         {...getRootProps({
           className: `relative grid place-items-center rounded border border-gray-l2 border-dashed w-full h-[11.375rem]
-          focus:outline-none focus:ring-2 data-[drag="true"]:ring-2 has-[:active]:ring-2 ring-blue-d1 ring-offset-2 
+          focus:outline-hidden focus:ring-2 data-[drag="true"]:ring-2 has-active:ring-2 ring-blue-d1 ring-offset-2 
           hover:bg-blue-l5
           data-[disabled="true"]:bg-gray-l5 data-[disabled="true"]:pointer-events-none data-[disabled="true"]:ring-0
           data-[invalid="true"]:border-red

src/components/Group.tsx

@@ -12,7 +12,7 @@ export default function Group({
 }>) {
   return (
     <div
-      className={`grid w-full gap-6 p-6 border border-gray-l4 rounded bg-white dark:bg-blue-d6 ${className}`}
+      className={`grid w-full gap-6 p-6 border border-gray-l4 rounded-sm bg-white dark:bg-blue-d6 ${className}`}
     >
       {title && <h3 className="text-2xl">{title}</h3>}
       {description && (

src/components/Header/NavDropdown.tsx

@@ -24,17 +24,17 @@ export default function NavDropdown({ user, isInAuth }: Props) {
     <HuiMenu>
       <MenuButton
         data-testid="nav_dropdown"
-        className="text-white data-[open]:text-white/90 group flex justify-center items-center hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75"
+        className="text-white data-open:text-white/90 group flex justify-center items-center hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"
         aria-label="Navigation Menu"
       >
         <MenuIcon
           size={24}
-          className="text-navy-l2 data-[open]:text-navy-l2/70 sm:hidden transition duration-150 ease-in-out group-hover:text-navy-l2/80"
+          className="text-navy-l2 data-open:text-navy-l2/70 sm:hidden transition duration-150 ease-in-out group-hover:text-navy-l2/80"
           aria-hidden="true"
         />
         <ChevronDown
           size={20}
-          className="text-blue-d7 data-[open]:text-blue-d7/70 max-sm:hidden transition duration-150 ease-in-out group-hover:text-blue-d7/80"
+          className="text-blue-d7 data-open:text-blue-d7/70 max-sm:hidden transition duration-150 ease-in-out group-hover:text-blue-d7/80"
           aria-hidden="true"
         />
       </MenuButton>
@@ -43,7 +43,7 @@ export default function NavDropdown({ user, isInAuth }: Props) {
         transition
         anchor={{ to: "bottom end", gap: 10 }}
         as="nav"
-        className="grid isolate z-40 rounded-lg bg-gray-l6 drop-shadow-2xl scroller origin-top transition duration-100 ease-out data-[closed]:scale-95 data-[closed]:opacity-0"
+        className="grid isolate z-40 rounded-lg bg-gray-l6 drop-shadow-2xl scroller origin-top transition duration-100 ease-out data-closed:scale-95 data-closed:opacity-0"
       >
         <div className="p-5 grid gap-y-2 w-80">
           <MenuItem>

src/components/Header/UserMenu/EndowmentLink.tsx

@@ -46,7 +46,7 @@ export function Skeleton() {
       aria-disabled={true}
     >
       <ContentLoader className="w-[20px] h-[20px] rounded-full" />
-      <ContentLoader className="h-[20px] w-40 rounded" />
+      <ContentLoader className="h-[20px] w-40 rounded-sm" />
     </a>
   );
 }

src/components/ImgEditor/ImgCropper.tsx

@@ -39,9 +39,9 @@ export function ImgCropper({
 
   return (
     <Dialog open={isOpen} onClose={onClose} className="relative z-50">
-      <DialogBackdrop className="fixed inset-0 bg-black/30 data-[closed]:opacity-0" />
+      <DialogBackdrop className="fixed inset-0 bg-black/30 data-closed:opacity-0" />
       <DialogPanel
-        className={`${classes} grid grid-rows-[auto_1fr] fixed-center z-20 max-w-[90vmax] max-h-[90vmin] border-2 rounded-sm`}
+        className={`${classes} grid grid-rows-[auto_1fr] fixed-center z-20 max-w-[90vmax] max-h-[90vmin] border-2 rounded-xs`}
       >
         <div className="bg-white flex items-center justify-end gap-2 p-1">
           <button

src/components/ImgEditor/ImgEditor.tsx

@@ -97,7 +97,7 @@ function _ImgEditor(props: ControlledProps, ref: React.Ref<HTMLInputElement>) {
         data-disabled={props.disabled || props.value === "loading"}
         {...getRootProps({
           className: `relative ${overlay} ${styles.dropzone} group rounded border border-gray-l2 border-dashed 
-          focus:outline-none focus:ring-2 data-[drag="true"]:ring-2 has-[:active]:ring-2 ring-blue-d1 ring-offset-2 
+          focus:outline-hidden focus:ring-2 data-[drag="true"]:ring-2 has-active:ring-2 ring-blue-d1 ring-offset-2 
           hover:bg-blue-l5
           data-[disabled="true"]:bg-gray-l5 data-[disabled="true"]:pointer-events-none
           data-[invalid="true"]:border-red

src/components/KYCForm/KYCForm.tsx

@@ -26,7 +26,7 @@ export default function KycForm() {
           { replace: true, preventScrollReset: true }
         )
       }
-      classes="fixed-center grid z-50 isolate w-full max-w-[95vw] max-h-[95vh] sm:max-w-md overflow-y-auto scroller border border-gray-l4 bg-gray-l6 dark:bg-blue-d5 dark:text-white rounded"
+      classes="fixed-center grid z-50 isolate w-full max-w-[95vw] max-h-[95vh] sm:max-w-md overflow-y-auto scroller border border-gray-l4 bg-gray-l6 dark:bg-blue-d5 dark:text-white rounded-sm"
     >
       <Form {...init} />
     </Modal>

src/components/LoaderRing.tsx

@@ -2,7 +2,7 @@ type Classes =
   | string
   | {
       container?: string;
-      ringToColor?: "to-blue-d1" | "to-white" | "to-[--accent-primary]";
+      ringToColor?: "to-blue-d1" | "to-white" | "to-(--accent-primary)";
     };
 
 export default function LoaderRing({

src/components/Modal.tsx

@@ -9,7 +9,7 @@ interface Props extends PropsWithChildren {
 export function Modal(props: Props) {
   return (
     <Dialog open={props.open} onClose={props.onClose} className="relative z-50">
-      <DialogBackdrop className="fixed inset-0 bg-black/30 data-[closed]:opacity-0" />
+      <DialogBackdrop className="fixed inset-0 bg-black/30 data-closed:opacity-0" />
       <DialogPanel className={props.classes}>{props.children}</DialogPanel>
     </Dialog>
   );

src/components/Prompt/PromptV2.tsx

@@ -27,7 +27,7 @@ export function PromptV2({
     <Modal
       open={open ?? true}
       onClose={close}
-      classes="fixed-center z-10 grid text-navy-d4 bg-white sm:w-full w-[90vw] sm:max-w-lg rounded overflow-hidden"
+      classes="fixed-center z-10 grid text-navy-d4 bg-white sm:w-full w-[90vw] sm:max-w-lg rounded-sm overflow-hidden"
     >
       <div className="flex justify-end p-4 border-b border-gray-l4">
         <button

src/components/RichText/RichText.tsx

@@ -13,7 +13,7 @@ export const RichText = forwardRef<El, Props>(({ classes, ...props }, ref) => {
       <div
         aria-invalid={!!props.error}
         aria-disabled={props.disabled}
-        className={`relative has-[:focus-within]:ring-2 ring-blue-d1 ring-offset-1 ${style.field} ${props.readOnly ? "toolbar-hidden" : ""}`}
+        className={`relative has-focus-within:ring-2 ring-blue-d1 ring-offset-1 ${style.field} ${props.readOnly ? "toolbar-hidden" : ""}`}
       >
         <Suspense
           fallback={

src/components/RichText/richtext.css

@@ -18,20 +18,19 @@
   border-bottom: 1px solid rgba(200, 200, 200, 0.5);
 }
 
-
 .ql-toolbar button.ql-active .ql-stroke {
   fill: none;
-  @apply !stroke-blue-d1
+  stroke: var(--color-blue-d1) !important;
 }
 
 .ql-toolbar button:hover .ql-stroke {
   fill: none;
-  @apply !stroke-blue-d1
+  stroke: var(--color-blue-d1) !important;
 }
 
 .ql-toolbar .ql-stroke {
   fill: none;
-  stroke: #fff;
+  stroke: white;
 }
 
 .ql-editor {
@@ -46,3 +45,26 @@
   opacity: 0.5;
   left: 0;
 }
+
+.rich-text-toolbar {
+  & .ql-toolbar .ql-stroke {
+    fill: none;
+    stroke: var(--color-gray-d2);
+  }
+
+  &[aria-invalid="true"] {
+    border-color: var(--color-red);
+  }
+}
+.ql-toolbar {
+  &.rich-text-toolbar & .ql-stroke {
+    fill: none;
+    stroke: var(--color-gray-d2);
+  }
+}
+.ql-stroke {
+  &.rich-text-toolbar .ql-toolbar & {
+    fill: none;
+    stroke: var(--color-gray-d2);
+  }
+}

src/components/Selector/MultiSelector.tsx

@@ -70,10 +70,10 @@ function _MultiList<T extends ValKey>(
               />
             ))}
             {props.searchable ? (
-              <div className="bg-blue-l5 inline-flex items-center gap-2 text-navy-l1 dark:text-navy-l2 pl-3 rounded">
+              <div className="bg-blue-l5 inline-flex items-center gap-2 text-navy-l1 dark:text-navy-l2 pl-3 rounded-sm">
                 <Search size={20} />
                 <ComboboxInput
-                  className="appearance-none bg-transparent first:pl-3 focus:outline-none h-10"
+                  className="appearance-none bg-transparent first:pl-3 focus:outline-hidden h-10"
                   value={searchText}
                   onChange={(e) => setSearchText(e.target.value)}
                 />
@@ -87,7 +87,7 @@ function _MultiList<T extends ValKey>(
             className={`${
               props.value.length > 0
                 ? "justify-self-end dark:text-navy-l2 shrink-0"
-                : "absolute inset-0 flex justify-end items-center pr-2 rounded active:ring-2 ring-blue-d1 ring-offset-1"
+                : "absolute inset-0 flex justify-end items-center pr-2 rounded-sm active:ring-2 ring-blue-d1 ring-offset-1"
             }`}
           >
             {({ open }) => <DrawerIcon isOpen={open} size={20} className="" />}
@@ -162,7 +162,7 @@ function SelectedOption<T extends ValKey>({
   ...option
 }: SelectedProps<T>) {
   return (
-    <div className="flex items-center px-3 gap-2 h-10 bg-blue-l4 dark:bg-blue-d4 border border-gray-l4 rounded font-semibold text-navy-l1 dark:text-navy-l2 uppercase">
+    <div className="flex items-center px-3 gap-2 h-10 bg-blue-l4 dark:bg-blue-d4 border border-gray-l4 rounded-sm font-semibold text-navy-l1 dark:text-navy-l2 uppercase">
       <span className="max-w-[200px] truncate">{option.label}</span>
       <button
         type="button"

src/components/Selector/NativeSelect.tsx

@@ -41,7 +41,7 @@ export const NativeSelect = forwardRef(function Select<V extends ValKey>(
         aria-disabled={props.disabled}
         id={props.id}
         as="button"
-        className={`${styles.selectorButton} peer-focus:shadow peer-focus:shadow-red`}
+        className={`${styles.selectorButton} peer-focus:shadow-sm peer-focus:shadow-red`}
       >
         {({ open, value }) => (
           <>

src/components/Selector/Selector.tsx

@@ -40,7 +40,7 @@ function _List<T extends ValKey>(
           aria-invalid={!!props.error}
           aria-disabled={props.disabled}
           as="button"
-          className={`${cls.button} ${styles.selectorButton} peer-focus:shadow peer-focus:shadow-red`}
+          className={`${cls.button} ${styles.selectorButton} peer-focus:shadow-sm peer-focus:shadow-red`}
         >
           {({ open }) => (
             <>

src/components/Selector/constants.ts

@@ -7,7 +7,7 @@ export const styles = {
   error:
     "absolute -bottom-5 right-0 text-right text-xs text-red dark:text-red-l2",
   option:
-    "px-4 py-2 data-[selected]:bg-[--accent-secondary] hover:cursor-pointer hover:bg-[--accent-secondary]",
+    "px-4 py-2 data-selected:bg-(--accent-secondary) hover:cursor-pointer hover:bg-(--accent-secondary)",
   options:
-    "font-heading rounded-sm border border-gray-l4 absolute top-full mt-2 z-10 bg-gray-l6 dark:bg-blue-d6 w-full max-h-[10rem] overflow-y-auto scroller",
+    "font-heading rounded-xs border border-gray-l4 absolute top-full mt-2 z-10 bg-gray-l6 dark:bg-blue-d6 w-full max-h-[10rem] overflow-y-auto scroller",
 };