From dfcd1a2f290d879c7cb914193f5b636e602779d1 Mon Sep 17 00:00:00 2001
From: Gustav Larsson <gustav.larsson@gmail.com>
Date: Thu, 30 Jan 2025 14:16:33 +0100
Subject: [PATCH] Upgrade to Tailwind v4

---
 .prettierrc                                   |   3 +-
 components/AccountHoverCard.tsx               |   6 +-
 components/AccountingCategorySelect.tsx       |   6 +-
 components/Avatar.tsx                         |   2 +-
 components/ComboSelect.tsx                    |   2 +-
 components/CreateCollectiveMiniForm.tsx       |   2 +-
 components/Drawer.tsx                         |   4 +-
 components/Dropzone.tsx                       |   4 +-
 components/ExchangeRate.tsx                   |   2 +-
 components/FeedbackModal.tsx                  |   2 +-
 components/FilesViewerModal.tsx               |   8 +-
 components/GiftCard.tsx                       |   4 +-
 components/InputAmount.tsx                    |   6 +-
 components/LanguageSwitcher.tsx               |   4 +-
 components/LoginBtn.js                        |   2 +-
 components/NewsAndUpdatesModal.js             |   4 +-
 components/PasswordInput.tsx                  |   2 +-
 components/ProportionalAreaChart.tsx          |   4 +-
 components/RichTextEditor.tsx                 |   2 +-
 components/SearchTrigger.tsx                  |   4 +-
 components/SignatureInput.tsx                 |   2 +-
 components/StackedAvatars.tsx                 |   2 +-
 components/StepsProgress.js                   |   8 +-
 components/StyledButtonSet.tsx                |   2 +-
 components/StyledFilters.tsx                  |   2 +-
 components/StyledInputAmount.tsx              |   6 +-
 components/Survey.tsx                         |   2 +-
 components/Tabs.tsx                           |   4 +-
 components/agreements/Agreement.tsx           |   2 +-
 components/agreements/AgreementsTable.tsx     |   4 +-
 components/budget/ExpenseBudgetItem.js        |   4 +-
 components/budget/OrderBudgetItem.js          |   2 +-
 components/changelog/ChangelogTrigger.js      |   4 +-
 components/collective-navbar/index.js         |   6 +-
 .../contributions/ContributionDrawer.tsx      |  10 +-
 components/conversations/SmallComment.tsx     |   6 +-
 components/conversations/SmallThread.tsx      |   2 +-
 .../conversations/SmallThreadActivity.tsx     |  12 +-
 components/conversations/Thread.js            |   2 +-
 components/crowdfunding-redesign/Footer.tsx   |   6 +-
 .../FundraiserLayout.tsx                      |   8 +-
 .../crowdfunding-redesign/FundraisingPage.tsx |   4 +-
 components/crowdfunding-redesign/Header.tsx   |  18 +-
 components/crowdfunding-redesign/Tiers.tsx    |   2 +-
 .../edit/EditFundraiser.tsx                   |   2 +-
 .../edit/EditProfile.tsx                      |   2 +-
 .../crowdfunding-redesign/edit/common.tsx     |   6 +-
 .../finances/Finances.tsx                     |   2 +-
 .../finances/ProfileMetric.tsx                |   4 +-
 .../finances/TransactionGroupDetails.tsx      |   4 +-
 .../updates/UpdatesList.tsx                   |   4 +-
 components/dashboard/AccountSwitcher.tsx      |   6 +-
 components/dashboard/DashboardHeader.tsx      |   2 +-
 components/dashboard/DashboardSection.tsx     |  10 +-
 components/dashboard/EmptyResults.tsx         |   2 +-
 .../ExportHostedCollectivesCSVModal.tsx       |   6 +-
 .../dashboard/ExportTransactionsCSVModal.tsx  |   6 +-
 components/dashboard/MenuLink.tsx             |   6 +-
 components/dashboard/SideBar.tsx              |   5 +-
 .../filters/DateFilter/DateInput.tsx          |   2 +-
 .../filters/DateFilter/DateRangeInput.tsx     |   4 +-
 .../filters/DateFilter/TimezonePicker.tsx     |   4 +-
 components/dashboard/filters/EmailFilter.tsx  |   2 +-
 .../dashboard/filters/FilterDropdown.tsx      |   2 +-
 components/dashboard/filters/Pagination.tsx   |   2 +-
 components/dashboard/filters/SearchFilter.tsx |   6 +-
 .../dashboard/preview/AccountSwitcher.tsx     |   4 +-
 .../dashboard/preview/DashboardTopBar.tsx     |   4 +-
 .../GenericActivityDiffDataWithList.tsx       |   6 +-
 .../dashboard/sections/Contributors.tsx       |   2 +-
 .../sections/HostDashboardAgreements.tsx      |   2 +-
 .../sections/HostVirtualCardRequests.tsx      |   2 +-
 .../dashboard/sections/HostVirtualCards.tsx   |   2 +-
 components/dashboard/sections/Team.tsx        |   2 +-
 components/dashboard/sections/Vendors.tsx     |   2 +-
 .../accounting/AccountingCategoriesTable.tsx  |   2 +-
 .../accounting/AccountingCategoryDrawer.tsx   |  16 +-
 .../dashboard/sections/accounting/index.tsx   |   4 +-
 .../dashboard/sections/accounts/index.tsx     |   2 +-
 .../sections/collectives/AddFundsModal.tsx    |   6 +-
 .../sections/collectives/AllCollectives.tsx   |   2 +-
 .../collectives/CollectiveDetails.tsx         |  10 +-
 .../collectives/FreezeAccountModal.tsx        |   2 +-
 .../collectives/HostApplicationDrawer.tsx     |   4 +-
 .../collectives/HostApplicationRequests.tsx   |   2 +-
 .../sections/collectives/HostApplications.tsx |   2 +-
 .../collectives/HostedCollectives.tsx         |   2 +-
 .../sections/contributions/Contributions.tsx  |  18 +-
 .../contributions/CreatePendingOrderModal.tsx |   4 +-
 .../expenses/ExpensePipelineOverview.tsx      |   6 +-
 .../expenses/HostCreateExpenseModal.tsx       |   2 +-
 .../expenses/HostDashboardExpenses.tsx        |   2 +-
 .../sections/expenses/ReceivedExpenses.tsx    |   2 +-
 .../expenses/ScheduledExpensesBanner.tsx      |   2 +-
 .../sections/expenses/SubmittedExpenses.tsx   |   2 +-
 .../reports/HostExpensesReportList.tsx        |   2 +-
 .../reports/HostExpensesReportView.tsx        |   8 +-
 .../legal-documents/HostDashboardTaxForms.tsx |   2 +-
 .../LegalDocumentServiceBadge.tsx             |   2 +-
 .../LegalDocumentStatusBadge.tsx              |   2 +-
 .../legal-documents/LegalDocumentsTable.tsx   |   2 +-
 .../sections/overview/AccountTable.tsx        |   2 +-
 .../dashboard/sections/overview/Accounts.tsx  |   2 +-
 .../sections/overview/CollectiveOverview.tsx  |   8 +-
 .../sections/overview/IndividualOverview.tsx  |   4 +-
 .../dashboard/sections/overview/Metric.tsx    |   2 +-
 .../sections/overview/TimelineItem.tsx        |   4 +-
 .../reports/AccountTransactionReport.tsx      |   6 +-
 .../reports/AccountTransactionReportsList.tsx |   2 +-
 .../sections/reports/DefinitionTooltip.tsx    |   2 +-
 .../sections/reports/HostReportTabs.tsx       |   2 +-
 .../reports/HostTransactionReport.tsx         |   4 +-
 .../reports/HostTransactionReportsList.tsx    |   2 +-
 .../sections/reports/LegacyColumnRows.tsx     |   2 +-
 .../sections/reports/ReportContent.tsx        |   4 +-
 .../sections/reports/ReportPeriodSelector.tsx |   6 +-
 .../reports/legacy/HostDashboardReports.tsx   |   2 +-
 .../tax-information/TaxFormPreview.tsx        |   2 +-
 .../TaxFormTypeSelectFields.tsx               |   4 +-
 .../tax-information/TaxInformationForm.tsx    |   2 +-
 .../TaxInformationFormDialog.tsx              |   2 +-
 .../sections/tax-information/W8BenEForm.tsx   |  12 +-
 .../sections/tax-information/W8BenForm.tsx    |   4 +-
 .../sections/tax-information/W9Form.tsx       |   2 +-
 .../CSVColumnSelector.tsx                     |   8 +-
 .../FilterWithRawValueButton.tsx              |   2 +-
 .../SuggestedContributionsTable.tsx           |   2 +-
 .../TransactionsImport.tsx                    |  12 +-
 .../transactions/TransactionDrawer.tsx        |   4 +-
 .../sections/updates/SingleUpdateView.tsx     |   2 +-
 .../sections/updates/UpdateFormView.tsx       |   4 +-
 .../dashboard/sections/updates/index.tsx      |   4 +-
 .../sections/ManagePaymentMethods.tsx         |   6 +-
 .../edit-collective/sections/Webhooks.js      |   6 +-
 .../sections/fiscal-host/ActiveFiscalHost.tsx |   2 +-
 .../fiscal-host/FiscalHostOCFTransition.tsx   |  16 +-
 .../edit-collective/tiers/EditTierModal.js    |   4 +-
 components/expenses/ConfirmOCRValues.tsx      |   2 +-
 .../expenses/DeclineExpenseInviteButton.tsx   |   4 +-
 components/expenses/ExpenseForm.js            |   2 +-
 components/expenses/ExpenseItemForm.js        |   2 +-
 components/expenses/PayoutMethodData.js       |   4 +-
 .../list/SubmittedExpenseListItem.tsx         |   4 +-
 components/navigation/DrawerMenu.tsx          |   2 +-
 components/navigation/Footer.tsx              |   4 +-
 components/navigation/ProfileMenu.tsx         |   6 +-
 .../navigation/ProfileMenuMemberships.tsx     |   4 +-
 components/navigation/TopBar.tsx              |   4 +-
 components/navigation/preview/TopBar.tsx      |   8 +-
 .../onboarding-modal/OnboardingModal.js       |   4 +-
 components/orders/OrdersWithData.js           |   2 +-
 components/orders/PaymentMethodPicker.tsx     |  10 +-
 .../CreatePersonalTokenModal.js               |   2 +-
 .../personal-token/PersonalTokenSettings.js   |   2 +-
 .../search-page/SearchCollectiveCard.js       |   4 +-
 components/search/ContextPill.tsx             |   6 +-
 components/search/SearchCommand.tsx           |   4 +-
 components/search/result/CommentResult.tsx    |   2 +-
 components/search/result/ExpenseResult.tsx    |   2 +-
 components/search/result/OrderResult.tsx      |   2 +-
 .../search/result/TransactionResult.tsx       |   2 +-
 components/search/result/UpdateResult.tsx     |   2 +-
 .../submit-expense/PayoutMethodDetails.tsx    |   8 +-
 .../submit-expense/SubmitExpenseFlow.tsx      |  30 +-
 .../submit-expense/SubmitExpenseFlowSteps.tsx |   4 +-
 .../submit-expense/SubmittedExpense.tsx       |   4 +-
 .../form/AdditionalDetailsSection.tsx         |   2 +-
 .../form/ExpenseAccountItem.tsx               |   4 +-
 .../form/ExpenseCategorySection.tsx           |   2 +-
 .../form/ExpenseItemsSection.tsx              |  10 +-
 .../form/ExpensePolicyContainer.tsx           |   4 +-
 .../submit-expense/form/InviteUserOption.tsx  |   4 +-
 .../form/PayoutMethodSection.tsx              |   4 +-
 .../submit-expense/form/SummarySection.tsx    |  14 +-
 .../form/TypeOfExpenseSection.tsx             |  16 +-
 components/table/ColumnHeader.tsx             |   2 +-
 components/table/RowActionsMenu.tsx           |   2 +-
 .../transactions/TransactionsPageContent.tsx  |   4 +-
 .../DevicesSettings.tsx                       |   2 +-
 .../RecoverySettings.tsx                      |   2 +-
 .../TwoFactorAuthenticationModal.tsx          |   8 +-
 components/ui/Accordion.tsx                   |   2 +-
 components/ui/Alert.tsx                       |   4 +-
 components/ui/AlertDialog.tsx                 |   6 +-
 components/ui/Badge.tsx                       |   2 +-
 components/ui/Button.tsx                      |   2 +-
 components/ui/Card.tsx                        |   4 +-
 components/ui/Checkbox.tsx                    |   2 +-
 components/ui/Command.tsx                     |   8 +-
 components/ui/DataList.tsx                    |   2 +-
 components/ui/Dialog.tsx                      |   8 +-
 components/ui/DropdownMenu.tsx                |  12 +-
 components/ui/HoverCard.tsx                   |   2 +-
 components/ui/InfoList.tsx                    |   2 +-
 components/ui/Input.tsx                       |   6 +-
 components/ui/Label.tsx                       |   2 +-
 components/ui/Popover.tsx                     |   2 +-
 components/ui/RadioGroup.tsx                  |   8 +-
 components/ui/Select.tsx                      |  12 +-
 components/ui/Sheet.tsx                       |   4 +-
 components/ui/Stepper.tsx                     |  35 +-
 components/ui/Switch.tsx                      |   4 +-
 components/ui/Table.tsx                       |   8 +-
 components/ui/Tabs.tsx                        |   4 +-
 components/ui/Textarea.tsx                    |   4 +-
 components/ui/Toast.tsx                       |   8 +-
 components/ui/Tooltip.tsx                     |   2 +-
 components/vendors/OrganizationDetails.tsx    |   2 +-
 components/vendors/VendorDetails.tsx          |   2 +-
 components/vendors/VendorForm.tsx             |  14 +-
 .../VirtualCardRequestDrawer.tsx              |   4 +-
 .../VirtualCardRequestsTable.tsx              |   4 +-
 .../StripeVirtualCardComplianceStatement.tsx  |   2 +-
 .../virtual-cards/VirtualCardDrawer.tsx       |   4 +-
 .../virtual-cards/VirtualCardsTable.tsx       |   4 +-
 package-lock.json                             | 927 +++++++++---------
 package.json                                  |  11 +-
 pages/dashboard.tsx                           |   4 +-
 pages/preview/[collectiveSlug]/index.tsx      |  10 +-
 pages/reset-password-completed.js             |   2 +-
 pages/reset-password-sent.js                  |   2 +-
 pages/reset-password.tsx                      |   2 +-
 pages/signinLinkSent.js                       |   2 +-
 pages/staticPage.js                           |   4 +-
 pages/welcome.tsx                             |  24 +-
 postcss.config.js                             |   3 +-
 public/static/styles/app.css                  | 441 ++++++---
 tailwind.config.js                            | 112 ---
 228 files changed, 1289 insertions(+), 1234 deletions(-)
 delete mode 100644 tailwind.config.js

diff --git a/.prettierrc b/.prettierrc
index 117bdf8132c..57065c61329 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,5 +4,6 @@
   "arrowParens": "avoid",
   "printWidth": 120,
   "plugins": ["prettier-plugin-tailwindcss"],
-  "tailwindFunctions": ["clsx", "cn", "cva"]
+  "tailwindFunctions": ["clsx", "cn", "cva"],
+  "tailwindStylesheet": "./public/static/styles/app.css"
 }
diff --git a/components/AccountHoverCard.tsx b/components/AccountHoverCard.tsx
index 606dd5f4db6..94f7a04bfaf 100644
--- a/components/AccountHoverCard.tsx
+++ b/components/AccountHoverCard.tsx
@@ -259,7 +259,7 @@ type InfoItemProps = {
 const InfoItem = ({ Icon, info }: InfoItemProps) => (
   <div className="flex items-start gap-2 overflow-hidden text-xs text-muted-foreground">
     <Icon size={14} className="shrink-0" />
-    <span className="[&>a:hover]:text-primary [&>a]:text-foreground [&>a]:underline">{info}</span>
+    <span className="[&>a]:text-foreground [&>a]:underline [&>a:hover]:text-primary">{info}</span>
   </div>
 );
 
@@ -346,7 +346,7 @@ export const AccountHoverCard = ({
           </div>
 
           {account.description && (
-            <div className="line-clamp-1 whitespace-pre-wrap text-sm text-foreground">{account.description}</div>
+            <div className="line-clamp-1 text-sm whitespace-pre-wrap text-foreground">{account.description}</div>
           )}
 
           {(infoItems.length > 0 || asyncInfoItems.length > 0 || loading) && (
@@ -372,7 +372,7 @@ export const AccountHoverCard = ({
             </div>
           )}
 
-          {loading && <StyledSpinner className="absolute right-0 top-0 text-muted-foreground" />}
+          {loading && <StyledSpinner className="absolute top-0 right-0 text-muted-foreground" />}
         </div>
       </HoverCardContent>
     </HoverCard>
diff --git a/components/AccountingCategorySelect.tsx b/components/AccountingCategorySelect.tsx
index 00fe1074681..ef16426c764 100644
--- a/components/AccountingCategorySelect.tsx
+++ b/components/AccountingCategorySelect.tsx
@@ -101,7 +101,7 @@ const getSelectionInfoForLabel = (
   if (rolesHaveSelectedCategory.some(Boolean)) {
     const rolesToDisplay = roles.filter((_, index) => rolesHaveSelectedCategory[index]);
     return (
-      <span className="text-xs font-normal italic text-muted-foreground">
+      <span className="text-xs font-normal text-muted-foreground italic">
         <FormattedMessage
           id="accountingCategory.selectedBy"
           defaultMessage="Selected by {nbRoles, select, 1 {{role1}} 2 {{role1} and {role2}} other {{role1}, {role2} and {role3}}}."
@@ -392,7 +392,7 @@ const AccountingCategorySelect = ({
               disabled={disabled}
             >
               <span
-                className={cn('mr-3 flex-grow truncate text-start text-sm', {
+                className={cn('mr-3 grow truncate text-start text-sm', {
                   'text-gray-400': isUndefined(selectedCategory),
                 })}
               >
@@ -502,7 +502,7 @@ const AccountingCategorySelect = ({
                         role="button"
                         onKeyDown={e => e.key === 'Enter' && triggerChange(option.value)}
                         onClick={() => triggerChange(option.value)}
-                        className="cursor-pointer text-[--primary-color-600] underline hover:opacity-80"
+                        className="cursor-pointer text-(--primary-color-600) underline hover:opacity-80"
                         aria-label={intl.formatMessage(
                           { defaultMessage: 'Select {name}', id: 'G65XME' },
                           { name: option.value.name },
diff --git a/components/Avatar.tsx b/components/Avatar.tsx
index 8f95e163471..d2033ce1793 100644
--- a/components/Avatar.tsx
+++ b/components/Avatar.tsx
@@ -48,7 +48,7 @@ const StyledAvatar = styled(Flex).attrs<StyledAvatarProps>(props => ({
   overflow: hidden;
   width: 64px;
   height: 64px;
-  flex-shrink: 0;
+  shrink: 0;
   ${color}
   ${space}
   ${layout}
diff --git a/components/ComboSelect.tsx b/components/ComboSelect.tsx
index c39421c43c5..ef20123a0be 100644
--- a/components/ComboSelect.tsx
+++ b/components/ComboSelect.tsx
@@ -96,7 +96,7 @@ export function ComboSelect(props: ComboSelectProps) {
           <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
+      <PopoverContent className="w-(--radix-popover-trigger-width) p-0">
         <Command>
           <CommandInput placeholder={props.inputPlaceholder || intl.formatMessage(Messages.inputPlaceholder)} />
           <CommandList>
diff --git a/components/CreateCollectiveMiniForm.tsx b/components/CreateCollectiveMiniForm.tsx
index 53326facfe0..cbd43ca4dca 100644
--- a/components/CreateCollectiveMiniForm.tsx
+++ b/components/CreateCollectiveMiniForm.tsx
@@ -299,7 +299,7 @@ const CreateCollectiveMiniForm = ({
         return (
           <Form data-cy="create-collective-mini-form" className="flex h-full flex-col overflow-y-hidden">
             <H5 fontWeight={600}>{CreateNewMessages[type] ? formatMessage(CreateNewMessages[type]) : null}</H5>
-            <div className="w-full flex-grow overflow-y-auto pb-4">
+            <div className="w-full grow overflow-y-auto pb-4">
               {(isUser || isOrganization) && !noAdminFields && (
                 <StyledInputField
                   name={isOrganization ? 'members[0].member.email' : 'email'}
diff --git a/components/Drawer.tsx b/components/Drawer.tsx
index 7706103a9c7..180d6d27bb3 100644
--- a/components/Drawer.tsx
+++ b/components/Drawer.tsx
@@ -67,7 +67,7 @@ export function Drawer({
           <div className="relative flex-1 overflow-y-scroll px-4 py-6 sm:px-6">
             {showCloseButton && (
               <StyledRoundButton
-                className="absolute right-5 top-5"
+                className="absolute top-5 right-5"
                 size={36}
                 type="button"
                 isBorderless
@@ -82,7 +82,7 @@ export function Drawer({
           </div>
           {showActionsContainer && (
             <div
-              className="flex flex-shrink-0 flex-wrap justify-between gap-2 border-t p-4"
+              className="flex shrink-0 flex-wrap justify-between gap-2 border-t p-4"
               ref={ref => setDrawerActionsContainer(ref)}
             />
           )}
diff --git a/components/Dropzone.tsx b/components/Dropzone.tsx
index dc831397885..e346906961b 100644
--- a/components/Dropzone.tsx
+++ b/components/Dropzone.tsx
@@ -122,7 +122,7 @@ const Dropzone = ({
     <div
       className={cn(
         'group relative flex h-full w-full cursor-pointer place-items-center overflow-hidden rounded-lg border-2 border-dashed border-muted-foreground/25 text-center transition hover:bg-muted/25',
-        'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden',
         '[&>img]:max-h-full [&>img]:max-w-full',
         isDragActive && 'border-muted-foreground/50',
         props.disabled && 'pointer-events-none opacity-60',
@@ -278,7 +278,7 @@ const Dropzone = ({
         </div>
       )}
       {value && showActions && (
-        <div className="absolute right-3 top-3">
+        <div className="absolute top-3 right-3">
           <Button
             variant="outline"
             size="xs"
diff --git a/components/ExchangeRate.tsx b/components/ExchangeRate.tsx
index fca876461fe..c7cdf093d43 100644
--- a/components/ExchangeRate.tsx
+++ b/components/ExchangeRate.tsx
@@ -40,7 +40,7 @@ export const ExchangeRate = ({
   return (
     <Tooltip>
       <TooltipTrigger data-cy={dataCy}>
-        <div className={cn('flex items-center whitespace-nowrap text-xs text-neutral-700', className)}>
+        <div className={cn('flex items-center text-xs whitespace-nowrap text-neutral-700', className)}>
           <InfoIcon
             size={14}
             className={cn({
diff --git a/components/FeedbackModal.tsx b/components/FeedbackModal.tsx
index eb8ff946dde..9175e019402 100644
--- a/components/FeedbackModal.tsx
+++ b/components/FeedbackModal.tsx
@@ -92,7 +92,7 @@ export function FeedbackModal({
                     />
                     <label
                       htmlFor="okToContact"
-                      className="text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                      className="text-sm leading-none font-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                     >
                       <FormattedMessage defaultMessage="It's OK to contact me for follow up questions." id="OSMRoO" />
                     </label>
diff --git a/components/FilesViewerModal.tsx b/components/FilesViewerModal.tsx
index 042aa1e0880..f7a59007401 100644
--- a/components/FilesViewerModal.tsx
+++ b/components/FilesViewerModal.tsx
@@ -200,7 +200,7 @@ export default function FilesViewerModal({
       }}
     >
       <DialogPrimitive.Content
-        className="fixed left-0 top-0 z-[3000] flex h-screen w-screen items-center justify-center xl:w-[calc(100vw-var(--drawer-width,0px))]"
+        className="fixed top-0 left-0 z-3000 flex h-screen w-screen items-center justify-center xl:w-[calc(100vw-var(--drawer-width,0px))]"
         onInteractOutside={e => {
           if (allowOutsideInteraction) {
             e.preventDefault();
@@ -212,13 +212,13 @@ export default function FilesViewerModal({
           // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
           <div
             className={clsx(
-              'absolute inset-0 z-[1500] backdrop-blur-sm',
+              'absolute inset-0 z-1500 backdrop-blur-xs',
               open ? 'animate-in fade-in-0' : 'animate-out fade-out-0',
             )}
             onClick={onClose}
           />
         ) : (
-          <DialogOverlay onClick={onClose} className="absolute z-[1500] backdrop-blur-sm" />
+          <DialogOverlay onClick={onClose} className="absolute z-1500 backdrop-blur-xs" />
         )}
 
         <Header>
@@ -300,7 +300,7 @@ export default function FilesViewerModal({
 
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div
-          className="z-[3000] flex max-h-screen w-full justify-center overflow-y-auto px-4 py-16"
+          className="z-3000 flex max-h-screen w-full justify-center overflow-y-auto px-4 py-16"
           onClick={e => {
             if (e.target === e.currentTarget) {
               onClose();
diff --git a/components/GiftCard.tsx b/components/GiftCard.tsx
index a22755ccc92..878ce33517f 100644
--- a/components/GiftCard.tsx
+++ b/components/GiftCard.tsx
@@ -83,9 +83,9 @@ const GiftCard = ({
           </p>
         </div>
       )}
-      <div className="absolute bottom-[8px] right-[8px] md:bottom-[12px] md:right-[12px]">
+      <div className="absolute right-[8px] bottom-[8px] md:right-[12px] md:bottom-[12px]">
         <div className="AmountCurrency flex items-start">
-          <span className="text-[2.5rem] font-bold leading-[2.5rem] text-[#313233]">
+          <span className="text-[2.5rem] leading-[2.5rem] font-bold text-[#313233]">
             <Currency value={amount} currency={currency} precision="auto" />
           </span>
           <div className="ml-1">
diff --git a/components/InputAmount.tsx b/components/InputAmount.tsx
index cde0dc38444..ef735abe827 100644
--- a/components/InputAmount.tsx
+++ b/components/InputAmount.tsx
@@ -80,10 +80,10 @@ const ConvertedAmountInput = ({ inputId, exchangeRate, onChange, baseAmount, min
   };
 
   return (
-    <div className="flex flex-auto whitespace-nowrap px-2 text-sm text-muted-foreground">
+    <div className="flex flex-auto px-2 text-sm whitespace-nowrap text-muted-foreground">
       <span className="mr-1 align-middle">= {exchangeRate.toCurrency} </span>
       <input
-        className="w-full flex-auto rounded px-[2px] [appearance:textfield] focus:text-foreground [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        className="w-full flex-auto [appearance:textfield] rounded px-[2px] focus:text-foreground [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
         style={{ minWidth }}
         name={inputId}
         id={inputId}
@@ -210,7 +210,7 @@ const InputAmount = ({
       disabled={disabled}
       prepend={
         !hasCurrencyPicker ? (
-          <div className="flex items-center whitespace-nowrap bg-neutral-50 p-2 text-sm text-neutral-800">
+          <div className="flex items-center bg-neutral-50 p-2 text-sm whitespace-nowrap text-neutral-800">
             {formatCurrencyName(currency, currencyDisplay)}
           </div>
         ) : (
diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx
index 106447a4722..77729b6d44e 100644
--- a/components/LanguageSwitcher.tsx
+++ b/components/LanguageSwitcher.tsx
@@ -36,7 +36,7 @@ export function LanguageSwitcher() {
           <TooltipTrigger asChild>
             <SelectTrigger data-cy="language-switcher">
               <div className="flex items-center gap-2 overflow-hidden">
-                <LanguagesIcon className="flex-shrink-0" size={16} />
+                <LanguagesIcon className="shrink-0" size={16} />
                 <span className="truncate">
                   <SelectValue
                     aria-label={defaultLanguage.label}
@@ -50,7 +50,7 @@ export function LanguageSwitcher() {
           <SelectContent className="relative max-h-80 max-w-full">
             {languageOptions.map(option => (
               <SelectItem key={option.value} value={option.value} data-cy="language-option">
-                <div className="flex max-w-[--radix-popper-anchor-width] items-center gap-1">
+                <div className="flex max-w-(--radix-popper-anchor-width) items-center gap-1">
                   <span className="truncate">{option.label}</span>
                   <span>({option.completion})</span>
                 </div>
diff --git a/components/LoginBtn.js b/components/LoginBtn.js
index 7d3eaefae55..f7397e2a514 100644
--- a/components/LoginBtn.js
+++ b/components/LoginBtn.js
@@ -45,7 +45,7 @@ class LoginBtn extends React.Component {
           this.props.loadingLoggedInUser ? 'h-8 w-8' : 'h-8 px-4',
           this.props.asLink
             ? 'inline'
-            : 'inline-flex items-center justify-center whitespace-nowrap rounded-full border text-sm',
+            : 'inline-flex items-center justify-center rounded-full border text-sm whitespace-nowrap',
         )}
       >
         {this.props.loadingLoggedInUser ? (
diff --git a/components/NewsAndUpdatesModal.js b/components/NewsAndUpdatesModal.js
index 0932024efe1..466a1793639 100644
--- a/components/NewsAndUpdatesModal.js
+++ b/components/NewsAndUpdatesModal.js
@@ -57,7 +57,7 @@ const renderStyledCarousel = (data, loading, error, onClose) => {
                 {update.title}
               </P>
             </div>
-            <div className="flex pb-4 pt-2">
+            <div className="flex pt-2 pb-4">
               <StyledLink
                 onClick={onClose}
                 as={Link}
@@ -82,7 +82,7 @@ const renderStyledCarousel = (data, loading, error, onClose) => {
                 />
               </div>
             </div>
-            <div className="flex pb-4 pt-1">
+            <div className="flex pt-1 pb-4">
               <StyledLink
                 onClick={onClose}
                 as={Link}
diff --git a/components/PasswordInput.tsx b/components/PasswordInput.tsx
index d2011febbf0..2e001b7070a 100644
--- a/components/PasswordInput.tsx
+++ b/components/PasswordInput.tsx
@@ -27,7 +27,7 @@ export function PasswordInput(inputProps: Omit<React.ComponentProps<typeof Input
         type="button"
         variant="ghost"
         size="icon"
-        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+        className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
         onClick={togglePasswordVisibility}
         aria-label={showPassword ? 'Hide password' : 'Show password'}
       >
diff --git a/components/ProportionalAreaChart.tsx b/components/ProportionalAreaChart.tsx
index 1592f0dad04..e2ece8661a2 100644
--- a/components/ProportionalAreaChart.tsx
+++ b/components/ProportionalAreaChart.tsx
@@ -32,8 +32,8 @@ const Label = styled.div`
 
 const Area = styled.div<{ percentage: string } & ColorProps>`
   padding: 12px 8px;
-  flex-shrink: 0;
-  flex-grow: 1;
+  shrink: 0;
+  grow: 1;
   flex-basis: ${props => props.percentage};
   ${color}
 `;
diff --git a/components/RichTextEditor.tsx b/components/RichTextEditor.tsx
index 96524b5ddee..7fb94be7f5a 100644
--- a/components/RichTextEditor.tsx
+++ b/components/RichTextEditor.tsx
@@ -714,7 +714,7 @@ export default class RichTextEditor extends React.Component<RichTextEditorProps,
 
         <input id={this.state.id} value={this.state.value} type="hidden" name={inputName} disabled={disabled} />
         <HTMLContent fontSize={fontSize}>
-          <div className="relative focus-visible:[&>_trix-editor]:outline-none">
+          <div className="relative [&>_trix-editor]:focus-visible:outline-hidden">
             {React.createElement('trix-editor', {
               ref: this.editorRef,
               input: this.state.id,
diff --git a/components/SearchTrigger.tsx b/components/SearchTrigger.tsx
index 76c5e952fe0..3bb1cadc2ce 100644
--- a/components/SearchTrigger.tsx
+++ b/components/SearchTrigger.tsx
@@ -22,11 +22,11 @@ const SearchTrigger = ({ setShowSearchModal }) => {
   const useSearchCommandMenu = LoggedInUser?.hasPreviewFeatureEnabled(PREVIEW_FEATURE_KEYS.SEARCH_COMMAND);
   return (
     <button
-      className="relative flex h-8 w-8 shrink items-center justify-center gap-1.5 rounded-full border text-slate-500 ring-black ring-offset-2 hover:bg-slate-50 focus:outline-none focus-visible:ring-2 lg:w-auto lg:justify-start lg:px-2 lg:pr-4"
+      className="relative flex h-8 w-8 shrink items-center justify-center gap-1.5 rounded-full border text-slate-500 ring-black ring-offset-2 hover:bg-slate-50 focus:outline-hidden focus-visible:ring-2 lg:w-auto lg:justify-start lg:px-2 lg:pr-4"
       onClick={() => setShowSearchModal(true)}
     >
       <Search size={16} />
-      <span className={clsx('hidden whitespace-nowrap text-sm lg:block', useSearchCommandMenu && 'pr-12')}>
+      <span className={clsx('hidden text-sm whitespace-nowrap lg:block', useSearchCommandMenu && 'pr-12')}>
         {useSearchCommandMenu ? (
           <FormattedMessage
             defaultMessage="Type {slash} to search..."
diff --git a/components/SignatureInput.tsx b/components/SignatureInput.tsx
index 7af8d4a9fff..004d5b9c81b 100644
--- a/components/SignatureInput.tsx
+++ b/components/SignatureInput.tsx
@@ -73,7 +73,7 @@ export const SignatureInput = ({ isSigned, signerName, onChange, values, error }
       ) : (
         <div className={cn(containerClassName, 'p-2')}>
           <SignatureWithCustomFont signerName={signerName} maxSize={Math.min(width, height)} />
-          <div className="absolute right-3 top-3">
+          <div className="absolute top-3 right-3">
             <Button variant="outline" size="sm" onClick={() => onChange(false)}>
               <FormattedMessage defaultMessage="Clear" id="/GCoTA" />
             </Button>
diff --git a/components/StackedAvatars.tsx b/components/StackedAvatars.tsx
index b1efe71c827..9bfed89689f 100644
--- a/components/StackedAvatars.tsx
+++ b/components/StackedAvatars.tsx
@@ -23,7 +23,7 @@ const StackedAvatars = ({
   return (
     <div className="flex items-center">
       {displayed.map(account => (
-        <div key={account.id || account.slug} className="flex items-center first:!ml-0" style={{ marginLeft }}>
+        <div key={account.id || account.slug} className="flex items-center first:ml-0!" style={{ marginLeft }}>
           <LinkCollective
             collective={account}
             withHoverCard={Boolean(withHoverCard)}
diff --git a/components/StepsProgress.js b/components/StepsProgress.js
index 4917ab06017..fd560c598df 100644
--- a/components/StepsProgress.js
+++ b/components/StepsProgress.js
@@ -121,8 +121,8 @@ const SeparatorLine = styled(props => (
 ))`
   height: 100%;
   z-index: 1;
-  flex-grow: 1;
-  flex-shrink: 1;
+  grow: 1;
+  shrink: 1;
   line {
     stroke-width: 1;
     stroke: #c4c7cc;
@@ -158,7 +158,7 @@ const StepsOuter = styled(Flex)`
 `;
 
 const StepsMobileLeft = styled(Box)`
-  flex-grow: 2;
+  grow: 2;
   flex-direction: column;
 `;
 
@@ -168,7 +168,7 @@ const StepsMobileRight = styled(Flex)`
   height: 56px;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  shrink: 0;
   position: relative;
 `;
 
diff --git a/components/StyledButtonSet.tsx b/components/StyledButtonSet.tsx
index b22653386d6..9a3d2304156 100644
--- a/components/StyledButtonSet.tsx
+++ b/components/StyledButtonSet.tsx
@@ -17,7 +17,7 @@ type ButtonItemProps = {
 const ButtonItem = styled(StyledButton)<ButtonItemProps>`
   border-radius: 0;
   line-height: 1.5;
-  flex-grow: 1;
+  grow: 1;
   border-color: ${themeGet('colors.black.300')};
   transition:
     color 0.2s,
diff --git a/components/StyledFilters.tsx b/components/StyledFilters.tsx
index d59bc625796..01b3004b2c1 100644
--- a/components/StyledFilters.tsx
+++ b/components/StyledFilters.tsx
@@ -44,7 +44,7 @@ const ButtonContainer = styled.span<{ flexGrow: FlexGrowProps['flexGrow'] }>`
   ${props =>
     props.flexGrow &&
     css`
-      flex-grow: ${props.flexGrow};
+      grow: ${props.flexGrow};
     `}
 `;
 
diff --git a/components/StyledInputAmount.tsx b/components/StyledInputAmount.tsx
index 4b7fd325ae4..95027576c04 100644
--- a/components/StyledInputAmount.tsx
+++ b/components/StyledInputAmount.tsx
@@ -81,10 +81,10 @@ const ConvertedAmountInput = ({ inputId, exchangeRate, onChange, baseAmount, min
   };
 
   return (
-    <div className="flex flex-auto whitespace-nowrap px-2 text-sm text-neutral-500">
+    <div className="flex flex-auto px-2 text-sm whitespace-nowrap text-neutral-500">
       <span className="mr-1 align-middle">= {exchangeRate.toCurrency} </span>
       <input
-        className="w-full flex-auto rounded px-[2px] [appearance:textfield] focus:text-neutral-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        className="w-full flex-auto [appearance:textfield] rounded px-[2px] focus:text-neutral-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
         style={{ minWidth }}
         name={inputId}
         id={inputId}
@@ -217,7 +217,7 @@ const StyledInputAmount = ({
     >
       <div className="flex flex-auto basis-1/2">
         {!hasCurrencyPicker ? (
-          <div className="flex items-center whitespace-nowrap bg-neutral-50 p-2 text-sm text-neutral-800">
+          <div className="flex items-center bg-neutral-50 p-2 text-sm whitespace-nowrap text-neutral-800">
             {formatCurrencyName(currency, currencyDisplay)}
           </div>
         ) : (
diff --git a/components/Survey.tsx b/components/Survey.tsx
index 5939a2a7edb..20c9f3bbca6 100644
--- a/components/Survey.tsx
+++ b/components/Survey.tsx
@@ -126,7 +126,7 @@ export function Survey({
                 />
                 <label
                   htmlFor="okToContact"
-                  className="text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  className="text-sm leading-none font-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                 >
                   <FormattedMessage defaultMessage="It's OK to contact me for follow up questions." id="OSMRoO" />
                 </label>
diff --git a/components/Tabs.tsx b/components/Tabs.tsx
index f8dc4e4441c..6d53a624205 100644
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -75,7 +75,7 @@ const Tabs = ({ tabs, selectedId, onChange, ...props }: TabsProps) => {
               key={tab.id}
               onClick={() => onChange?.(tab.id)}
               className={clsx(
-                'ring-ringtransition-colors flex items-center justify-between gap-2 whitespace-nowrap rounded-md px-2 py-1 ring-inset focus:outline-none focus-visible:ring-2',
+                'ring-ringtransition-colors flex items-center justify-between gap-2 rounded-md px-2 py-1 whitespace-nowrap ring-inset focus:outline-hidden focus-visible:ring-2',
                 selected ? 'bg-primary/10' : 'hover:border-border hover:text-foreground/80',
               )}
             >
@@ -99,7 +99,7 @@ const Tabs = ({ tabs, selectedId, onChange, ...props }: TabsProps) => {
               type="button"
               onClick={() => onChange?.(tab.id)}
               className={clsx(
-                'flex gap-3 whitespace-nowrap border-b-2 px-1 pb-4 pt-2 text-sm font-medium ring-inset ring-ring transition-colors focus:outline-none focus-visible:ring-2',
+                'flex gap-3 border-b-2 px-1 pt-2 pb-4 text-sm font-medium whitespace-nowrap ring-ring transition-colors ring-inset focus:outline-hidden focus-visible:ring-2',
                 selected
                   ? 'border-primary text-primary'
                   : 'border-transparent text-muted-foreground hover:border-border hover:text-foreground/80',
diff --git a/components/agreements/Agreement.tsx b/components/agreements/Agreement.tsx
index b6aaf364dde..7ae3e17583f 100644
--- a/components/agreements/Agreement.tsx
+++ b/components/agreements/Agreement.tsx
@@ -65,7 +65,7 @@ export default function Agreement({ agreement, openFileViewer = undefined }: Agr
             agreement.expiresAt ? (
               <DateTime value={agreement.expiresAt} />
             ) : (
-              <span className="italic text-slate-500">
+              <span className="text-slate-500 italic">
                 <FormattedMessage defaultMessage="Never" id="du1laW" />
               </span>
             )
diff --git a/components/agreements/AgreementsTable.tsx b/components/agreements/AgreementsTable.tsx
index 24703adfff4..a95e60b519b 100644
--- a/components/agreements/AgreementsTable.tsx
+++ b/components/agreements/AgreementsTable.tsx
@@ -64,7 +64,7 @@ const columns: ColumnDef<Agreement>[] = [
           <DateTime value={expiresAt} dateStyle="medium" />
         </span>
       ) : (
-        <span className="italic text-slate-500">
+        <span className="text-slate-500 italic">
           <FormattedMessage defaultMessage="Never" id="du1laW" />
         </span>
       );
@@ -89,7 +89,7 @@ const columns: ColumnDef<Agreement>[] = [
             size={32}
             borderRadius="8px"
             openFileViewer={() => meta?.onFilePreview(agreement)}
-            className="hover:shadow"
+            className="hover:shadow-sm"
           />
         </div>
       );
diff --git a/components/budget/ExpenseBudgetItem.js b/components/budget/ExpenseBudgetItem.js
index 64efd96d302..cd0eb3cd66f 100644
--- a/components/budget/ExpenseBudgetItem.js
+++ b/components/budget/ExpenseBudgetItem.js
@@ -148,7 +148,7 @@ const ExpenseBudgetItem = ({
       useDrawer={useDrawer}
     >
       <div className="mb-5 flex flex-wrap items-start justify-end gap-3">
-        <div className="flex flex-grow gap-3">
+        <div className="flex grow gap-3">
           <Box>
             {isLoading ? (
               <LoadingPlaceholder width={40} height={40} />
@@ -391,7 +391,7 @@ const ExpenseBudgetItem = ({
         </div>
       </div>
       <div className="mt-2 flex flex-wrap items-end justify-end gap-4">
-        <div className="w-full sm:flex sm:w-fit sm:flex-grow">
+        <div className="w-full sm:flex sm:w-fit sm:grow">
           {isAdminView || isSubmitterView ? (
             <div className="mx-4 grid grid-cols-2 gap-x-6 gap-y-1 sm:mx-0 sm:grid-flow-col sm:gap-y-0">
               <div>
diff --git a/components/budget/OrderBudgetItem.js b/components/budget/OrderBudgetItem.js
index 597b2556da9..fc6c9590b32 100644
--- a/components/budget/OrderBudgetItem.js
+++ b/components/budget/OrderBudgetItem.js
@@ -43,7 +43,7 @@ const ButtonsContainer = styled.div.attrs({ 'data-cy': 'order-actions' })`
   display: flex;
   flex-wrap: wrap;
   margin-top: 8px;
-  flex-grow: 1;
+  grow: 1;
   transition: opacity 0.05s;
   justify-content: flex-end;
 
diff --git a/components/changelog/ChangelogTrigger.js b/components/changelog/ChangelogTrigger.js
index f6bfe021b5e..16b5708201c 100644
--- a/components/changelog/ChangelogTrigger.js
+++ b/components/changelog/ChangelogTrigger.js
@@ -37,11 +37,11 @@ const ChangelogTrigger = ({ setShowNewsAndUpdates, setChangelogViewDate }) => {
   return (
     <Tooltip>
       <TooltipTrigger
-        className="relative flex h-8 w-8 items-center justify-center rounded-full border text-slate-500 ring-black ring-offset-2 hover:bg-slate-50 focus:outline-none focus-visible:ring-2"
+        className="relative flex h-8 w-8 items-center justify-center rounded-full border text-slate-500 ring-black ring-offset-2 hover:bg-slate-50 focus:outline-hidden focus-visible:ring-2"
         onClick={handleShowNewUpdates}
       >
         <Megaphone size={18} />
-        {!hasSeenNewUpdates && <div className="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-primary" />}
+        {!hasSeenNewUpdates && <div className="absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full bg-primary" />}
       </TooltipTrigger>
       <TooltipContent>
         <FormattedMessage
diff --git a/components/collective-navbar/index.js b/components/collective-navbar/index.js
index c5025c76389..ba9b150f25f 100644
--- a/components/collective-navbar/index.js
+++ b/components/collective-navbar/index.js
@@ -165,13 +165,13 @@ const CollectiveName = styled(LinkCollective).attrs({
 const CategoriesContainer = styled(Container)`
   background-color: #ffffff;
   max-height: calc(100vh - 70px);
-  flex-shrink: 2;
-  flex-grow: 1;
+  shrink: 2;
+  grow: 1;
   overflow: auto;
 
   @media screen and (max-width: 40em) {
     max-height: none;
-    flex-shrink: 0;
+    shrink: 0;
   }
 
   @media screen and (min-width: 40em) and (max-width: 64em) {
diff --git a/components/contributions/ContributionDrawer.tsx b/components/contributions/ContributionDrawer.tsx
index 3529ddb4033..f9c3dbfd6d7 100644
--- a/components/contributions/ContributionDrawer.tsx
+++ b/components/contributions/ContributionDrawer.tsx
@@ -293,7 +293,7 @@ export function ContributionDrawer(props: ContributionDrawerProps) {
             )
           }
         />
-        <div className="flex-grow overflow-auto px-8 py-4">
+        <div className="grow overflow-auto px-8 py-4">
           {query.error ? (
             <MessageBoxGraphqlError error={query.error} />
           ) : (
@@ -323,7 +323,7 @@ export function ContributionDrawer(props: ContributionDrawerProps) {
               <div className="text-sm">
                 <InfoList className="mb-6 sm:grid-cols-2">
                   <InfoListItem
-                    className="border-b border-t-0"
+                    className="border-t-0 border-b"
                     title={<FormattedMessage defaultMessage="Contributor" id="Contributor" />}
                     value={
                       isLoading ? (
@@ -346,7 +346,7 @@ export function ContributionDrawer(props: ContributionDrawerProps) {
                   />
 
                   <InfoListItem
-                    className="border-b border-t-0"
+                    className="border-t-0 border-b"
                     title={<FormattedMessage defaultMessage="Collective" id="Collective" />}
                     value={
                       isLoading ? (
@@ -525,10 +525,10 @@ export function ContributionDrawer(props: ContributionDrawerProps) {
 
                 <div>
                   <div className="flex items-center justify-between gap-2 py-4">
-                    <div className="text-slate-80 w-fit text-base font-bold leading-6">
+                    <div className="text-slate-80 w-fit text-base leading-6 font-bold">
                       <FormattedMessage defaultMessage="Related Activity" id="LP8cIK" />
                     </div>
-                    <hr className="flex-grow border-neutral-300" />
+                    <hr className="grow border-neutral-300" />
                     <Button
                       asChild
                       variant="outline"
diff --git a/components/conversations/SmallComment.tsx b/components/conversations/SmallComment.tsx
index 1ae20c53838..261252c3774 100644
--- a/components/conversations/SmallComment.tsx
+++ b/components/conversations/SmallComment.tsx
@@ -33,18 +33,18 @@ export default function SmallComment(props: CommentProps) {
       data-cy="comment"
       id={anchorHash}
     >
-      <div className="timeline-separator absolute bottom-0 left-11 right-0 border-b" />
+      <div className="timeline-separator absolute right-0 bottom-0 left-11 border-b" />
       <div className="flex justify-between">
         <div className="flex gap-4">
           <div className="relative">
-            <div className={clsx('timeline-indicator absolute bottom-[-16px] left-[20px] top-[-16px] border-l')} />
+            <div className={clsx('timeline-indicator absolute top-[-16px] bottom-[-16px] left-[20px] border-l')} />
             <AccountHoverCard
               account={comment.fromAccount}
               trigger={
                 <div className="relative">
                   <Avatar collective={comment.fromAccount} radius={40} />
                   {isPrivateNote && (
-                    <div className="absolute bottom-[-4px] right-[-4px] flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow">
+                    <div className="absolute right-[-4px] bottom-[-4px] flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow-sm">
                       <NotepadText className="text-amber-500" size={13} />
                     </div>
                   )}
diff --git a/components/conversations/SmallThread.tsx b/components/conversations/SmallThread.tsx
index 558fb50652c..d5f8c838997 100644
--- a/components/conversations/SmallThread.tsx
+++ b/components/conversations/SmallThread.tsx
@@ -79,7 +79,7 @@ export default function SmallThread(props: SmallThreadProps) {
 
             <Avatar collective={LoggedInUser.collective} radius={40} />
           </div>
-          <div className="flex-grow">
+          <div className="grow">
             <CommentForm
               {...props.CommentEntity}
               submitButtonJustify="end"
diff --git a/components/conversations/SmallThreadActivity.tsx b/components/conversations/SmallThreadActivity.tsx
index f2f9b826e0b..5d663b939a8 100644
--- a/components/conversations/SmallThreadActivity.tsx
+++ b/components/conversations/SmallThreadActivity.tsx
@@ -35,32 +35,32 @@ export default function SmallThreadActivity(props: SmallThreadActivityProps) {
       className="relative w-full border-slate-200 px-6 py-4 first:border-none first:pt-0 [&:first-child_.timeline-indicator]:top-0 [&:last-child_.timeline-indicator]:-bottom-4 [&:last-child_.timeline-separator]:hidden"
       data-cy="activity"
     >
-      <div className="timeline-separator absolute bottom-0 left-11 right-0 border-b" />
+      <div className="timeline-separator absolute right-0 bottom-0 left-11 border-b" />
       <div className="flex justify-between">
         <div className="flex gap-4">
           <div className="relative">
-            <div className="timeline-indicator absolute -bottom-4 -top-4 left-5 -z-10 border-l" />
+            <div className="timeline-indicator absolute -top-4 -bottom-4 left-5 -z-10 border-l" />
             {props.activity.individual ? (
               <AccountHoverCard
                 account={props.activity.individual}
                 trigger={
                   <div className="relative">
                     <Avatar collective={props.activity.individual} radius={40} />
-                    <div className="absolute -bottom-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-white shadow">
+                    <div className="absolute -right-1 -bottom-1 flex h-5 w-5 items-center justify-center rounded-full bg-white shadow-sm">
                       {getActivityIcon(props.activity, theme, 12)}
                     </div>
                   </div>
                 }
               />
             ) : (
-              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white shadow">
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-sm">
                 {getActivityIcon(props.activity, theme, 12)}
               </div>
             )}
           </div>
           <div>
             {props.activity.individual && (
-              <div className="mb-1 text-sm font-medium leading-5">{props.activity.individual.name}</div>
+              <div className="mb-1 text-sm leading-5 font-medium">{props.activity.individual.name}</div>
             )}
             <p className="truncate text-xs text-muted-foreground">
               <FormattedMessage
@@ -70,7 +70,7 @@ export default function SmallThreadActivity(props: SmallThreadActivityProps) {
               />
             </p>
             {message ? (
-              <div className="mt-4 whitespace-pre-line text-sm">
+              <div className="mt-4 text-sm whitespace-pre-line">
                 <div
                   className="font-medium"
                   style={{
diff --git a/components/conversations/Thread.js b/components/conversations/Thread.js
index d48cea2e11b..a59b4262e1e 100644
--- a/components/conversations/Thread.js
+++ b/components/conversations/Thread.js
@@ -67,7 +67,7 @@ const Thread = ({
                 </Box>
                 <Container width="1px" height="100%" background="#E8E9EB" />
               </Flex>
-              <div className="flex-grow p-4 pl-0">
+              <div className="grow p-4 pl-0">
                 <Comment
                   comment={item}
                   canDelete={isAdmin || Boolean(LoggedInUser && LoggedInUser.canEditComment(item))}
diff --git a/components/crowdfunding-redesign/Footer.tsx b/components/crowdfunding-redesign/Footer.tsx
index 25a8d835791..a17c3fb9c20 100644
--- a/components/crowdfunding-redesign/Footer.tsx
+++ b/components/crowdfunding-redesign/Footer.tsx
@@ -8,17 +8,17 @@ export const Footer = ({ account }) => {
   const mainAccount = account?.parent ?? account;
   return (
     <footer className="border-t px-6 py-12">
-      <div className="mx-auto max-w-screen-xl space-y-8">
+      <div className="mx-auto max-w-(--breakpoint-xl) space-y-8">
         <div className="flex justify-between text-sm">
           <Link href={`/preview/${mainAccount?.slug}`} className="flex items-center gap-2">
-            <Avatar className="border-2 border-white bg-white shadow-sm" radius={28} collective={mainAccount} />{' '}
+            <Avatar className="border-2 border-white bg-white shadow-xs" radius={28} collective={mainAccount} />{' '}
             <span className="">{mainAccount?.name}</span>
           </Link>
           {account?.host && account.host.slug !== mainAccount?.slug && (
             <div className="flex flex-col items-end gap-1 text-right text-sm">
               <span className="text-muted-foreground">{mainAccount?.name} is fiscally hosted by</span>
               <div className="inline-flex items-center gap-2 align-middle">
-                <Avatar className="border-2 border-white bg-white shadow-sm" radius={28} collective={account?.host} />{' '}
+                <Avatar className="border-2 border-white bg-white shadow-xs" radius={28} collective={account?.host} />{' '}
                 <span>{account?.host.name}</span>
               </div>
             </div>
diff --git a/components/crowdfunding-redesign/FundraiserLayout.tsx b/components/crowdfunding-redesign/FundraiserLayout.tsx
index ca9d65f3235..5aa96aeb588 100644
--- a/components/crowdfunding-redesign/FundraiserLayout.tsx
+++ b/components/crowdfunding-redesign/FundraiserLayout.tsx
@@ -57,9 +57,9 @@ export function FundraiserLayout({ children, activeTab }) {
         <div className="flex flex-1 flex-col">
           <React.Fragment>
             <div className="">
-              <div className="mx-auto max-w-screen-xl space-y-8 px-6 py-12">
+              <div className="mx-auto max-w-(--breakpoint-xl) space-y-8 px-6 py-12">
                 <div className="space-y-4 text-center">
-                  <h1 className="text-balance text-4xl font-semibold">{fundraiser.name}</h1>
+                  <h1 className="text-4xl font-semibold text-balance">{fundraiser.name}</h1>
                   <p className="text-lg">{fundraiser.description}</p>
                 </div>
 
@@ -106,8 +106,8 @@ export function FundraiserLayout({ children, activeTab }) {
               </div>
             </div>
 
-            <div className="sticky top-0 z-10 border-b border-t bg-background" ref={tabRef}>
-              <div className="relative mx-auto -mb-px h-16 max-w-screen-xl px-6">
+            <div className="sticky top-0 z-10 border-t border-b bg-background" ref={tabRef}>
+              <div className="relative mx-auto -mb-px h-16 max-w-(--breakpoint-xl) px-6">
                 <TabsList centered={false}>
                   <TabsTrigger href={baseRoute} active={activeTab === 'fundraiser'}>
                     Fundraiser
diff --git a/components/crowdfunding-redesign/FundraisingPage.tsx b/components/crowdfunding-redesign/FundraisingPage.tsx
index aacd4b6362e..a5f804dc252 100644
--- a/components/crowdfunding-redesign/FundraisingPage.tsx
+++ b/components/crowdfunding-redesign/FundraisingPage.tsx
@@ -35,14 +35,14 @@ export function FundraisingPage() {
 
   return (
     <div className="flex-1 bg-background">
-      <div className="relative mx-auto grid max-w-screen-xl grid-cols-12 gap-8 px-6 py-12">
+      <div className="relative mx-auto grid max-w-(--breakpoint-xl) grid-cols-12 gap-8 px-6 py-12">
         <div className="col-span-2">
           <div className="sticky top-28 space-y-4">
             <ContentOverview content={fundraiser.longDescription} />
           </div>
         </div>
 
-        <div className="prose prose-slate col-span-7">
+        <div className="col-span-7 prose prose-slate">
           <h2>
             <FormattedMessage defaultMessage="About" id="collective.about.title" />
           </h2>
diff --git a/components/crowdfunding-redesign/Header.tsx b/components/crowdfunding-redesign/Header.tsx
index 3360aae9b41..57b378142ae 100644
--- a/components/crowdfunding-redesign/Header.tsx
+++ b/components/crowdfunding-redesign/Header.tsx
@@ -30,26 +30,26 @@ export function Header({ collective, profile, collapsed = false, activeTab, brea
       </div>
       {!collapsed && (
         <div className="relative bg-background pb-6">
-          <div className="mx-auto flex max-w-screen-xl flex-col items-center justify-center gap-2">
+          <div className="mx-auto flex max-w-(--breakpoint-xl) flex-col items-center justify-center gap-2">
             <div className="z-10 -mt-16 mb-2">
-              <Avatar className="border-8 border-white bg-white shadow-sm" collective={collective} radius={128} />
+              <Avatar className="border-8 border-white bg-white shadow-xs" collective={collective} radius={128} />
             </div>
             <div className="space-y-3 text-center">
-              <h1 className="text-balance text-3xl font-semibold">{profile?.name}</h1>
-              <p className="max-w-prose text-balance text-sm leading-normal">{profile?.description}</p>
+              <h1 className="text-3xl font-semibold text-balance">{profile?.name}</h1>
+              <p className="max-w-prose text-sm leading-normal text-balance">{profile?.description}</p>
               {hasSocialLinks && <SocialLinks socialLinks={collective.socialLinks} />}
             </div>
           </div>
-          <div className="absolute right-4 top-4">
+          <div className="absolute top-4 right-4">
             <ProfileActionButtons />
           </div>
         </div>
       )}
-      <header className="sticky top-0 z-[1000] flex h-16 border-b bg-white backdrop-blur-md">
+      <header className="sticky top-0 z-1000 flex h-16 border-b bg-white backdrop-blur-md">
         <div
           className={clsx(
             'w-full items-center gap-4 px-6',
-            collapsed ? 'flex justify-center' : 'grid grid-cols-[minmax(auto,_1fr)_1fr_minmax(auto,_1fr)]',
+            collapsed ? 'flex justify-center' : 'grid grid-cols-[minmax(auto,1fr)_1fr_minmax(auto,1fr)]',
           )}
         >
           <motion.div
@@ -65,7 +65,7 @@ export function Header({ collective, profile, collapsed = false, activeTab, brea
             className=""
           >
             <Link href={`/preview/${collective?.slug}`}>
-              <Avatar collective={collective} radius={32} className="border-2 border-white bg-white shadow-sm" />
+              <Avatar collective={collective} radius={32} className="border-2 border-white bg-white shadow-xs" />
             </Link>
           </motion.div>
           {collapsed ? (
@@ -76,7 +76,7 @@ export function Header({ collective, profile, collapsed = false, activeTab, brea
             <div className="mx-auto flex max-w-3xl flex-1 shrink-0 flex-col items-center justify-end">
               <nav className="sticky top-0 flex space-x-4 text-sm font-medium text-muted-foreground">
                 <div className="">
-                  <div className="relative mx-auto -mb-px h-16 max-w-screen-xl px-6">
+                  <div className="relative mx-auto -mb-px h-16 max-w-(--breakpoint-xl) px-6">
                     <TabsList centered={true}>
                       <TabsTrigger
                         // scroll={false}
diff --git a/components/crowdfunding-redesign/Tiers.tsx b/components/crowdfunding-redesign/Tiers.tsx
index e9c796e6f1b..7250b35c3c4 100644
--- a/components/crowdfunding-redesign/Tiers.tsx
+++ b/components/crowdfunding-redesign/Tiers.tsx
@@ -58,7 +58,7 @@ export const Tiers = ({ account }) => {
 
         return (
           <div key={tier.id} className="space-y-2 rounded-lg border p-4">
-            <div className="text-balance text-lg font-semibold">{tier.name}</div>
+            <div className="text-lg font-semibold text-balance">{tier.name}</div>
             <div className="text-sm">{tier.description}</div>
             {!isDisabled && graphqlAmountValueInCents(minAmount) > 0 && (
               <div className="mt-3 text-muted-foreground">
diff --git a/components/crowdfunding-redesign/edit/EditFundraiser.tsx b/components/crowdfunding-redesign/edit/EditFundraiser.tsx
index 22cac9f8fd2..f59e4371296 100644
--- a/components/crowdfunding-redesign/edit/EditFundraiser.tsx
+++ b/components/crowdfunding-redesign/edit/EditFundraiser.tsx
@@ -174,7 +174,7 @@ export function EditFundraiser({ account }) {
       <DialogTrigger asChild>
         <Button>Edit prototype</Button>
       </DialogTrigger>
-      <DialogContent className="gap-6 sm:max-w-screen-lg">
+      <DialogContent className="gap-6 sm:max-w-(--breakpoint-lg)">
         <DialogHeader>
           <DialogTitle className="text-xl">Edit fundraiser prototype</DialogTitle>
           <DialogDescription>This will only affect the prototype and not your actual profile.</DialogDescription>
diff --git a/components/crowdfunding-redesign/edit/EditProfile.tsx b/components/crowdfunding-redesign/edit/EditProfile.tsx
index 363c4ed4fa8..94f9d28fe75 100644
--- a/components/crowdfunding-redesign/edit/EditProfile.tsx
+++ b/components/crowdfunding-redesign/edit/EditProfile.tsx
@@ -105,7 +105,7 @@ export function EditProfile({ account }) {
       <DialogTrigger asChild>
         <Button>Edit prototype</Button>
       </DialogTrigger>
-      <DialogContent className="gap-6 sm:max-w-screen-lg">
+      <DialogContent className="gap-6 sm:max-w-(--breakpoint-lg)">
         <DialogHeader>
           <DialogTitle className="text-xl">Edit profile prototype</DialogTitle>
           <DialogDescription>This will only affect the prototype and not your actual profile.</DialogDescription>
diff --git a/components/crowdfunding-redesign/edit/common.tsx b/components/crowdfunding-redesign/edit/common.tsx
index f9e33839867..9ae77f9cc89 100644
--- a/components/crowdfunding-redesign/edit/common.tsx
+++ b/components/crowdfunding-redesign/edit/common.tsx
@@ -77,7 +77,7 @@ function ColorPicker({ value, onChange }) {
                 className={clsx(
                   'size-10 cursor-pointer appearance-none overflow-hidden rounded-md border bg-transparent p-2.5',
                   '[&::-moz-color-swatch]:rounded [&::-moz-color-swatch]:border-none [&::-moz-focus-inner]:p-0',
-                  '[&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded [&::-webkit-color-swatch]:border-none',
+                  '[&::-webkit-color-swatch]:rounded [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch-wrapper]:p-0',
                 )}
               />
               <InputGroup prepend="#" value={value?.replace('#', '')} onChange={e => onChange(`#${e.target.value}`)} />
@@ -168,7 +168,7 @@ export const GoalsForm = ({ initialValues, schema, onSubmit, account }) => {
         return (
           <Form>
             <div className="flex flex-col items-start gap-4 rounded-lg border">
-              <div className="space-y-6 px-6 pb-2 pt-6">
+              <div className="space-y-6 px-6 pt-6 pb-2">
                 <FormField name="goal.amount" label={"Amount you're aiming for"}>
                   {({ field }) => {
                     return (
@@ -249,7 +249,7 @@ export const GoalsForm = ({ initialValues, schema, onSubmit, account }) => {
                 <GoalProgress accountSlug={account.slug} goal={formik.values.goal} />
               </div>
               <Separator />
-              <div className="flex w-full items-center justify-between gap-4 px-6 pb-6 pt-2">
+              <div className="flex w-full items-center justify-between gap-4 px-6 pt-2 pb-6">
                 <div className="flex items-center gap-2">
                   <Button type="submit" loading={formik.isSubmitting}>
                     <FormattedMessage defaultMessage="Save" id="save" />
diff --git a/components/crowdfunding-redesign/finances/Finances.tsx b/components/crowdfunding-redesign/finances/Finances.tsx
index 07d4870dd65..72e4ed12a6e 100644
--- a/components/crowdfunding-redesign/finances/Finances.tsx
+++ b/components/crowdfunding-redesign/finances/Finances.tsx
@@ -136,7 +136,7 @@ export function Finances({ inFundraiserLayout }: { inFundraiserLayout?: boolean
   const metric = metrics.find(m => m.id === queryFilter.values.metric) ?? metrics[0];
 
   return (
-    <div className="relative mx-auto flex max-w-screen-lg flex-col gap-8 px-6 py-12">
+    <div className="relative mx-auto flex max-w-(--breakpoint-lg) flex-col gap-8 px-6 py-12">
       <div className="flex flex-col gap-3">
         {router.query.accountSlug && !inFundraiserLayout && (
           <div className="mb-4 space-y-2">
diff --git a/components/crowdfunding-redesign/finances/ProfileMetric.tsx b/components/crowdfunding-redesign/finances/ProfileMetric.tsx
index 95f56db105d..85859722509 100644
--- a/components/crowdfunding-redesign/finances/ProfileMetric.tsx
+++ b/components/crowdfunding-redesign/finances/ProfileMetric.tsx
@@ -51,8 +51,8 @@ export function ProfileMetric({
   return (
     <Comp
       className={clsx(
-        'group flex flex-col gap-1 border-0 border-b-[3px] border-r-border [&:not(:last-child)]:border-r',
-        isButton && 'cursor-pointer text-left ring-ring ring-offset-2 focus:outline-none focus-visible:ring-2',
+        'group flex flex-col gap-1 border-0 border-b-[3px] border-r-border not-last:border-r',
+        isButton && 'cursor-pointer text-left ring-ring ring-offset-2 focus:outline-hidden focus-visible:ring-2',
         active ? 'border-primary bg-background' : 'border-transparent bg-muted',
         className,
       )}
diff --git a/components/crowdfunding-redesign/finances/TransactionGroupDetails.tsx b/components/crowdfunding-redesign/finances/TransactionGroupDetails.tsx
index 7bbafc646d5..07dd5467c73 100644
--- a/components/crowdfunding-redesign/finances/TransactionGroupDetails.tsx
+++ b/components/crowdfunding-redesign/finances/TransactionGroupDetails.tsx
@@ -90,8 +90,8 @@ export function TransactionGroupDetails() {
   const intl = useIntl();
   return (
     <div className="">
-      <div className="relative mx-auto flex max-w-screen-lg flex-col gap-8 px-6 py-12">
-        <h3 className="text-2xl font-semibold leading-none tracking-tight">
+      <div className="relative mx-auto flex max-w-(--breakpoint-lg) flex-col gap-8 px-6 py-12">
+        <h3 className="text-2xl leading-none font-semibold tracking-tight">
           Transaction group {router.query.groupId.slice(0, 8)}
         </h3>
         <TransactionGroupCard
diff --git a/components/crowdfunding-redesign/updates/UpdatesList.tsx b/components/crowdfunding-redesign/updates/UpdatesList.tsx
index a1659dc70e1..3323bbf03ad 100644
--- a/components/crowdfunding-redesign/updates/UpdatesList.tsx
+++ b/components/crowdfunding-redesign/updates/UpdatesList.tsx
@@ -25,7 +25,7 @@ export function UpdatesList() {
   });
   const account = data?.account;
   return (
-    <div className="relative mx-auto flex max-w-screen-sm flex-col gap-8 px-6 py-16">
+    <div className="relative mx-auto flex max-w-(--breakpoint-sm) flex-col gap-8 px-6 py-16">
       {data?.account.updates?.totalCount > 0 ? (
         account.updates.nodes.map(update => {
           const numberOfReactions = Object.keys(update.reactions).reduce((acc, emoji) => {
@@ -35,7 +35,7 @@ export function UpdatesList() {
             <Link
               key={update.id}
               href={`/preview/${router.query.collectiveSlug}/updates/${update.id}`}
-              className="flex cursor-pointer flex-col gap-3 rounded-lg border bg-background p-8 transition-shadow hover:shadow"
+              className="flex cursor-pointer flex-col gap-3 rounded-lg border bg-background p-8 transition-shadow hover:shadow-sm"
               // TODO: Consider smooth scrolling to content when opening an update if using expanded fundraiser layout
               // onClick={() => {
               //   const tabElement = tabRef?.current as HTMLElement | null;
diff --git a/components/dashboard/AccountSwitcher.tsx b/components/dashboard/AccountSwitcher.tsx
index 82d0e43a36b..ecf2b7a986c 100644
--- a/components/dashboard/AccountSwitcher.tsx
+++ b/components/dashboard/AccountSwitcher.tsx
@@ -80,7 +80,7 @@ const DropdownButton = styled.button`
   }
 
   svg {
-    flex-shrink: 0;
+    shrink: 0;
     color: #4b5563;
   }
 `;
@@ -250,7 +250,7 @@ const AccountSwitcher = ({ activeSlug }: { activeSlug: string }) => {
   const activeAccount = allAdministratedAccounts.find(a => a.slug === activeSlug) || loggedInUserCollective;
 
   return (
-    <Dropdown trigger="click" className="flex-grow">
+    <Dropdown trigger="click" className="grow">
       {({ triggerProps, dropdownProps }) => (
         <React.Fragment>
           <Flex alignItems="center" flex={0}>
@@ -321,7 +321,7 @@ const AccountSwitcher = ({ activeSlug }: { activeSlug: string }) => {
                             {EMPTY_GROUP_STATE[collectiveType].emptyMessage}
                           </p>
                           <Link
-                            className="my-3 inline-flex items-center rounded-lg border border-input px-6 py-4 text-accent-foreground shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+                            className="my-3 inline-flex items-center rounded-lg border border-input px-6 py-4 text-accent-foreground shadow-xs transition-colors hover:bg-gray-50 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
                             href="/create"
                           >
                             <div className="mr-3 rounded-full border bg-white p-2 text-muted-foreground">
diff --git a/components/dashboard/DashboardHeader.tsx b/components/dashboard/DashboardHeader.tsx
index 213f6b80941..49ab5ae27fb 100644
--- a/components/dashboard/DashboardHeader.tsx
+++ b/components/dashboard/DashboardHeader.tsx
@@ -25,7 +25,7 @@ export default function DashboardHeader({
   return (
     <div className={cn('flex flex-col gap-2', className)}>
       <div className="flex flex-col flex-wrap justify-between gap-1.5 sm:flex-row sm:items-center">
-        <div className="flex items-center gap-1.5 text-2xl font-bold leading-9 tracking-tight text-muted-foreground">
+        <div className="flex items-center gap-1.5 text-2xl leading-9 font-bold tracking-tight text-muted-foreground">
           {subpathTitle && (
             <React.Fragment>
               <Link href={titleRoute}>
diff --git a/components/dashboard/DashboardSection.tsx b/components/dashboard/DashboardSection.tsx
index 9ba75b7b607..04fe11139b6 100644
--- a/components/dashboard/DashboardSection.tsx
+++ b/components/dashboard/DashboardSection.tsx
@@ -161,7 +161,7 @@ const DashboardSection = ({ account, isLoading, section, subpath }) => {
 
   if (values(LEGACY_SECTIONS).includes(section)) {
     return (
-      <div className="w-full max-w-screen-lg pb-6">
+      <div className="w-full max-w-(--breakpoint-lg) pb-6">
         <OCFBannerWithData isDashboard collective={account} hideNextSteps={section === 'host'} />
         {SECTION_LABELS[section] && section !== ALL_SECTIONS.GIFT_CARDS && (
           <DashboardHeader className="mb-2" title={formatMessage(SECTION_LABELS[section])} />
@@ -176,8 +176,8 @@ const DashboardSection = ({ account, isLoading, section, subpath }) => {
   const SettingsComponent = SETTINGS_COMPONENTS[section];
   if (SettingsComponent) {
     return (
-      // <div className="flex max-w-screen-lg justify-center">
-      <div className="max-w-screen-md flex-1 pb-6">
+      // <div className="flex max-w-(--breakpoint-lg) justify-center">
+      <div className="max-w-(--breakpoint-md) flex-1 pb-6">
         <OCFBannerWithData isDashboard collective={account} hideNextSteps={section === 'host'} />
         <SettingsComponent account={account} accountSlug={account.slug} subpath={subpath} />
       </div>
@@ -186,8 +186,8 @@ const DashboardSection = ({ account, isLoading, section, subpath }) => {
 
   if (values(LEGACY_SETTINGS_SECTIONS).includes(section)) {
     return (
-      // <div className="flex max-w-screen-lg justify-center">
-      <div className="max-w-screen-md flex-1 pb-6">
+      // <div className="flex max-w-(--breakpoint-lg) justify-center">
+      <div className="max-w-(--breakpoint-md) flex-1 pb-6">
         <OCFBannerWithData isDashboard collective={account} hideNextSteps={section === 'host'} />
         {SECTION_LABELS[section] && section !== ALL_SECTIONS.GIFT_CARDS && (
           <DashboardHeader className="mb-2" title={formatMessage(SECTION_LABELS[section])} />
diff --git a/components/dashboard/EmptyResults.tsx b/components/dashboard/EmptyResults.tsx
index 2fcacfe3f10..63242faa9f8 100644
--- a/components/dashboard/EmptyResults.tsx
+++ b/components/dashboard/EmptyResults.tsx
@@ -57,7 +57,7 @@ export function EmptyResults({
 
       {hasFilters && (
         <React.Fragment>
-          <p className="text-balance text-center text-muted-foreground">
+          <p className="text-center text-balance text-muted-foreground">
             <FormattedMessage
               id="filter.NoMatchingResults.subtitle"
               defaultMessage="We can't find any {type, select, EXPENSES {expenses} CONTRIBUTIONS {contributions} VIRTUAL_CARDS {virtual cards} VIRTUAL_CARD_REQUESTS {virtual card requests} TRANSACTIONS {transactions} AGREEMENTS {agreements} COLLECTIVES {collectives} HOST_APPLICATIONS {host applications} UPDATES {updates} other {results}} matching the given filters."
diff --git a/components/dashboard/ExportHostedCollectivesCSVModal.tsx b/components/dashboard/ExportHostedCollectivesCSVModal.tsx
index 853d8581811..2dc23435a15 100644
--- a/components/dashboard/ExportHostedCollectivesCSVModal.tsx
+++ b/components/dashboard/ExportHostedCollectivesCSVModal.tsx
@@ -350,7 +350,7 @@ const ExportHostedCollectivesCSVModal = ({
               />
             </DialogDescription>
           </DialogHeader>
-          <div className="flex flex-1 flex-col gap-6 overflow-y-auto px-4 pb-4 pt-6 sm:px-8">
+          <div className="flex flex-1 flex-col gap-6 overflow-y-auto px-4 pt-6 pb-4 sm:px-8">
             <div className="flex flex-col gap-4 sm:flex-row">
               <div className="flex flex-1 flex-col gap-2">
                 <h1 className="font-bold">
@@ -423,7 +423,7 @@ const ExportHostedCollectivesCSVModal = ({
                         />
                         <label
                           htmlFor={tab}
-                          className="cursor-pointer text-sm font-bold leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                          className="cursor-pointer text-sm leading-none font-bold peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                         >
                           <FormattedMessage id="ExportTransactionsCSVModal.SelectAll" defaultMessage="Select all" />
                         </label>
@@ -443,7 +443,7 @@ const ExportHostedCollectivesCSVModal = ({
                                 />
                                 <label
                                   htmlFor={fieldId}
-                                  className="ml-1 cursor-pointer text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  className="ml-1 cursor-pointer text-sm leading-none font-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                 >
                                   {field?.label || fieldId}
                                 </label>
diff --git a/components/dashboard/ExportTransactionsCSVModal.tsx b/components/dashboard/ExportTransactionsCSVModal.tsx
index b1d180a977f..df9078f5e1f 100644
--- a/components/dashboard/ExportTransactionsCSVModal.tsx
+++ b/components/dashboard/ExportTransactionsCSVModal.tsx
@@ -430,7 +430,7 @@ const ExportTransactionsCSVModal = ({
               <FormattedMessage id="ExportTransactionsCSVModal.Title" defaultMessage="Export Transactions" />
             </DialogTitle>
           </DialogHeader>
-          <div className="flex flex-1 flex-col gap-6 overflow-y-auto px-4 pb-4 pt-6 sm:px-8">
+          <div className="flex flex-1 flex-col gap-6 overflow-y-auto px-4 pt-6 pb-4 sm:px-8">
             <div className="flex flex-col gap-4 sm:flex-row">
               <div className="flex flex-1 flex-col gap-2">
                 <h1 className="font-bold">
@@ -503,7 +503,7 @@ const ExportTransactionsCSVModal = ({
                         />
                         <label
                           htmlFor={tab}
-                          className="cursor-pointer text-sm font-bold leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                          className="cursor-pointer text-sm leading-none font-bold peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                         >
                           <FormattedMessage id="ExportTransactionsCSVModal.SelectAll" defaultMessage="Select all" />
                         </label>
@@ -525,7 +525,7 @@ const ExportTransactionsCSVModal = ({
                                   />
                                   <label
                                     htmlFor={fieldId}
-                                    className="ml-1 cursor-pointer text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    className="ml-1 cursor-pointer text-sm leading-none font-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                   >
                                     {field?.label || fieldId}
                                   </label>
diff --git a/components/dashboard/MenuLink.tsx b/components/dashboard/MenuLink.tsx
index 9983e33ead7..d54beae26bd 100644
--- a/components/dashboard/MenuLink.tsx
+++ b/components/dashboard/MenuLink.tsx
@@ -58,7 +58,7 @@ export const MenuLink = ({
   }
 
   const classNames = cn(
-    'group flex w-full gap-x-3 rounded-full px-3 py-1.5 text-sm font-medium leading-6 transition-colors',
+    'group flex w-full gap-x-3 rounded-full px-3 py-1.5 text-sm leading-6 font-medium transition-colors',
     isSelected ? 'bg-blue-50/50 text-blue-700' : 'text-slate-700 hover:bg-blue-50/50 hover:text-blue-700',
     className,
   );
@@ -86,7 +86,7 @@ export const MenuLink = ({
           {subMenu ? (
             <button
               className={clsx(
-                'flex h-6 w-6 flex-shrink-0 items-center justify-center rounded transition-colors',
+                'flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors',
                 !sectionExpanded && 'hover:bg-blue-100',
               )}
               disabled={sectionExpanded}
@@ -106,7 +106,7 @@ export const MenuLink = ({
 
       {subMenu && (
         <ReactAnimateHeight duration={150} height={subMenuExpanded ? 'auto' : 0}>
-          <div className="ml-5 mt-2 flex flex-col space-y-1 border-l pl-4">
+          <div className="mt-2 ml-5 flex flex-col space-y-1 border-l pl-4">
             {subMenu.map(item => (
               <MenuLink key={item.section} {...item} />
             ))}
diff --git a/components/dashboard/SideBar.tsx b/components/dashboard/SideBar.tsx
index 5d31f2d4fe0..3093072c470 100644
--- a/components/dashboard/SideBar.tsx
+++ b/components/dashboard/SideBar.tsx
@@ -59,10 +59,7 @@ const AdminPanelSideBar = ({
 
   return (
     <div
-      className={cn(
-        'w-full flex-shrink-0 flex-grow-0 md:w-52 xl:w-64',
-        isMobile && 'sticky top-0 z-10 bg-white py-2.5',
-      )}
+      className={cn('w-full shrink-0 grow-0 md:w-52 xl:w-64', isMobile && 'sticky top-0 z-10 bg-white py-2.5')}
       {...props}
     >
       <div className="sticky top-8">
diff --git a/components/dashboard/filters/DateFilter/DateInput.tsx b/components/dashboard/filters/DateFilter/DateInput.tsx
index 6641d55041d..91d6932d9f3 100644
--- a/components/dashboard/filters/DateFilter/DateInput.tsx
+++ b/components/dashboard/filters/DateFilter/DateInput.tsx
@@ -40,7 +40,7 @@ export function DateInput({
           <div className="relative w-full">
             <CalendarIcon
               size={16}
-              className={'pointer-events-none absolute bottom-0 left-3 top-0 h-full text-muted-foreground'}
+              className={'pointer-events-none absolute top-0 bottom-0 left-3 h-full text-muted-foreground'}
             />
             <Input
               ref={inputRef}
diff --git a/components/dashboard/filters/DateFilter/DateRangeInput.tsx b/components/dashboard/filters/DateFilter/DateRangeInput.tsx
index 0d3e8df0e93..a11201a1f8e 100644
--- a/components/dashboard/filters/DateFilter/DateRangeInput.tsx
+++ b/components/dashboard/filters/DateFilter/DateRangeInput.tsx
@@ -35,7 +35,7 @@ export function DateRangeInput({ value, onChange }) {
               <div className="relative w-full">
                 <CalendarIcon
                   size={16}
-                  className={'pointer-events-none absolute bottom-0 left-3 top-0 h-full text-muted-foreground'}
+                  className={'pointer-events-none absolute top-0 bottom-0 left-3 h-full text-muted-foreground'}
                 />
                 <Input
                   ref={fromInputRef}
@@ -58,7 +58,7 @@ export function DateRangeInput({ value, onChange }) {
               <div className="relative w-full">
                 <CalendarIcon
                   size={16}
-                  className={'pointer-events-none absolute bottom-0 left-3 top-0 h-full text-muted-foreground'}
+                  className={'pointer-events-none absolute top-0 bottom-0 left-3 h-full text-muted-foreground'}
                 />
                 <Input
                   ref={toInputRef}
diff --git a/components/dashboard/filters/DateFilter/TimezonePicker.tsx b/components/dashboard/filters/DateFilter/TimezonePicker.tsx
index 71d7b933602..6827de8365f 100644
--- a/components/dashboard/filters/DateFilter/TimezonePicker.tsx
+++ b/components/dashboard/filters/DateFilter/TimezonePicker.tsx
@@ -30,7 +30,7 @@ export function Timezonepicker({ value = 'local', onChange }) {
           type="button"
           className={clsx(
             'rounded-md py-1',
-            value === 'local' ? 'bg-white text-foreground shadow-sm' : 'bg-transparent text-muted-foreground',
+            value === 'local' ? 'bg-white text-foreground shadow-xs' : 'bg-transparent text-muted-foreground',
           )}
           onClick={() => onChange('local')}
         >
@@ -40,7 +40,7 @@ export function Timezonepicker({ value = 'local', onChange }) {
           type="button"
           className={clsx(
             'rounded-md py-1',
-            value === 'UTC' ? 'bg-white text-foreground shadow-sm' : 'bg-transparent text-muted-foreground',
+            value === 'UTC' ? 'bg-white text-foreground shadow-xs' : 'bg-transparent text-muted-foreground',
           )}
           onClick={() => onChange('UTC')}
         >
diff --git a/components/dashboard/filters/EmailFilter.tsx b/components/dashboard/filters/EmailFilter.tsx
index 7b27bd6c567..9c6e5756173 100644
--- a/components/dashboard/filters/EmailFilter.tsx
+++ b/components/dashboard/filters/EmailFilter.tsx
@@ -38,7 +38,7 @@ function EmailFilter({ value, labelMsg, onChange, isViewActive }: FilterComponen
       <AtSign
         size={16}
         className={clsx(
-          'pointer-events-none absolute bottom-0 left-3 top-0 h-full text-muted-foreground',
+          'pointer-events-none absolute top-0 bottom-0 left-3 h-full text-muted-foreground',
           !isViewActive && value && 'text-primary',
         )}
       />
diff --git a/components/dashboard/filters/FilterDropdown.tsx b/components/dashboard/filters/FilterDropdown.tsx
index 5a5de5fc832..72f8abf0a09 100644
--- a/components/dashboard/filters/FilterDropdown.tsx
+++ b/components/dashboard/filters/FilterDropdown.tsx
@@ -119,7 +119,7 @@ const FilterButton = ({ filterKey, setFilter, filters, tmpValue, open, isViewAct
           </button>
         )}
         <PopoverTrigger
-          className={clsx('flex h-full items-center px-3 focus:outline-none', hasValue && 'pl-2 text-foreground')}
+          className={clsx('flex h-full items-center px-3 focus:outline-hidden', hasValue && 'pl-2 text-foreground')}
           disabled={isFilterWithoutComponent}
           data-cy={filterKey ? `filter-${filterKey}` : `add-filter`}
         >
diff --git a/components/dashboard/filters/Pagination.tsx b/components/dashboard/filters/Pagination.tsx
index 2787ae32d8d..407e80cfcbd 100644
--- a/components/dashboard/filters/Pagination.tsx
+++ b/components/dashboard/filters/Pagination.tsx
@@ -30,7 +30,7 @@ function SelectLimit({ limit, setLimit, defaultLimit }) {
         <Button variant="outline" size="sm" className="shrink-0">
           <FormattedMessage defaultMessage="{rowCount} per page" id="Pagination.PerPage" values={{ rowCount: limit }} />
           <SelectPrimitive.Icon asChild>
-            <ChevronDown className="h-4 w-4 flex-shrink-0 opacity-50" />
+            <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
           </SelectPrimitive.Icon>
         </Button>
       </SelectPrimitive.Trigger>
diff --git a/components/dashboard/filters/SearchFilter.tsx b/components/dashboard/filters/SearchFilter.tsx
index e749b895046..89a2d30fcda 100644
--- a/components/dashboard/filters/SearchFilter.tsx
+++ b/components/dashboard/filters/SearchFilter.tsx
@@ -39,12 +39,12 @@ function SearchFilter({ value, labelMsg, onChange, isViewActive }: FilterCompone
       <Search
         size={16}
         className={clsx(
-          'pointer-events-none absolute bottom-0 left-3 top-0 h-full text-muted-foreground',
+          'pointer-events-none absolute top-0 bottom-0 left-3 h-full text-muted-foreground',
           !isViewActive && value && 'text-primary',
         )}
       />
       <Input
-        className={clsx('h-9 w-[150px] rounded-full pl-8 pr-9 lg:w-[200px]')}
+        className={clsx('h-9 w-[150px] rounded-full pr-9 pl-8 lg:w-[200px]')}
         ref={inputRef}
         placeholder={intl.formatMessage(labelMsg)}
         value={input || ''}
@@ -57,7 +57,7 @@ function SearchFilter({ value, labelMsg, onChange, isViewActive }: FilterCompone
         <Button
           variant="link"
           size="xs"
-          className="absolute right-3 top-1/2 h-6 w-6 -translate-y-1/2 transform p-1 text-muted-foreground hover:text-foreground"
+          className="absolute top-1/2 right-3 h-6 w-6 -translate-y-1/2 transform p-1 text-muted-foreground hover:text-foreground"
           title={intl.formatMessage({ id: 'search.clear', defaultMessage: 'Clear search' })}
           onClick={() => {
             setInput('');
diff --git a/components/dashboard/preview/AccountSwitcher.tsx b/components/dashboard/preview/AccountSwitcher.tsx
index dc4307149a5..6fffb4ca779 100644
--- a/components/dashboard/preview/AccountSwitcher.tsx
+++ b/components/dashboard/preview/AccountSwitcher.tsx
@@ -332,7 +332,7 @@ export default function AccountSwitcher({ activeSlug, defaultSlug, setDefaultSlu
                 onClick={() => router.push(`/dashboard/${parentAccount.slug}`)}
                 aria-expanded={open}
                 className={clsx(
-                  'group h-8 justify-between gap-1.5 whitespace-nowrap rounded-full border-transparent px-2',
+                  'group h-8 justify-between gap-1.5 rounded-full border-transparent px-2 whitespace-nowrap',
                   'max-w-[14rem]',
                 )}
               >
@@ -354,7 +354,7 @@ export default function AccountSwitcher({ activeSlug, defaultSlug, setDefaultSlu
               role="combobox"
               aria-expanded={open}
               className={clsx(
-                'group h-8 max-w-[10rem] justify-between gap-1.5 whitespace-nowrap rounded-full px-2 sm:max-w-[14rem]',
+                'group h-8 max-w-[10rem] justify-between gap-1.5 rounded-full px-2 whitespace-nowrap sm:max-w-[14rem]',
               )}
             >
               <div className="flex items-center gap-2 truncate">
diff --git a/components/dashboard/preview/DashboardTopBar.tsx b/components/dashboard/preview/DashboardTopBar.tsx
index 988c58fc080..ff0985e7c46 100644
--- a/components/dashboard/preview/DashboardTopBar.tsx
+++ b/components/dashboard/preview/DashboardTopBar.tsx
@@ -29,7 +29,7 @@ const MenuLink = ({ section, label, href, Icon, isActive, onChangeVisiblity, vis
       ref={ref}
       data-cy={`menu-item-${section}`}
       className={clsx(
-        'group flex w-full items-center gap-x-1.5 rounded-full px-2.5 py-0.5 text-sm font-medium leading-6 antialiased transition-colors',
+        'group flex w-full items-center gap-x-1.5 rounded-full px-2.5 py-0.5 text-sm leading-6 font-medium antialiased transition-colors',
         isActive ? 'bg-blue-50 text-blue-700' : 'text-slate-950 hover:bg-slate-50 hover:text-blue-700',
         inView ? 'visible' : 'invisible',
       )}
@@ -71,7 +71,7 @@ const DashboardTopBar = ({ menuItems, isLoading, account }) => {
     ({ section, subMenu }) => section === selectedSection || subMenu?.find(item => item.section === selectedSection),
   );
   return (
-    <div className="z-10 border-b bg-white py-2 pl-1.5 pr-2 xl:px-6">
+    <div className="z-10 border-b bg-white py-2 pr-2 pl-1.5 xl:px-6">
       <div className="relative flex justify-between">
         <div className="flex shrink gap-1.5 overflow-hidden">
           {isLoading
diff --git a/components/dashboard/sections/ActivityLog/GenericActivityDiffDataWithList.tsx b/components/dashboard/sections/ActivityLog/GenericActivityDiffDataWithList.tsx
index c418b5d9221..6af978062e8 100644
--- a/components/dashboard/sections/ActivityLog/GenericActivityDiffDataWithList.tsx
+++ b/components/dashboard/sections/ActivityLog/GenericActivityDiffDataWithList.tsx
@@ -112,7 +112,7 @@ export const GenericActivityDiffDataWithList = ({ activity }) => {
           </div>
           <div className="flex w-full flex-col space-y-2">
             {added.map(item => (
-              <div key={item.id} className="w-full flex-grow rounded bg-green-100 p-2">
+              <div key={item.id} className="w-full grow rounded bg-green-100 p-2">
                 {Object.keys(item)
                   .filter(key => item[key] && !DEFAULT_IGNORED_FIELDS.includes(key))
                   .map(key => (
@@ -132,7 +132,7 @@ export const GenericActivityDiffDataWithList = ({ activity }) => {
           </div>
           <div className="flex w-full flex-col space-y-2">
             {removed.map(item => (
-              <div key={item.id} className="w-full flex-grow rounded bg-red-100 p-2">
+              <div key={item.id} className="w-full grow rounded bg-red-100 p-2">
                 {Object.keys(item)
                   .filter(key => item[key] && !DEFAULT_IGNORED_FIELDS.includes(key))
                   .map(key => (
@@ -152,7 +152,7 @@ export const GenericActivityDiffDataWithList = ({ activity }) => {
           </div>
           <div className="flex w-full flex-col space-y-2">
             {edited.map(({ previousData, newData }) => (
-              <div key={previousData.id} className="w-full flex-grow rounded bg-blue-100 p-2">
+              <div key={previousData.id} className="w-full grow rounded bg-blue-100 p-2">
                 {ALWAYS_DISPLAYED.map(key => {
                   if (previousData[key] === newData[key]) {
                     return (
diff --git a/components/dashboard/sections/Contributors.tsx b/components/dashboard/sections/Contributors.tsx
index 964ddef9b74..affa5780baf 100644
--- a/components/dashboard/sections/Contributors.tsx
+++ b/components/dashboard/sections/Contributors.tsx
@@ -284,7 +284,7 @@ const Contributors = ({ accountSlug }: ContributorsProps) => {
   const [isDownloadingCsv, setDownloadingCsv] = React.useState(false);
 
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader
         title={<FormattedMessage id="Contributors" defaultMessage="Contributors" />}
         actions={
diff --git a/components/dashboard/sections/HostDashboardAgreements.tsx b/components/dashboard/sections/HostDashboardAgreements.tsx
index 56e6aba137e..8b45c9f35ed 100644
--- a/components/dashboard/sections/HostDashboardAgreements.tsx
+++ b/components/dashboard/sections/HostDashboardAgreements.tsx
@@ -83,7 +83,7 @@ const HostDashboardAgreements = ({ accountSlug: hostSlug }: DashboardSectionProp
 
   const canEdit = Boolean(LoggedInUser && !LoggedInUser.isAccountantOnly(data?.host));
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader
         title={<FormattedMessage id="Agreements" defaultMessage="Agreements" />}
         actions={
diff --git a/components/dashboard/sections/HostVirtualCardRequests.tsx b/components/dashboard/sections/HostVirtualCardRequests.tsx
index c7ac4e926d3..dc65527d787 100644
--- a/components/dashboard/sections/HostVirtualCardRequests.tsx
+++ b/components/dashboard/sections/HostVirtualCardRequests.tsx
@@ -200,7 +200,7 @@ export default function HostVirtualCardRequests({ accountSlug: hostSlug }: Dashb
   const loading = query.loading;
 
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader
         title={<FormattedMessage id="VirtualCardRequests.Title" defaultMessage="Virtual Card Requests" />}
         description={
diff --git a/components/dashboard/sections/HostVirtualCards.tsx b/components/dashboard/sections/HostVirtualCards.tsx
index 01a0d225dc5..c6b63128af8 100644
--- a/components/dashboard/sections/HostVirtualCards.tsx
+++ b/components/dashboard/sections/HostVirtualCards.tsx
@@ -312,7 +312,7 @@ const HostVirtualCards = ({ accountSlug: hostSlug }: DashboardSectionProps) => {
   };
 
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader
         title={<FormattedMessage id="VirtualCards.Title" defaultMessage="Virtual Cards" />}
         description={
diff --git a/components/dashboard/sections/Team.tsx b/components/dashboard/sections/Team.tsx
index d5b0553a0e4..80492cc04cf 100644
--- a/components/dashboard/sections/Team.tsx
+++ b/components/dashboard/sections/Team.tsx
@@ -214,7 +214,7 @@ const Team = ({ accountSlug }: DashboardSectionProps) => {
     data?.account?.childrenAccounts?.nodes?.filter(child => child.members?.nodes?.length > 0) || [];
 
   return (
-    <div className="max-w-screen-lg">
+    <div className="max-w-(--breakpoint-lg)">
       <DashboardHeader title={<FormattedMessage id="Team" defaultMessage="Team" />} />
 
       {loading ? (
diff --git a/components/dashboard/sections/Vendors.tsx b/components/dashboard/sections/Vendors.tsx
index 7fcd981ee56..29e38724ec4 100644
--- a/components/dashboard/sections/Vendors.tsx
+++ b/components/dashboard/sections/Vendors.tsx
@@ -343,7 +343,7 @@ const Vendors = ({ accountSlug }: DashboardSectionProps) => {
   const error = queryError;
 
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader
         title={<FormattedMessage defaultMessage="Vendors" id="RilevA" />}
         description={
diff --git a/components/dashboard/sections/accounting/AccountingCategoriesTable.tsx b/components/dashboard/sections/accounting/AccountingCategoriesTable.tsx
index 69e551a13e1..45d350012a3 100644
--- a/components/dashboard/sections/accounting/AccountingCategoriesTable.tsx
+++ b/components/dashboard/sections/accounting/AccountingCategoriesTable.tsx
@@ -49,7 +49,7 @@ const columns = [
         <div className="inline-block rounded-xl bg-slate-50 px-2 py-1 font-bold text-slate-800">
           {cell.getValue()}
           {row.original.friendlyName && (
-            <span className="font-normal italic text-slate-700">&nbsp;·&nbsp;{row.original.friendlyName}</span>
+            <span className="font-normal text-slate-700 italic">&nbsp;·&nbsp;{row.original.friendlyName}</span>
           )}
         </div>
       );
diff --git a/components/dashboard/sections/accounting/AccountingCategoryDrawer.tsx b/components/dashboard/sections/accounting/AccountingCategoryDrawer.tsx
index 52ba5c34a7d..2f31f91069e 100644
--- a/components/dashboard/sections/accounting/AccountingCategoryDrawer.tsx
+++ b/components/dashboard/sections/accounting/AccountingCategoryDrawer.tsx
@@ -73,7 +73,7 @@ function AccountingCategoryDrawerView(props: AccountingCategoryDrawerViewProps)
   return (
     <React.Fragment>
       <div>
-        <label className="mb-1 mt-4 text-base">
+        <label className="mt-4 mb-1 text-base">
           <FormattedMessage defaultMessage="Accounting code" id="tvVFNA" />
         </label>
 
@@ -83,14 +83,14 @@ function AccountingCategoryDrawerView(props: AccountingCategoryDrawerViewProps)
           </span>
         </p>
 
-        <label className="mb-1 mt-4 text-base">
+        <label className="mt-4 mb-1 text-base">
           <FormattedMessage defaultMessage="Category name" id="kgVqk1" />
         </label>
         <p>{props.accountingCategory?.name}</p>
 
         {props.accountingCategory?.friendlyName && (
           <React.Fragment>
-            <label className="mb-1 mt-4 text-base">
+            <label className="mt-4 mb-1 text-base">
               <FormattedMessage id="AccountingCategory.friendlyName" defaultMessage="Friendly name" />
             </label>
             <p className="italic">{props.accountingCategory?.friendlyName}</p>
@@ -100,7 +100,7 @@ function AccountingCategoryDrawerView(props: AccountingCategoryDrawerViewProps)
         {!props.isIndependentCollective && (
           <React.Fragment>
             {' '}
-            <label className="mb-1 mt-4 text-base">
+            <label className="mt-4 mb-1 text-base">
               <FormattedMessage defaultMessage="Applies to" id="6WqHWi" />
             </label>
             <p>
@@ -111,7 +111,7 @@ function AccountingCategoryDrawerView(props: AccountingCategoryDrawerViewProps)
           </React.Fragment>
         )}
 
-        <label className="mb-1 mt-4 text-base">
+        <label className="mt-4 mb-1 text-base">
           <FormattedMessage defaultMessage="Kind" id="Transaction.Kind" />
         </label>
         <p>
@@ -120,7 +120,7 @@ function AccountingCategoryDrawerView(props: AccountingCategoryDrawerViewProps)
           )}
         </p>
 
-        <label className="mb-1 mt-4 text-base">
+        <label className="mt-4 mb-1 text-base">
           <FormattedMessage defaultMessage="Visible only to host admins" id="NvBPFR" />
         </label>
         <p>
@@ -133,7 +133,7 @@ function AccountingCategoryDrawerView(props: AccountingCategoryDrawerViewProps)
 
         {props.accountingCategory?.kind === AccountingCategoryKind.EXPENSE && (
           <React.Fragment>
-            <label className="mb-1 mt-4 text-base">
+            <label className="mt-4 mb-1 text-base">
               <FormattedMessage defaultMessage="Expense types" id="7oAuzt" />
             </label>
             <p>
@@ -148,7 +148,7 @@ function AccountingCategoryDrawerView(props: AccountingCategoryDrawerViewProps)
 
         {!isEmptyHTMLValue(props.accountingCategory?.instructions) && (
           <React.Fragment>
-            <label className="mb-1 mt-4 text-base">
+            <label className="mt-4 mb-1 text-base">
               <FormattedMessage defaultMessage="Instructions" id="sV2v5L" />
             </label>
             <div>
diff --git a/components/dashboard/sections/accounting/index.tsx b/components/dashboard/sections/accounting/index.tsx
index ec2a3a6d0f5..a05fafa386c 100644
--- a/components/dashboard/sections/accounting/index.tsx
+++ b/components/dashboard/sections/accounting/index.tsx
@@ -278,7 +278,7 @@ export const HostAdminAccountingSection = ({ accountSlug }: DashboardSectionProp
 
   return (
     <React.Fragment>
-      <div className="flex max-w-screen-lg flex-col gap-4">
+      <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
         <DashboardHeader
           title={<FormattedMessage defaultMessage="Chart of Accounts" id="IzFWHI" />}
           description={
@@ -335,7 +335,7 @@ export const HostAdminAccountingSection = ({ accountSlug }: DashboardSectionProp
           <div className="inline-block rounded-xl bg-slate-50 px-2 py-1 font-bold text-slate-800">
             {deleteCategoryConfirmation.name}
             {deleteCategoryConfirmation.friendlyName && (
-              <span className="font-normal italic text-slate-700">
+              <span className="font-normal text-slate-700 italic">
                 &nbsp;·&nbsp;{deleteCategoryConfirmation.friendlyName}
               </span>
             )}
diff --git a/components/dashboard/sections/accounts/index.tsx b/components/dashboard/sections/accounts/index.tsx
index 93580a64d7a..9f9a2f916dc 100644
--- a/components/dashboard/sections/accounts/index.tsx
+++ b/components/dashboard/sections/accounts/index.tsx
@@ -145,7 +145,7 @@ const Accounts = ({ accountSlug, subpath }: DashboardSectionProps) => {
   });
 
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader
         title={<FormattedMessage id="CollectiveAccounts" defaultMessage="Collective Accounts" />}
         actions={
diff --git a/components/dashboard/sections/collectives/AddFundsModal.tsx b/components/dashboard/sections/collectives/AddFundsModal.tsx
index a5e1117963f..69c3b2d1a66 100644
--- a/components/dashboard/sections/collectives/AddFundsModal.tsx
+++ b/components/dashboard/sections/collectives/AddFundsModal.tsx
@@ -623,7 +623,7 @@ const AddFundsModalContentWithCollective = ({
               >
                 {({ field }) => <StyledInput data-cy="add-funds-description" {...field} />}
               </Field>
-              <div className="w-full flex-grow overflow-y-auto pb-4">
+              <div className="w-full grow overflow-y-auto pb-4">
                 <Field
                   name="fromAccount"
                   htmlFor="addFunds-fromAccount"
@@ -940,7 +940,7 @@ const AddFundsModalContentWithCollective = ({
                 </P>
                 {fundError && <MessageBoxGraphqlError error={fundError} mt={3} fontSize="13px" />}
               </div>
-              <div className="border-t-1 flex justify-center gap-4 border-t border-solid border-t-slate-100 pt-4">
+              <div className="flex justify-center gap-4 border-t border-t-1 border-solid border-t-slate-100 pt-4">
                 <Button onClick={handleClose} type="button" variant="outline">
                   <FormattedMessage id="actions.cancel" defaultMessage="Cancel" />
                 </Button>
@@ -1070,7 +1070,7 @@ const AddFundsModalContentWithCollective = ({
                             values={{ item: <FormattedMessage defaultMessage="Memo" id="D5NqQO" /> }}
                           />
                           <p
-                            className="text-black-600 border-black-200 mt-1 max-h-32 overflow-y-auto whitespace-pre-wrap break-words rounded border bg-neutral-50 p-2 text-xs"
+                            className="text-black-600 border-black-200 mt-1 max-h-32 overflow-y-auto rounded border bg-neutral-50 p-2 text-xs break-words whitespace-pre-wrap"
                             data-cy="add-funds-memo"
                           >
                             {fundDetails.memo}
diff --git a/components/dashboard/sections/collectives/AllCollectives.tsx b/components/dashboard/sections/collectives/AllCollectives.tsx
index 6071a480606..cda05c1802d 100644
--- a/components/dashboard/sections/collectives/AllCollectives.tsx
+++ b/components/dashboard/sections/collectives/AllCollectives.tsx
@@ -147,7 +147,7 @@ const AllCollectives = ({ subpath }: Omit<DashboardSectionProps, 'accountSlug'>)
   const hostedAccounts = data?.accounts;
   const onClickRow = row => handleDrawer(row.original);
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader title={<FormattedMessage defaultMessage="All Collectives" id="uQguR/" />} />
       <Filterbar {...queryFilter} />
       {error && <MessageBoxGraphqlError error={error} mb={2} />}
diff --git a/components/dashboard/sections/collectives/CollectiveDetails.tsx b/components/dashboard/sections/collectives/CollectiveDetails.tsx
index 81ff32acd4a..b8db08bd21d 100644
--- a/components/dashboard/sections/collectives/CollectiveDetails.tsx
+++ b/components/dashboard/sections/collectives/CollectiveDetails.tsx
@@ -116,7 +116,7 @@ const HostFeeStructurePicker = ({ collective, host }: Partial<CollectiveDetailsP
       <PopoverTrigger asChild>
         <Button variant="outline">
           {formatHostFeeStructure(intl, collective.hostFeesStructure)}
-          <ChevronDown className="ml-4 h-4 w-4 flex-shrink-0 opacity-50" />
+          <ChevronDown className="ml-4 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent align="start">
@@ -145,7 +145,7 @@ const HostFeeStructurePicker = ({ collective, host }: Partial<CollectiveDetailsP
                 {formatHostFeeStructure(intl, HOST_FEE_STRUCTURE.CUSTOM_FEE)}
               </label>
             </div>
-            <div className="ml-6 mt-1 text-xs text-slate-700">
+            <div className="mt-1 ml-6 text-xs text-slate-700">
               <InputGroup
                 disabled={loading}
                 tabIndex={-1}
@@ -272,7 +272,7 @@ const ExpenseTypesPicker = ({ collective }: Partial<CollectiveDetailsProps>) =>
               .map(expenseType => i18nExpenseType(intl, expenseType))
               .join(', ') || <FormattedMessage defaultMessage="Custom" id="Sjo1P4" />
           )}
-          <ChevronDown className="ml-4 h-4 w-4 flex-shrink-0 opacity-50" />
+          <ChevronDown className="ml-4 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent align="start">
@@ -304,7 +304,7 @@ const ExpenseTypesPicker = ({ collective }: Partial<CollectiveDetailsProps>) =>
                 <FormattedMessage defaultMessage="Customize" id="TXpOBi" />
               </label>
             </div>
-            <div className="ml-6 mt-1 flex flex-col gap-1 text-slate-700">
+            <div className="mt-1 ml-6 flex flex-col gap-1 text-slate-700">
               {DISPLAYED_EXPENSE_TYPES.map(expenseType => (
                 <div key={expenseType}>
                   <label className="flex items-center gap-2 text-sm font-normal">
@@ -745,7 +745,7 @@ const CollectiveDetails = ({
           {drawerActionsContainer &&
             isHostedCollective &&
             createPortal(
-              <div className="flex flex-grow justify-end gap-2">
+              <div className="flex grow justify-end gap-2">
                 <MoreActionsMenu collective={collective} onEdit={onEdit}>
                   <Button className="rounded-full" variant="outline">
                     <FormattedMessage defaultMessage="More Actions" id="A7ugfn" />
diff --git a/components/dashboard/sections/collectives/FreezeAccountModal.tsx b/components/dashboard/sections/collectives/FreezeAccountModal.tsx
index e3b673e7557..53cc221a231 100644
--- a/components/dashboard/sections/collectives/FreezeAccountModal.tsx
+++ b/components/dashboard/sections/collectives/FreezeAccountModal.tsx
@@ -325,7 +325,7 @@ const FreezeAccountModal = ({
             )}
 
             <div className="mt-6 border-t border-dotted pt-4">
-              <div className="mb-4 mt-2 flex items-center gap-2 rounded-md border border-yellow-200 bg-yellow-50 px-5 py-4">
+              <div className="mt-2 mb-4 flex items-center gap-2 rounded-md border border-yellow-200 bg-yellow-50 px-5 py-4">
                 <Checkbox
                   id="confirm-freeze"
                   required
diff --git a/components/dashboard/sections/collectives/HostApplicationDrawer.tsx b/components/dashboard/sections/collectives/HostApplicationDrawer.tsx
index d4ecffdd1d1..4e8e6344792 100644
--- a/components/dashboard/sections/collectives/HostApplicationDrawer.tsx
+++ b/components/dashboard/sections/collectives/HostApplicationDrawer.tsx
@@ -407,7 +407,7 @@ function HostApplication({
               <Accordion type="single" collapsible className="mt-4 text-sm sm:col-span-3">
                 <AccordionItem value="description" className="rounded border px-4">
                   <AccordionTrigger>
-                    <div className="font-medium leading-6 text-slate-900">
+                    <div className="leading-6 font-medium text-slate-900">
                       <FormattedMessage id="Fields.description" defaultMessage="Description" />
                     </div>
                   </AccordionTrigger>
@@ -463,7 +463,7 @@ function HostApplication({
               <Accordion type="single" collapsible className="mt-4 text-sm sm:col-span-3">
                 <AccordionItem value="message" className="rounded border px-4">
                   <AccordionTrigger>
-                    <div className="font-medium leading-6 text-slate-900">
+                    <div className="leading-6 font-medium text-slate-900">
                       <FormattedMessage defaultMessage="Application Request" id="bFSM5Q" />
                     </div>
                   </AccordionTrigger>
diff --git a/components/dashboard/sections/collectives/HostApplicationRequests.tsx b/components/dashboard/sections/collectives/HostApplicationRequests.tsx
index d0206aae5f4..43b3a06a643 100644
--- a/components/dashboard/sections/collectives/HostApplicationRequests.tsx
+++ b/components/dashboard/sections/collectives/HostApplicationRequests.tsx
@@ -72,7 +72,7 @@ export default function HostApplicationRequests({
   const totalCount = query.data?.account?.hostApplicationRequests?.totalCount ?? 0;
 
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       {error ? (
         <MessageBoxGraphqlError error={error} mb={2} />
       ) : !loading && applicationRequests.length === 0 ? (
diff --git a/components/dashboard/sections/collectives/HostApplications.tsx b/components/dashboard/sections/collectives/HostApplications.tsx
index b46b47bb652..d884c4e2f4c 100644
--- a/components/dashboard/sections/collectives/HostApplications.tsx
+++ b/components/dashboard/sections/collectives/HostApplications.tsx
@@ -160,7 +160,7 @@ const HostApplications = ({ accountSlug: hostSlug }: DashboardSectionProps) => {
   const nbPlaceholders = currentViewCount < queryFilter.values.limit ? currentViewCount : queryFilter.values.limit;
 
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader title={<FormattedMessage id="Menu.HostApplications" defaultMessage="Host Applications" />} />
 
       <Filterbar {...queryFilter} />
diff --git a/components/dashboard/sections/collectives/HostedCollectives.tsx b/components/dashboard/sections/collectives/HostedCollectives.tsx
index b4f6c558881..07a934c246a 100644
--- a/components/dashboard/sections/collectives/HostedCollectives.tsx
+++ b/components/dashboard/sections/collectives/HostedCollectives.tsx
@@ -203,7 +203,7 @@ const HostedCollectives = ({ accountSlug: hostSlug, subpath }: DashboardSectionP
   const hostedAccounts = data?.host?.hostedAccounts;
   const onClickRow = row => handleDrawer(row.original);
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader
         title={<FormattedMessage id="HostedCollectives" defaultMessage="Hosted Collectives" />}
         actions={
diff --git a/components/dashboard/sections/contributions/Contributions.tsx b/components/dashboard/sections/contributions/Contributions.tsx
index 7b426bca89c..72b1d6fdb01 100644
--- a/components/dashboard/sections/contributions/Contributions.tsx
+++ b/components/dashboard/sections/contributions/Contributions.tsx
@@ -308,7 +308,7 @@ const getColumns = ({ intl, isIncoming, includeHostedAccounts, includeChildrenAc
                 }
               />
             </div>
-            <div className="absolute -bottom-[6px] -right-[6px] rounded-full">
+            <div className="absolute -right-[6px] -bottom-[6px] rounded-full">
               <AccountHoverCard
                 account={small}
                 trigger={
@@ -320,10 +320,10 @@ const getColumns = ({ intl, isIncoming, includeHostedAccounts, includeChildrenAc
             </div>
           </div>
           <div className="overflow-hidden">
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-5">
+            <div className="overflow-hidden text-sm leading-5 text-ellipsis whitespace-nowrap">
               {big.name || big.slug}
             </div>
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-normal leading-4 text-slate-700">
+            <div className="overflow-hidden text-xs leading-4 font-normal text-ellipsis whitespace-nowrap text-slate-700">
               {small.name || small.slug}
             </div>
           </div>
@@ -348,11 +348,11 @@ const getColumns = ({ intl, isIncoming, includeHostedAccounts, includeChildrenAc
                 <Avatar size={32} collective={toAccount} displayTitle={false} />
               </div>
               <div className="overflow-hidden">
-                <div className="overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-5">
+                <div className="overflow-hidden text-sm leading-5 text-ellipsis whitespace-nowrap">
                   {toAccount.name || toAccount.slug}
                 </div>
                 {tier && (
-                  <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-normal leading-4 text-slate-700">
+                  <div className="overflow-hidden text-xs leading-4 font-normal text-ellipsis whitespace-nowrap text-slate-700">
                     {tier.name}
                   </div>
                 )}
@@ -380,11 +380,11 @@ const getColumns = ({ intl, isIncoming, includeHostedAccounts, includeChildrenAc
                 <Avatar size={32} collective={fromAccount} displayTitle={false} />
               </div>
               <div className="overflow-hidden">
-                <div className="overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-5">
+                <div className="overflow-hidden text-sm leading-5 text-ellipsis whitespace-nowrap">
                   {fromAccount.name || fromAccount.slug}
                 </div>
                 {tier && (
-                  <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-normal leading-4 text-slate-700">
+                  <div className="overflow-hidden text-xs leading-4 font-normal text-ellipsis whitespace-nowrap text-slate-700">
                     {tier.name}
                   </div>
                 )}
@@ -427,7 +427,7 @@ const getColumns = ({ intl, isIncoming, includeHostedAccounts, includeChildrenAc
       const frequency = cell.getValue();
       return (
         ['MONTHLY', 'YEARLY'].includes(frequency) && (
-          <span className="text-sm font-light lowercase text-muted-foreground">{i18nFrequency(intl, frequency)}</span>
+          <span className="text-sm font-light text-muted-foreground lowercase">{i18nFrequency(intl, frequency)}</span>
         )
       );
     },
@@ -866,7 +866,7 @@ const Contributions = ({
 
   return (
     <React.Fragment>
-      <div className="flex max-w-screen-lg flex-col gap-4">
+      <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
         <DashboardHeader
           title={
             isIncoming ? (
diff --git a/components/dashboard/sections/contributions/CreatePendingOrderModal.tsx b/components/dashboard/sections/contributions/CreatePendingOrderModal.tsx
index 551fc1c166f..7cb2e83026d 100644
--- a/components/dashboard/sections/contributions/CreatePendingOrderModal.tsx
+++ b/components/dashboard/sections/contributions/CreatePendingOrderModal.tsx
@@ -404,7 +404,7 @@ const CreatePendingContributionForm = ({ host, onClose, error, edit }: CreatePen
   const amounts = getAmountsFromValues(values);
   return (
     <Form data-cy="create-pending-contribution-form" className="flex h-full flex-col overflow-y-hidden">
-      <div className="w-full flex-grow overflow-y-auto py-4">
+      <div className="w-full grow overflow-y-auto py-4">
         <Field
           name="toAccount"
           htmlFor="CreatePendingContribution-toAccount"
@@ -825,7 +825,7 @@ const CreatePendingContributionForm = ({ host, onClose, error, edit }: CreatePen
 
         {error && <MessageBoxGraphqlError error={error} mt={3} fontSize="13px" />}
       </div>
-      <div className="border-t-1 flex justify-center gap-4 border-t border-solid border-t-slate-100 pt-4">
+      <div className="flex justify-center gap-4 border-t border-t-1 border-solid border-t-slate-100 pt-4">
         <Button onClick={onClose} variant="outline" type="button">
           <FormattedMessage id="actions.cancel" defaultMessage="Cancel" />
         </Button>
diff --git a/components/dashboard/sections/expenses/ExpensePipelineOverview.tsx b/components/dashboard/sections/expenses/ExpensePipelineOverview.tsx
index 7529cdc3eff..a4e854dcb16 100644
--- a/components/dashboard/sections/expenses/ExpensePipelineOverview.tsx
+++ b/components/dashboard/sections/expenses/ExpensePipelineOverview.tsx
@@ -187,7 +187,7 @@ function WiseStatus(props: WiseStatusProps) {
         </div>
         <TransferwiseIcon size={16} />
       </div>
-      <div className="mt-2 flex-grow text-2xl font-bold text-slate-900">
+      <div className="mt-2 grow text-2xl font-bold text-slate-900">
         <FormattedMoneyAmount
           showCurrencyCode={false}
           currency={mainBalance?.currency}
@@ -305,7 +305,7 @@ function PayPalStatus(props: PayPalStatusProps) {
         />
         <Paypal size={16} />
       </div>
-      <div className="mt-2 flex-grow text-2xl font-bold text-slate-900">
+      <div className="mt-2 grow text-2xl font-bold text-slate-900">
         <FormattedMoneyAmount
           showCurrencyCode={false}
           currency={props.host?.paypalPreApproval?.balance?.currency}
@@ -380,7 +380,7 @@ function StripeIssuingStatus(props: StripeIssuingStatusProps) {
         />
         <CcStripe />
       </div>
-      <div className="mt-2 flex-grow text-2xl font-bold text-slate-900">
+      <div className="mt-2 grow text-2xl font-bold text-slate-900">
         <FormattedMoneyAmount
           showCurrencyCode={false}
           currency={props.host?.stripe?.issuingBalance?.currency}
diff --git a/components/dashboard/sections/expenses/HostCreateExpenseModal.tsx b/components/dashboard/sections/expenses/HostCreateExpenseModal.tsx
index 9fba816f68a..3903cb67ef4 100644
--- a/components/dashboard/sections/expenses/HostCreateExpenseModal.tsx
+++ b/components/dashboard/sections/expenses/HostCreateExpenseModal.tsx
@@ -427,7 +427,7 @@ export const HostCreateExpenseModal = ({
                   </StyledInputFormikField>
                 </div>
               </div>
-              <div className="border-t-1 mt-8 flex justify-end gap-4 border-t border-solid border-t-slate-100 pt-4">
+              <div className="mt-8 flex justify-end gap-4 border-t border-t-1 border-solid border-t-slate-100 pt-4">
                 <Button onClick={() => setOpen(false)} type="button" variant="outline" disabled={isSubmitting}>
                   <FormattedMessage id="actions.cancel" defaultMessage="Cancel" />
                 </Button>
diff --git a/components/dashboard/sections/expenses/HostDashboardExpenses.tsx b/components/dashboard/sections/expenses/HostDashboardExpenses.tsx
index 6c8cb7d3d5d..2bbc19650f8 100644
--- a/components/dashboard/sections/expenses/HostDashboardExpenses.tsx
+++ b/components/dashboard/sections/expenses/HostDashboardExpenses.tsx
@@ -226,7 +226,7 @@ const HostExpenses = ({ accountSlug: hostSlug }: DashboardSectionProps) => {
   };
 
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader title={<FormattedMessage id="Expenses" defaultMessage="Expenses" />} />
       {paypalPreApprovalError && (
         <MessageBox type="warning" mb={3} withIcon>
diff --git a/components/dashboard/sections/expenses/ReceivedExpenses.tsx b/components/dashboard/sections/expenses/ReceivedExpenses.tsx
index 0b725700cd0..1ad3d3f4bda 100644
--- a/components/dashboard/sections/expenses/ReceivedExpenses.tsx
+++ b/components/dashboard/sections/expenses/ReceivedExpenses.tsx
@@ -125,7 +125,7 @@ const ReceivedExpenses = ({ accountSlug }: DashboardSectionProps) => {
   const pageRoute = `/dashboard/${accountSlug}/expenses`;
 
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader
         title={<FormattedMessage defaultMessage="Received Expenses" id="1c0Y31" />}
         description={<FormattedMessage defaultMessage="Expenses submitted to your account." id="0I3Lbj" />}
diff --git a/components/dashboard/sections/expenses/ScheduledExpensesBanner.tsx b/components/dashboard/sections/expenses/ScheduledExpensesBanner.tsx
index fea80581eef..6e0f88ff940 100644
--- a/components/dashboard/sections/expenses/ScheduledExpensesBanner.tsx
+++ b/components/dashboard/sections/expenses/ScheduledExpensesBanner.tsx
@@ -155,7 +155,7 @@ const ScheduledExpensesBanner = ({ hostSlug, onSubmit, secondButton }) => {
             />
           }
           continueHandler={handlePayBatch}
-          overlayClassName="z-[1000]"
+          overlayClassName="z-1000"
         />
       )}
     </React.Fragment>
diff --git a/components/dashboard/sections/expenses/SubmittedExpenses.tsx b/components/dashboard/sections/expenses/SubmittedExpenses.tsx
index 8c0dd39f6eb..094beb92463 100644
--- a/components/dashboard/sections/expenses/SubmittedExpenses.tsx
+++ b/components/dashboard/sections/expenses/SubmittedExpenses.tsx
@@ -72,7 +72,7 @@ const SubmittedExpenses = ({ accountSlug }: DashboardSectionProps) => {
 
   return (
     <React.Fragment>
-      <div className="flex max-w-screen-lg flex-col gap-4">
+      <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
         <DashboardHeader
           title={<FormattedMessage defaultMessage="Submitted Expenses" id="NpGb+x" />}
           description={
diff --git a/components/dashboard/sections/expenses/reports/HostExpensesReportList.tsx b/components/dashboard/sections/expenses/reports/HostExpensesReportList.tsx
index 82a1a46f164..925e1e01fe4 100644
--- a/components/dashboard/sections/expenses/reports/HostExpensesReportList.tsx
+++ b/components/dashboard/sections/expenses/reports/HostExpensesReportList.tsx
@@ -213,7 +213,7 @@ export function HostExpensesReportList(props: DashboardSectionProps) {
 
   return (
     <React.Fragment>
-      <div className="flex max-w-screen-lg flex-col gap-4">
+      <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
         <DashboardHeader
           title={<FormattedMessage defaultMessage="Expense Reports" id="qC0ZXX" />}
           titleRoute={`/dashboard/${props.accountSlug}/reports/expenses`}
diff --git a/components/dashboard/sections/expenses/reports/HostExpensesReportView.tsx b/components/dashboard/sections/expenses/reports/HostExpensesReportView.tsx
index d8f6dcddc17..4c25e2375c6 100644
--- a/components/dashboard/sections/expenses/reports/HostExpensesReportView.tsx
+++ b/components/dashboard/sections/expenses/reports/HostExpensesReportView.tsx
@@ -104,7 +104,7 @@ export function HostExpensesReportView(props: DashboardSectionProps) {
 
   return (
     <React.Fragment>
-      <div className="flex max-w-screen-lg flex-col gap-4">
+      <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
         <DashboardHeader
           title={<FormattedMessage defaultMessage="Expense Reports" id="qC0ZXX" />}
           titleRoute={`/dashboard/${props.accountSlug}/reports/expenses`}
@@ -157,8 +157,8 @@ export function HostExpensesReportView(props: DashboardSectionProps) {
 
                       return (
                         // eslint-disable-next-line react/no-array-index-key
-                        <tr key={i} className="group border-b text-sm hover:bg-muted has-[[data-state=open]]:bg-muted">
-                          <td className="flex min-h-8 flex-1 items-center gap-1 overflow-hidden truncate text-wrap py-1 pl-6 text-left sm:pl-10">
+                        <tr key={i} className="group border-b text-sm hover:bg-muted has-data-[state=open]:bg-muted">
+                          <td className="flex min-h-8 flex-1 items-center gap-1 truncate overflow-hidden py-1 pl-6 text-left text-wrap sm:pl-10">
                             <AccountingCategoryLabel accountingCategory={item.accountingCategory} />
                             <Tooltip delayDuration={100}>
                               <TooltipTrigger asChild>
@@ -208,7 +208,7 @@ export function HostExpensesReportView(props: DashboardSectionProps) {
                   </tbody>
                   <tfoot className="py-4">
                     <tr>
-                      <td className="flex min-h-8 flex-1 items-center gap-1 overflow-hidden truncate text-wrap py-1 pl-6 text-left sm:pl-10">
+                      <td className="flex min-h-8 flex-1 items-center gap-1 truncate overflow-hidden py-1 pl-6 text-left text-wrap sm:pl-10">
                         <FormattedMessage defaultMessage="Total" id="MJ2jZQ" />
                         <Tooltip delayDuration={100}>
                           <TooltipTrigger asChild>
diff --git a/components/dashboard/sections/legal-documents/HostDashboardTaxForms.tsx b/components/dashboard/sections/legal-documents/HostDashboardTaxForms.tsx
index 88d8cd2d6a2..48dceaacfd5 100644
--- a/components/dashboard/sections/legal-documents/HostDashboardTaxForms.tsx
+++ b/components/dashboard/sections/legal-documents/HostDashboardTaxForms.tsx
@@ -143,7 +143,7 @@ const HostDashboardTaxForms = ({ accountSlug: hostSlug }: DashboardSectionProps)
   const getActions = useLegalDocumentActions(data?.host, refetch);
 
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader title={<FormattedMessage defaultMessage="Tax Forms" id="skSw4d" />} />
 
       <Filterbar {...queryFilter} />
diff --git a/components/dashboard/sections/legal-documents/LegalDocumentServiceBadge.tsx b/components/dashboard/sections/legal-documents/LegalDocumentServiceBadge.tsx
index e6b9a514543..d80e17c0e6f 100644
--- a/components/dashboard/sections/legal-documents/LegalDocumentServiceBadge.tsx
+++ b/components/dashboard/sections/legal-documents/LegalDocumentServiceBadge.tsx
@@ -8,7 +8,7 @@ import { Badge } from '../../../ui/Badge';
 
 export const LegalDocumentServiceBadge = ({ service }: { service: LegalDocumentService }) => {
   return (
-    <Badge className="whitespace-nowrap text-nowrap">
+    <Badge className="text-nowrap whitespace-nowrap">
       {service === 'OPENCOLLECTIVE' ? WebsiteName : startCase(service.toLowerCase())}
     </Badge>
   );
diff --git a/components/dashboard/sections/legal-documents/LegalDocumentStatusBadge.tsx b/components/dashboard/sections/legal-documents/LegalDocumentStatusBadge.tsx
index d590b08fa4c..2307cc76959 100644
--- a/components/dashboard/sections/legal-documents/LegalDocumentStatusBadge.tsx
+++ b/components/dashboard/sections/legal-documents/LegalDocumentStatusBadge.tsx
@@ -29,7 +29,7 @@ export const LegalDocumentStatusBadge = ({
 }) => {
   const intl = useIntl();
   return (
-    <Badge className="whitespace-nowrap text-nowrap" type={getBadgeType(status, isExpired)}>
+    <Badge className="text-nowrap whitespace-nowrap" type={getBadgeType(status, isExpired)}>
       {i18nLegalDocumentStatus(intl, status, isExpired)}
     </Badge>
   );
diff --git a/components/dashboard/sections/legal-documents/LegalDocumentsTable.tsx b/components/dashboard/sections/legal-documents/LegalDocumentsTable.tsx
index 9646bf6c89a..8ad9c372777 100644
--- a/components/dashboard/sections/legal-documents/LegalDocumentsTable.tsx
+++ b/components/dashboard/sections/legal-documents/LegalDocumentsTable.tsx
@@ -65,7 +65,7 @@ const columns: ColumnDef<LegalDocument>[] = [
           <DateTime value={requestedAt} dateStyle="medium" />
         </span>
       ) : (
-        <span className="italic text-slate-500">
+        <span className="text-slate-500 italic">
           <FormattedMessage defaultMessage="Never" id="du1laW" />
         </span>
       );
diff --git a/components/dashboard/sections/overview/AccountTable.tsx b/components/dashboard/sections/overview/AccountTable.tsx
index e239dbcd7ca..1e81c071eec 100644
--- a/components/dashboard/sections/overview/AccountTable.tsx
+++ b/components/dashboard/sections/overview/AccountTable.tsx
@@ -127,7 +127,7 @@ const columns: ColumnDef<AccountMetricsRow>[] = [
                   <Link
                     href={getCollectivePageRoute(account)}
                     className={clsx(
-                      'truncate hover:underline group-hover/row:text-foreground',
+                      'truncate group-hover/row:text-foreground hover:underline',
                       isSelected ? 'text-foreground' : 'text-muted-foreground',
                     )}
                   >
diff --git a/components/dashboard/sections/overview/Accounts.tsx b/components/dashboard/sections/overview/Accounts.tsx
index 01908eab348..5dfcf290359 100644
--- a/components/dashboard/sections/overview/Accounts.tsx
+++ b/components/dashboard/sections/overview/Accounts.tsx
@@ -25,7 +25,7 @@ function CollapsibleAccountsList({ accounts, label }) {
   return (
     <div className="rounded-xl border bg-background">
       <Collapsible>
-        <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between p-3 text-sm [&_svg]:data-[state=open]:rotate-180">
+        <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between p-3 text-sm data-[state=open]:[&_svg]:rotate-180">
           <div className="flex w-full flex-1 justify-between">
             <div className="flex items-center gap-2">
               <div className="font-medium">{label}</div>
diff --git a/components/dashboard/sections/overview/CollectiveOverview.tsx b/components/dashboard/sections/overview/CollectiveOverview.tsx
index b60d89fb714..73c80e8839f 100644
--- a/components/dashboard/sections/overview/CollectiveOverview.tsx
+++ b/components/dashboard/sections/overview/CollectiveOverview.tsx
@@ -158,7 +158,7 @@ export function CollectiveOverview({ accountSlug }: DashboardSectionProps) {
     const metric = metrics.find(m => m.id === queryFilter.values.subpath);
     if (metric) {
       return (
-        <div className="flex max-w-screen-lg flex-col gap-3">
+        <div className="flex max-w-(--breakpoint-lg) flex-col gap-3">
           <DashboardHeader
             title={<FormattedMessage id="AdminPanel.Menu.Overview" defaultMessage="Overview" />}
             subpathTitle={metric.label}
@@ -176,7 +176,7 @@ export function CollectiveOverview({ accountSlug }: DashboardSectionProps) {
   }
 
   return (
-    <div className="max-w-screen-lg space-y-6">
+    <div className="max-w-(--breakpoint-lg) space-y-6">
       <div className="flex flex-col gap-3">
         <DashboardHeader
           title={<FormattedMessage id="AdminPanel.Menu.Overview" defaultMessage="Overview" />}
@@ -202,7 +202,7 @@ export function CollectiveOverview({ accountSlug }: DashboardSectionProps) {
                           src="/static/images/dashboard.png"
                           aria-hidden="true"
                         />
-                        <AlertTitle className="text-balance text-lg leading-tight">
+                        <AlertTitle className="text-lg leading-tight text-balance">
                           <FormattedMessage
                             id="PreviewFeatures.CollectiveOverview.Welcome.Title"
                             defaultMessage="Welcome to your new Collective Overview"
@@ -226,7 +226,7 @@ export function CollectiveOverview({ accountSlug }: DashboardSectionProps) {
                     <Button
                       variant="ghost"
                       size="icon-xs"
-                      className="absolute right-1 top-1 text-muted-foreground"
+                      className="absolute top-1 right-1 text-muted-foreground"
                       onClick={dismiss}
                     >
                       <X size={16} />
diff --git a/components/dashboard/sections/overview/IndividualOverview.tsx b/components/dashboard/sections/overview/IndividualOverview.tsx
index 55680615a93..41af0bee981 100644
--- a/components/dashboard/sections/overview/IndividualOverview.tsx
+++ b/components/dashboard/sections/overview/IndividualOverview.tsx
@@ -22,7 +22,7 @@ const Home = ({ accountSlug }: DashboardSectionProps) => {
   const slug = router.query?.as || accountSlug;
 
   return (
-    <div className="flex max-w-screen-lg flex-col-reverse xl:flex-row">
+    <div className="flex max-w-(--breakpoint-lg) flex-col-reverse xl:flex-row">
       <div className="flex flex-1 flex-col gap-4">
         <DashboardHeader
           title={<FormattedMessage id="AdminPanel.Menu.Overview" defaultMessage="Overview" />}
@@ -78,7 +78,7 @@ const Home = ({ accountSlug }: DashboardSectionProps) => {
               </div>
 
               <button
-                className="absolute right-1 top-1 rounded-full p-2 text-slate-500 hover:bg-slate-50 hover:text-slate-900"
+                className="absolute top-1 right-1 rounded-full p-2 text-slate-500 hover:bg-slate-50 hover:text-slate-900"
                 onClick={dismiss}
               >
                 <X size={16} />
diff --git a/components/dashboard/sections/overview/Metric.tsx b/components/dashboard/sections/overview/Metric.tsx
index 4f2f973a7d0..80e2c74952b 100644
--- a/components/dashboard/sections/overview/Metric.tsx
+++ b/components/dashboard/sections/overview/Metric.tsx
@@ -90,7 +90,7 @@ export function Metric({
       className={clsx(
         'group flex flex-col gap-1 rounded-xl border transition-all',
         isButton &&
-          'cursor-pointer text-left ring-ring ring-offset-2 hover:shadow-lg focus:outline-none focus-visible:ring-2',
+          'cursor-pointer text-left ring-ring ring-offset-2 hover:shadow-lg focus:outline-hidden focus-visible:ring-2',
         className,
       )}
       {...(isButton && { onClick: props.onClick })}
diff --git a/components/dashboard/sections/overview/TimelineItem.tsx b/components/dashboard/sections/overview/TimelineItem.tsx
index 54d2191eb87..a7f3aceca49 100644
--- a/components/dashboard/sections/overview/TimelineItem.tsx
+++ b/components/dashboard/sections/overview/TimelineItem.tsx
@@ -54,7 +54,7 @@ const ActivityContent = ({
             fontSize="14px"
             lineHeight="16px"
             href={href}
-            className="font-medium !text-slate-900 hover:underline"
+            className="font-medium text-slate-900! hover:underline"
           >
             <FormattedMessage id="ContributeCard.ReadMore" defaultMessage="Read more" />
           </StyledLink>
@@ -102,7 +102,7 @@ const TimelineItem = ({ activity, openExpense }: ActivityListItemProps) => {
         ) : (
           <div className="flex min-w-0 flex-1 flex-col justify-between sm:flex-row sm:gap-1.5 sm:pt-1">
             <div className="align-baseline leading-6 text-foreground *:align-bottom">{description}</div>
-            <div className="flex items-center self-start whitespace-nowrap leading-6 text-muted-foreground">
+            <div className="flex items-center self-start leading-6 whitespace-nowrap text-muted-foreground">
               {isLastWeek ? (
                 dayjs(activity.createdAt).fromNow()
               ) : (
diff --git a/components/dashboard/sections/reports/AccountTransactionReport.tsx b/components/dashboard/sections/reports/AccountTransactionReport.tsx
index 61319b891fd..a8e696e5937 100644
--- a/components/dashboard/sections/reports/AccountTransactionReport.tsx
+++ b/components/dashboard/sections/reports/AccountTransactionReport.tsx
@@ -108,7 +108,7 @@ const TransactionReport = ({ accountSlug, subpath }: DashboardSectionProps) => {
   };
   return (
     <Fragment>
-      <div className="flex max-w-screen-lg flex-col gap-4">
+      <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
         <DashboardHeader
           title={<FormattedMessage id="TransactionReports" defaultMessage="Transaction Reports" />}
           titleRoute={`/dashboard/${accountSlug}/reports/transactions`}
@@ -142,7 +142,7 @@ const TransactionReport = ({ accountSlug, subpath }: DashboardSectionProps) => {
           ) : error ? (
             <MessageBoxGraphqlError error={error} />
           ) : (
-            <div className="space-y-10 overflow-hidden rounded-xl border pb-4 pt-8">
+            <div className="space-y-10 overflow-hidden rounded-xl border pt-8 pb-4">
               <ReportContent
                 report={report}
                 variables={variables}
@@ -197,7 +197,7 @@ const PreviewFeatureConfigButton = ({ layout, setLayout }) => {
         <PopoverContent align="end" sideOffset={8}>
           <div className="flex flex-col gap-4">
             <div className="space-y-2">
-              <h4 className="font-medium leading-none">Configure layout</h4>
+              <h4 className="leading-none font-medium">Configure layout</h4>
               <p className="text-sm text-muted-foreground">
                 {"We're testing layout options, please let us know what you prefer!"}
               </p>
diff --git a/components/dashboard/sections/reports/AccountTransactionReportsList.tsx b/components/dashboard/sections/reports/AccountTransactionReportsList.tsx
index 440c50b31fa..a5359990c6f 100644
--- a/components/dashboard/sections/reports/AccountTransactionReportsList.tsx
+++ b/components/dashboard/sections/reports/AccountTransactionReportsList.tsx
@@ -94,7 +94,7 @@ const AccountTransactionReportList = ({ accountSlug }: DashboardSectionProps) =>
   );
 
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader
         title={<FormattedMessage id="TransactionReports" defaultMessage="Transaction Reports" />}
         actions={<div className="flex items-center gap-2"></div>}
diff --git a/components/dashboard/sections/reports/DefinitionTooltip.tsx b/components/dashboard/sections/reports/DefinitionTooltip.tsx
index 99e8db2ba08..4149f1736b3 100644
--- a/components/dashboard/sections/reports/DefinitionTooltip.tsx
+++ b/components/dashboard/sections/reports/DefinitionTooltip.tsx
@@ -11,7 +11,7 @@ interface Props extends React.ComponentPropsWithoutRef<'span'> {
 export function DefinitionTooltip({ children, className, definition }: Props) {
   return (
     <Tooltip>
-      <TooltipTrigger className="inline cursor-help break-before-auto break-words text-left" asChild>
+      <TooltipTrigger className="inline cursor-help break-before-auto text-left break-words" asChild>
         <span
           className={cn(
             'underline decoration-slate-300 decoration-dashed underline-offset-2 transition-colors hover:decoration-slate-400',
diff --git a/components/dashboard/sections/reports/HostReportTabs.tsx b/components/dashboard/sections/reports/HostReportTabs.tsx
index f32cfd4a59e..2e82cdab43c 100644
--- a/components/dashboard/sections/reports/HostReportTabs.tsx
+++ b/components/dashboard/sections/reports/HostReportTabs.tsx
@@ -7,7 +7,7 @@ const Tab = ({ title, description, isActive, onClick }) => {
     <button
       onClick={onClick}
       className={clsx(
-        'flex flex-col items-start justify-stretch gap-2 border-b-2 px-6 py-4 text-left ring-ring transition-colors focus:outline-none focus-visible:ring-2 sm:gap-1 sm:px-10 sm:pb-8 sm:pt-10',
+        'flex flex-col items-start justify-stretch gap-2 border-b-2 px-6 py-4 text-left ring-ring transition-colors focus:outline-hidden focus-visible:ring-2 sm:gap-1 sm:px-10 sm:pt-10 sm:pb-8',
         isActive
           ? 'border-b-primary bg-white'
           : 'border-b-transparent text-slate-700 hover:bg-slate-50 hover:text-inherit',
diff --git a/components/dashboard/sections/reports/HostTransactionReport.tsx b/components/dashboard/sections/reports/HostTransactionReport.tsx
index bafc79e4477..9768a072f40 100644
--- a/components/dashboard/sections/reports/HostTransactionReport.tsx
+++ b/components/dashboard/sections/reports/HostTransactionReport.tsx
@@ -115,7 +115,7 @@ const HostTransactionReport = ({ accountSlug: hostSlug, subpath }: DashboardSect
   };
   return (
     <Fragment>
-      <div className="flex max-w-screen-lg flex-col gap-4">
+      <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
         <DashboardHeader
           title={<FormattedMessage id="TransactionReports" defaultMessage="Transaction Reports" />}
           titleRoute={`/dashboard/${hostSlug}/reports/transactions`}
@@ -207,7 +207,7 @@ const PreviewFeatureConfigButton = ({ layout, setLayout }) => {
         <PopoverContent align="end" sideOffset={8}>
           <div className="flex flex-col gap-4">
             <div className="space-y-2">
-              <h4 className="font-medium leading-none">Configure layout</h4>
+              <h4 className="leading-none font-medium">Configure layout</h4>
               <p className="text-sm text-muted-foreground">
                 {"We're testing layout options, please let us know what you prefer!"}
               </p>
diff --git a/components/dashboard/sections/reports/HostTransactionReportsList.tsx b/components/dashboard/sections/reports/HostTransactionReportsList.tsx
index 268eb691b41..9980009b80c 100644
--- a/components/dashboard/sections/reports/HostTransactionReportsList.tsx
+++ b/components/dashboard/sections/reports/HostTransactionReportsList.tsx
@@ -108,7 +108,7 @@ const HostTransactionReportList = ({ accountSlug: hostSlug }: DashboardSectionPr
   );
 
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader
         title={<FormattedMessage id="TransactionReports" defaultMessage="Transaction Reports" />}
         actions={<div className="flex items-center gap-2"></div>}
diff --git a/components/dashboard/sections/reports/LegacyColumnRows.tsx b/components/dashboard/sections/reports/LegacyColumnRows.tsx
index 0cc984abacf..5f040222857 100644
--- a/components/dashboard/sections/reports/LegacyColumnRows.tsx
+++ b/components/dashboard/sections/reports/LegacyColumnRows.tsx
@@ -57,7 +57,7 @@ export function LegacyColumnRows({ parentRow, currency, showCreditDebit }) {
         return (
           <tr
             key={`legacy-${legacyColumn.amountKey}`}
-            className="group text-sm hover:bg-muted has-[[data-state=open]]:bg-muted"
+            className="group text-sm hover:bg-muted has-data-[state=open]:bg-muted"
           >
             <td className="flex min-h-8 items-center gap-1 py-1 pl-8 text-left text-muted-foreground sm:pl-12">
               <CornerDownRight size={14} className="inline-block shrink-0" />
diff --git a/components/dashboard/sections/reports/ReportContent.tsx b/components/dashboard/sections/reports/ReportContent.tsx
index 3e31bf2c056..97454b8d913 100644
--- a/components/dashboard/sections/reports/ReportContent.tsx
+++ b/components/dashboard/sections/reports/ReportContent.tsx
@@ -66,8 +66,8 @@ export function ReportContent({
 
                 return (
                   <React.Fragment key={JSON.stringify(row.filter)}>
-                    <tr className="group text-sm hover:bg-muted has-[[data-state=open]]:bg-muted">
-                      <td className="flex min-h-8 flex-1 items-center gap-1 overflow-hidden truncate text-wrap py-1 pl-6 text-left sm:pl-10">
+                    <tr className="group text-sm hover:bg-muted has-data-[state=open]:bg-muted">
+                      <td className="flex min-h-8 flex-1 items-center gap-1 truncate overflow-hidden py-1 pl-6 text-left text-wrap sm:pl-10">
                         <span className="underline-offset-2 transition-colors hover:decoration-slate-400">
                           {row.label || <TransactionReportRowLabel filter={row.filter} />}
                         </span>
diff --git a/components/dashboard/sections/reports/ReportPeriodSelector.tsx b/components/dashboard/sections/reports/ReportPeriodSelector.tsx
index ffd089a4372..006a14d9dac 100644
--- a/components/dashboard/sections/reports/ReportPeriodSelector.tsx
+++ b/components/dashboard/sections/reports/ReportPeriodSelector.tsx
@@ -162,7 +162,7 @@ export const ReportPeriodSelector = ({
                 className={clsx(
                   'rounded-md py-1',
                   selectedTimeUnit === 'MONTH'
-                    ? 'bg-white text-foreground shadow-sm'
+                    ? 'bg-white text-foreground shadow-xs'
                     : 'bg-transparent text-muted-foreground',
                 )}
                 onClick={() => setSelectedTimeUnit(TimeUnit.MONTH)}
@@ -174,7 +174,7 @@ export const ReportPeriodSelector = ({
                 className={clsx(
                   'rounded-md py-1',
                   selectedTimeUnit === 'QUARTER'
-                    ? 'bg-white text-foreground shadow-sm'
+                    ? 'bg-white text-foreground shadow-xs'
                     : 'bg-transparent text-muted-foreground',
                 )}
                 onClick={() => setSelectedTimeUnit(TimeUnit.QUARTER)}
@@ -186,7 +186,7 @@ export const ReportPeriodSelector = ({
                 className={clsx(
                   'rounded-md py-1',
                   selectedTimeUnit === 'YEAR'
-                    ? 'bg-white text-foreground shadow-sm'
+                    ? 'bg-white text-foreground shadow-xs'
                     : 'bg-transparent text-muted-foreground',
                 )}
                 onClick={() => setSelectedTimeUnit(TimeUnit.YEAR)}
diff --git a/components/dashboard/sections/reports/legacy/HostDashboardReports.tsx b/components/dashboard/sections/reports/legacy/HostDashboardReports.tsx
index c4a6b230f1d..579e55682f1 100644
--- a/components/dashboard/sections/reports/legacy/HostDashboardReports.tsx
+++ b/components/dashboard/sections/reports/legacy/HostDashboardReports.tsx
@@ -219,7 +219,7 @@ const HostDashboardReports = ({ accountSlug: hostSlug }: DashboardSectionProps)
   const collectives = queryFilter.values.account ? [{ slug: queryFilter.values.account }] : undefined;
 
   return (
-    <div className="flex max-w-screen-lg flex-col gap-4">
+    <div className="flex max-w-(--breakpoint-lg) flex-col gap-4">
       <DashboardHeader
         title={<FormattedMessage id="Reports" defaultMessage="Reports" />}
         actions={
diff --git a/components/dashboard/sections/tax-information/TaxFormPreview.tsx b/components/dashboard/sections/tax-information/TaxFormPreview.tsx
index b2ae853df99..6fd128cd0ce 100644
--- a/components/dashboard/sections/tax-information/TaxFormPreview.tsx
+++ b/components/dashboard/sections/tax-information/TaxFormPreview.tsx
@@ -71,7 +71,7 @@ const MemoizedTaxFormPreview = React.memo(({ url }: { url: string }) => {
 
   return (
     <div ref={contentWrapperRef}>
-      <div key={currentRender.time} className={cn({ 'blur-sm': hasPendingReRender || !isInitialized })}>
+      <div key={currentRender.time} className={cn({ 'blur-xs': hasPendingReRender || !isInitialized })}>
         {currentRender.result}
       </div>
       {hasPendingReRender && nextRender && nextRender.time !== currentRender.time && (
diff --git a/components/dashboard/sections/tax-information/TaxFormTypeSelectFields.tsx b/components/dashboard/sections/tax-information/TaxFormTypeSelectFields.tsx
index c8e3345d4e5..bfb2ed24b87 100644
--- a/components/dashboard/sections/tax-information/TaxFormTypeSelectFields.tsx
+++ b/components/dashboard/sections/tax-information/TaxFormTypeSelectFields.tsx
@@ -42,7 +42,7 @@ export const TaxFormTypeSelectFields = ({
   return (
     <div>
       <div>
-        <label htmlFor="isUSPersonOrEntity" className="mb-2 text-sm font-bold leading-none">
+        <label htmlFor="isUSPersonOrEntity" className="mb-2 text-sm leading-none font-bold">
           Are you a US Person or Entity?
         </label>
         <HintText>US citizen, resident, green card holder, or US-incorporated entity.</HintText>
@@ -57,7 +57,7 @@ export const TaxFormTypeSelectFields = ({
       </div>
       {values.isUSPersonOrEntity !== null && (
         <div className="mt-4">
-          <label htmlFor="submitterType" className="text-sm font-bold leading-none">
+          <label htmlFor="submitterType" className="text-sm leading-none font-bold">
             Are you submitting this form as…
           </label>
           <ButtonSet
diff --git a/components/dashboard/sections/tax-information/TaxInformationForm.tsx b/components/dashboard/sections/tax-information/TaxInformationForm.tsx
index 5eabaf7285f..f4ef2bf84d6 100644
--- a/components/dashboard/sections/tax-information/TaxInformationForm.tsx
+++ b/components/dashboard/sections/tax-information/TaxInformationForm.tsx
@@ -209,7 +209,7 @@ export const TaxInformationForm = ({
                               />
                             )}
                           </StyledInputFormikField>
-                          <p className="mb-4 mt-3 text-sm text-neutral-700">
+                          <p className="mt-3 mb-4 text-sm text-neutral-700">
                             {
                               'I agree to be legally bound by the document, and agree to the Open Collective Terms and Privacy Policy. Click on "I agree" to sign this document.'
                             }
diff --git a/components/dashboard/sections/tax-information/TaxInformationFormDialog.tsx b/components/dashboard/sections/tax-information/TaxInformationFormDialog.tsx
index ecba5345e29..6a64fd0a6c3 100644
--- a/components/dashboard/sections/tax-information/TaxInformationFormDialog.tsx
+++ b/components/dashboard/sections/tax-information/TaxInformationFormDialog.tsx
@@ -39,7 +39,7 @@ export const TaxInformationFormDialog = ({ account, open, onOpenChange, onSucces
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <Overlay className="fixed inset-0 z-[3000] max-h-screen min-h-full overflow-y-auto bg-white px-0 py-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out data-[state=open]:zoom-in">
+      <Overlay className="fixed inset-0 z-3000 max-h-screen min-h-full overflow-y-auto bg-white px-0 py-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in">
         <div className="sticky top-0 z-50 flex items-center justify-between border-b border-gray-100 bg-white px-6 py-4 shadow-md">
           <div className="text-sm">
             <h2 className="text-xl font-bold">
diff --git a/components/dashboard/sections/tax-information/W8BenEForm.tsx b/components/dashboard/sections/tax-information/W8BenEForm.tsx
index f30f21d4dd9..fff4728cf19 100644
--- a/components/dashboard/sections/tax-information/W8BenEForm.tsx
+++ b/components/dashboard/sections/tax-information/W8BenEForm.tsx
@@ -295,7 +295,7 @@ export const W8BenETaxFormFields = ({ formik }: { formik: FormikProps<W8BenETaxF
               <p className="mb-2 text-sm font-bold text-neutral-800">I certify that (select all that apply):</p>
               <StyledInputFormikField name="certifyBeneficialOwnerCountry">
                 {({ field }) => (
-                  <label className="cursor-pointer text-sm font-normal leading-normal">
+                  <label className="cursor-pointer text-sm leading-normal font-normal">
                     <Checkbox
                       className={cn('mr-2 align-text-top', { 'border-red-500': field.error })}
                       name={field.name}
@@ -309,7 +309,7 @@ export const W8BenETaxFormFields = ({ formik }: { formik: FormikProps<W8BenETaxF
               </StyledInputFormikField>
               <StyledInputFormikField name="certifyDerivesIncome">
                 {({ field }) => (
-                  <label className="cursor-pointer text-sm font-normal leading-normal">
+                  <label className="cursor-pointer text-sm leading-normal font-normal">
                     <Checkbox
                       className={cn('mr-2 align-text-top', { 'border-red-500': field.error })}
                       name={field.name}
@@ -324,7 +324,7 @@ export const W8BenETaxFormFields = ({ formik }: { formik: FormikProps<W8BenETaxF
               </StyledInputFormikField>
               <StyledInputFormikField name="certifyForeignCorporation">
                 {({ field }) => (
-                  <label className="cursor-pointer text-sm font-normal leading-normal">
+                  <label className="cursor-pointer text-sm leading-normal font-normal">
                     <Checkbox
                       className={cn('mr-2 align-text-top', { 'border-red-500': field.error })}
                       name={field.name}
@@ -480,7 +480,7 @@ export const W8BenETaxFormFields = ({ formik }: { formik: FormikProps<W8BenETaxF
 
       <StyledInputFormikField name="hasCapacityToSign">
         {({ field }) => (
-          <label className="cursor-pointer text-sm font-normal leading-normal">
+          <label className="cursor-pointer text-sm leading-normal font-normal">
             <Checkbox
               className={cn('mr-2 align-text-top', { 'border-red-500': field.error })}
               name={field.name}
@@ -496,7 +496,7 @@ export const W8BenETaxFormFields = ({ formik }: { formik: FormikProps<W8BenETaxF
 
       <StyledInputFormikField name="certifyStatus">
         {({ field }) => (
-          <label className="cursor-pointer text-sm font-normal leading-normal">
+          <label className="cursor-pointer text-sm leading-normal font-normal">
             <Checkbox
               className={cn('mr-2 align-text-top', { 'border-red-500': field.error })}
               name={field.name}
@@ -516,7 +516,7 @@ export const W8BenETaxFormFields = ({ formik }: { formik: FormikProps<W8BenETaxF
 
       <StyledInputFormikField name="hasConfirmedTOS">
         {({ field }) => (
-          <label className="cursor-pointer text-sm font-normal leading-normal">
+          <label className="cursor-pointer text-sm leading-normal font-normal">
             <Checkbox
               className={cn('mr-2 align-text-top', { 'border-red-500': field.error })}
               name={field.name}
diff --git a/components/dashboard/sections/tax-information/W8BenForm.tsx b/components/dashboard/sections/tax-information/W8BenForm.tsx
index 0f933c5cd57..ac7f50e3f4b 100644
--- a/components/dashboard/sections/tax-information/W8BenForm.tsx
+++ b/components/dashboard/sections/tax-information/W8BenForm.tsx
@@ -238,7 +238,7 @@ export const W8BenTaxFormFields = ({ formik }: { formik: FormikProps<W8BenTaxFor
         <React.Fragment>
           <StyledInputFormikField name="certifiesResidentCountry">
             {({ field }) => (
-              <label className="cursor-pointer text-sm font-normal leading-normal">
+              <label className="cursor-pointer text-sm leading-normal font-normal">
                 <Checkbox
                   className={cn('mr-2 align-text-top', { 'border-red-500': field.error })}
                   name={field.name}
@@ -332,7 +332,7 @@ export const W8BenTaxFormFields = ({ formik }: { formik: FormikProps<W8BenTaxFor
 
       <StyledInputFormikField name="hasConfirmedTOS">
         {({ field }) => (
-          <label className="cursor-pointer text-sm font-normal leading-normal">
+          <label className="cursor-pointer text-sm leading-normal font-normal">
             <Checkbox
               className={cn('mr-2 align-text-top', { 'border-red-500': field.error })}
               name={field.name}
diff --git a/components/dashboard/sections/tax-information/W9Form.tsx b/components/dashboard/sections/tax-information/W9Form.tsx
index e4029999d89..d4d284845b7 100644
--- a/components/dashboard/sections/tax-information/W9Form.tsx
+++ b/components/dashboard/sections/tax-information/W9Form.tsx
@@ -188,7 +188,7 @@ export const W9TaxFormFields = ({ formik }: { formik: FormikProps<W9TaxFormValue
       </StyledInputFormikField>
       <StyledInputFormikField name="hasConfirmedTOS">
         {({ field }) => (
-          <label className="cursor-pointer text-sm font-normal leading-normal">
+          <label className="cursor-pointer text-sm leading-normal font-normal">
             <Checkbox
               className={cn('mr-2 align-text-top', { 'border-red-500': field.error })}
               name={field.name}
diff --git a/components/dashboard/sections/transactions-imports/CSVColumnSelector.tsx b/components/dashboard/sections/transactions-imports/CSVColumnSelector.tsx
index 6e3d48ed98e..4d575ff5fc9 100644
--- a/components/dashboard/sections/transactions-imports/CSVColumnSelector.tsx
+++ b/components/dashboard/sections/transactions-imports/CSVColumnSelector.tsx
@@ -10,12 +10,12 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.
 export const CSVColumnSelector = ({ label, selected, columns, onChange, SettingsDropdownMenuContent = null }) => {
   return (
     <div className="flex items-stretch">
-      <div className="relative flex items-center rounded-bl-md rounded-tl-md border border-r-0 border-neutral-200 bg-neutral-100 px-3 text-sm font-medium text-neutral-700">
+      <div className="relative flex items-center rounded-tl-md rounded-bl-md border border-r-0 border-neutral-200 bg-neutral-100 px-3 text-sm font-medium text-neutral-700">
         {label}
       </div>
       <Select onValueChange={onChange} value={selected}>
-        <SelectTrigger className={cn('rounded-none', { 'rounded-br-md rounded-tr-md': !SettingsDropdownMenuContent })}>
-          <div className="truncate italic text-neutral-800">
+        <SelectTrigger className={cn('rounded-none', { 'rounded-tr-md rounded-br-md': !SettingsDropdownMenuContent })}>
+          <div className="truncate text-neutral-800 italic">
             <SelectValue />
           </div>
         </SelectTrigger>
@@ -32,7 +32,7 @@ export const CSVColumnSelector = ({ label, selected, columns, onChange, Settings
           <DropdownMenuTrigger asChild>
             <Button
               variant="outline"
-              className="rounded-bl-none rounded-tl-none border-l-0 px-2"
+              className="rounded-tl-none rounded-bl-none border-l-0 px-2"
               aria-label="Configure"
             >
               <Settings size={16} color="#777" />
diff --git a/components/dashboard/sections/transactions-imports/FilterWithRawValueButton.tsx b/components/dashboard/sections/transactions-imports/FilterWithRawValueButton.tsx
index 8a969622bed..3a244dadf09 100644
--- a/components/dashboard/sections/transactions-imports/FilterWithRawValueButton.tsx
+++ b/components/dashboard/sections/transactions-imports/FilterWithRawValueButton.tsx
@@ -26,7 +26,7 @@ export function FilterWithRawValueButton({
         >
           <Filter size={14} className="inline" />
           {SecondaryIcon && (
-            <SecondaryIcon size={12} className="radius-50 absolute -bottom-1 -right-1 bg-white bg-opacity-50" />
+            <SecondaryIcon size={12} className="radius-50 bg-opacity-50 absolute -right-1 -bottom-1 bg-white" />
           )}
         </Button>
       </TooltipTrigger>
diff --git a/components/dashboard/sections/transactions-imports/SuggestedContributionsTable.tsx b/components/dashboard/sections/transactions-imports/SuggestedContributionsTable.tsx
index f269c781c16..958947a71cf 100644
--- a/components/dashboard/sections/transactions-imports/SuggestedContributionsTable.tsx
+++ b/components/dashboard/sections/transactions-imports/SuggestedContributionsTable.tsx
@@ -32,7 +32,7 @@ export const SuggestedContributionsTable = ({
         data={contributions}
         getRowClassName={({ original }) =>
           selectedContribution?.id === original.id
-            ? 'bg-blue-50 font-semibold shadow-inner shadow-blue-100 !border-l-2 border-l-blue-500'
+            ? 'bg-blue-50 font-semibold shadow-inner shadow-blue-100 border-l-2! border-l-blue-500'
             : ''
         }
         emptyMessage={() => (
diff --git a/components/dashboard/sections/transactions-imports/TransactionsImport.tsx b/components/dashboard/sections/transactions-imports/TransactionsImport.tsx
index a7cb23ca526..4813ccb1c6c 100644
--- a/components/dashboard/sections/transactions-imports/TransactionsImport.tsx
+++ b/components/dashboard/sections/transactions-imports/TransactionsImport.tsx
@@ -406,7 +406,7 @@ export const TransactionsImport = ({ accountSlug, importId }) => {
               {/** Import details (creation date, last update, file info) */}
               <div
                 className={cn(
-                  'border border-neutral-200 bg-white p-4 text-base shadow-sm',
+                  'border border-neutral-200 bg-white p-4 text-base shadow-xs',
                   hasNewData ? 'rounded-tl-lg rounded-tr-lg border-b-0' : 'rounded-lg',
                 )}
               >
@@ -501,7 +501,7 @@ export const TransactionsImport = ({ accountSlug, importId }) => {
               {!hasNewData ? (
                 <div className="h-[51px]" />
               ) : (
-                <div className="sticky top-0 z-50 flex items-center justify-between rounded-none rounded-bl-lg rounded-br-lg bg-blue-500 px-4 py-2 text-sm text-white animate-in fade-in">
+                <div className="sticky top-0 z-50 flex items-center justify-between rounded-none rounded-br-lg rounded-bl-lg bg-blue-500 px-4 py-2 text-sm text-white animate-in fade-in">
                   <span className="flex items-center gap-2">
                     <Info size={18} className="text-info" />
                     <FormattedMessage
@@ -711,7 +711,7 @@ export const TransactionsImport = ({ accountSlug, importId }) => {
                             >
                               <MessageCircle size={16} className={hasNote ? 'text-neutral-600' : 'text-neutral-300'} />
                               {hasNote && (
-                                <div className="absolute right-[6px] top-[6px] flex h-[8px] w-[8px] items-center justify-center rounded-full bg-yellow-400 text-xs text-white"></div>
+                                <div className="absolute top-[6px] right-[6px] flex h-[8px] w-[8px] items-center justify-center rounded-full bg-yellow-400 text-xs text-white"></div>
                               )}
                             </Button>
                           );
@@ -735,7 +735,7 @@ export const TransactionsImport = ({ accountSlug, importId }) => {
                                     <Button
                                       variant="outline"
                                       size="xs"
-                                      className="whitespace-nowrap text-xs"
+                                      className="text-xs whitespace-nowrap"
                                       onClick={async () => {
                                         await setRowsStatus(
                                           rowsActions.canRestore,
@@ -762,7 +762,7 @@ export const TransactionsImport = ({ accountSlug, importId }) => {
                                     <Button
                                       variant="outline"
                                       size="xs"
-                                      className="whitespace-nowrap text-xs"
+                                      className="text-xs whitespace-nowrap"
                                       onClick={async () => {
                                         await setRowsStatus(
                                           rowsActions.canIgnore,
@@ -789,7 +789,7 @@ export const TransactionsImport = ({ accountSlug, importId }) => {
                                     <Button
                                       variant="outline"
                                       size="xs"
-                                      className="whitespace-nowrap text-xs"
+                                      className="text-xs whitespace-nowrap"
                                       onClick={async () => {
                                         await setRowsStatus(
                                           rowsActions.canPutOnHold,
diff --git a/components/dashboard/sections/transactions/TransactionDrawer.tsx b/components/dashboard/sections/transactions/TransactionDrawer.tsx
index f623238f90b..a4419396e11 100644
--- a/components/dashboard/sections/transactions/TransactionDrawer.tsx
+++ b/components/dashboard/sections/transactions/TransactionDrawer.tsx
@@ -354,7 +354,7 @@ function TransactionDetails({ transactionId, getActions }: TransactionDetailsPro
               <React.Fragment>
                 <InfoList className="mb-6 sm:grid-cols-2">
                   <InfoListItem
-                    className="border-b border-t-0"
+                    className="border-t-0 border-b"
                     title={<FormattedMessage defaultMessage="Account" id="TwyMau" />}
                     value={
                       <AccountHoverCard
@@ -373,7 +373,7 @@ function TransactionDetails({ transactionId, getActions }: TransactionDetailsPro
                   />
 
                   <InfoListItem
-                    className="border-b border-t-0"
+                    className="border-t-0 border-b"
                     title={
                       transaction.type === 'CREDIT' ? (
                         <FormattedMessage defaultMessage="Sender" id="nbwXXN" />
diff --git a/components/dashboard/sections/updates/SingleUpdateView.tsx b/components/dashboard/sections/updates/SingleUpdateView.tsx
index 42a3fa86058..55bcbb8e7d1 100644
--- a/components/dashboard/sections/updates/SingleUpdateView.tsx
+++ b/components/dashboard/sections/updates/SingleUpdateView.tsx
@@ -124,7 +124,7 @@ const SingleUpdateView = ({ updateId }) => {
   );
 
   return (
-    <div className="flex max-w-screen-lg flex-col-reverse lg:flex-row">
+    <div className="flex max-w-(--breakpoint-lg) flex-col-reverse lg:flex-row">
       <div className="flex flex-1 flex-col gap-6">
         <Link className="flex w-fit items-center text-sm text-gray-500" href={getDashboardRoute(account, `updates`)}>
           <ArrowLeft size="14px" className="mr-1" />
diff --git a/components/dashboard/sections/updates/UpdateFormView.tsx b/components/dashboard/sections/updates/UpdateFormView.tsx
index 355a8954ab9..a8ee62ae83c 100644
--- a/components/dashboard/sections/updates/UpdateFormView.tsx
+++ b/components/dashboard/sections/updates/UpdateFormView.tsx
@@ -276,7 +276,7 @@ const FormBody = ({ update, accountSlug }) => {
                   label={<FormattedMessage id="Title" defaultMessage="Title" />}
                   required
                 >
-                  {({ field }) => <Input {...field} data-cy="update-title" className="flex-grow" maxLength={255} />}
+                  {({ field }) => <Input {...field} data-cy="update-title" className="grow" maxLength={255} />}
                 </StyledInputFormikField>
                 <Field name="html">
                   {({ field, meta }) => (
@@ -507,7 +507,7 @@ const UpdateFormView = ({ updateId, accountSlug }) => {
   });
 
   return (
-    <div className="flex max-w-screen-lg flex-col-reverse xl:flex-row">
+    <div className="flex max-w-(--breakpoint-lg) flex-col-reverse xl:flex-row">
       <div className="flex flex-1 flex-col gap-6">
         <Link
           className="flex w-fit items-center text-sm text-gray-500"
diff --git a/components/dashboard/sections/updates/index.tsx b/components/dashboard/sections/updates/index.tsx
index 0f52b630f90..dbc2d1fd452 100644
--- a/components/dashboard/sections/updates/index.tsx
+++ b/components/dashboard/sections/updates/index.tsx
@@ -58,7 +58,7 @@ const UpdatePost = ({ update, account }) => {
         </div>
       </div>
       {update.summary && <HTMLContent content={update.summary} />}
-      <div className="flex flex-grow justify-between">
+      <div className="flex grow justify-between">
         <div>
           <EmojiReactions reactions={update.reactions} />
         </div>
@@ -152,7 +152,7 @@ const UpdatesList = () => {
   const updates = data?.account?.updates;
 
   return (
-    <div className="flex max-w-screen-lg flex-col-reverse xl:flex-row">
+    <div className="flex max-w-(--breakpoint-lg) flex-col-reverse xl:flex-row">
       <div className="flex flex-1 flex-col gap-6">
         <DashboardHeader
           title={<FormattedMessage id="updates" defaultMessage="Updates" />}
diff --git a/components/edit-collective/sections/ManagePaymentMethods.tsx b/components/edit-collective/sections/ManagePaymentMethods.tsx
index 4f147d7f33f..2a672944e5b 100644
--- a/components/edit-collective/sections/ManagePaymentMethods.tsx
+++ b/components/edit-collective/sections/ManagePaymentMethods.tsx
@@ -289,17 +289,17 @@ function PaymentMethodItem(props: PaymentMethodItemProps) {
             {getPaymentMethodIcon(props.paymentMethod, props.paymentMethod.account, 24)}
           </div>
           <div>
-            <p className="text-xs font-semibold leading-5 text-black">
+            <p className="text-xs leading-5 font-semibold text-black">
               {getPaymentMethodName(props.paymentMethod as any)}
             </p>
             {getPaymentMethodMetadata(props.paymentMethod) && (
-              <p className="text-xs font-normal leading-4 text-gray-400">
+              <p className="text-xs leading-4 font-normal text-gray-400">
                 {getPaymentMethodMetadata(props.paymentMethod)}
               </p>
             )}
             {hasRecurringContributions && (
               <StyledLink
-                className="text-xs font-normal leading-4 text-gray-400"
+                className="text-xs leading-4 font-normal text-gray-400"
                 href={`/dashboard/${props.account.slug}/outgoing-contributions?status=ACTIVE&status=ERROR&type=RECURRING&paymentMethod=${props.paymentMethod.id}`}
               >
                 <FormattedMessage
diff --git a/components/edit-collective/sections/Webhooks.js b/components/edit-collective/sections/Webhooks.js
index a857762dcb8..bb0272d8fe4 100644
--- a/components/edit-collective/sections/Webhooks.js
+++ b/components/edit-collective/sections/Webhooks.js
@@ -176,7 +176,7 @@ class Webhooks extends React.Component {
     const { intl, data } = this.props;
 
     return (
-      <div key={index} className="rounded-lg border bg-white p-6 text-card-foreground shadow-sm">
+      <div key={index} className="rounded-lg border bg-white p-6 text-card-foreground shadow-xs">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <div className="rounded-full bg-slate-100 p-2">
@@ -291,7 +291,7 @@ class Webhooks extends React.Component {
 
         <Separator className="my-6" />
 
-        <div className="mb-6 mt-8 flex items-center justify-between">
+        <div className="mt-8 mb-6 flex items-center justify-between">
           <h3 className="text-xl font-bold">
             <FormattedMessage
               defaultMessage="Webhooks for {collective}"
@@ -305,7 +305,7 @@ class Webhooks extends React.Component {
         </div>
 
         {webhooks.length === 0 ? (
-          <div className="rounded-lg border bg-card py-12 text-center text-card-foreground shadow-sm">
+          <div className="rounded-lg border bg-card py-12 text-center text-card-foreground shadow-xs">
             <WebhookIcon className="mx-auto mb-4 h-16 w-16 text-gray-400" />
             <h4 className="text-lg font-semibold">
               <FormattedMessage defaultMessage="No webhooks configured" id="prsPHX" />
diff --git a/components/edit-collective/sections/fiscal-host/ActiveFiscalHost.tsx b/components/edit-collective/sections/fiscal-host/ActiveFiscalHost.tsx
index 2a7a9aa0911..d9d6e3d0ba6 100644
--- a/components/edit-collective/sections/fiscal-host/ActiveFiscalHost.tsx
+++ b/components/edit-collective/sections/fiscal-host/ActiveFiscalHost.tsx
@@ -104,7 +104,7 @@ export function ActiveFiscalHost(props: ActiveFiscalHostProps) {
 
   return (
     <div>
-      <h2 className="mb-2 mt-8 text-base font-bold">
+      <h2 className="mt-8 mb-2 text-base font-bold">
         <FormattedMessage defaultMessage="Active Fiscal Host" id="e2wNyb" />
       </h2>
       <div className="flex justify-between gap-4 rounded-lg border border-gray-300 p-4">
diff --git a/components/edit-collective/sections/fiscal-host/FiscalHostOCFTransition.tsx b/components/edit-collective/sections/fiscal-host/FiscalHostOCFTransition.tsx
index dfa0bbe4b3e..428ffd38d94 100644
--- a/components/edit-collective/sections/fiscal-host/FiscalHostOCFTransition.tsx
+++ b/components/edit-collective/sections/fiscal-host/FiscalHostOCFTransition.tsx
@@ -142,7 +142,7 @@ export const FiscalHostOCFTransition = ({ collective }) => {
       <div className="mt-4 flex flex-col gap-3">
         {/** Recurring contributions */}
         <Collapsible className="rounded-md border border-gray-300 p-4" {...getOpenProps('recurringContributions')}>
-          <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm [&_svg]:data-[state=open]:rotate-180">
+          <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm data-[state=open]:[&_svg]:rotate-180">
             <div className="font-medium">Paused Recurring Contributions</div>
             <ChevronButton />
           </CollapsibleTrigger>
@@ -179,7 +179,7 @@ export const FiscalHostOCFTransition = ({ collective }) => {
         </Collapsible>
         {/** Balance */}
         <Collapsible className="rounded-md border border-gray-300 p-4" {...getOpenProps('balance')}>
-          <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm [&_svg]:data-[state=open]:rotate-180">
+          <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm data-[state=open]:[&_svg]:rotate-180">
             <div className="font-medium">{step2Label}</div>
             <ChevronButton />
           </CollapsibleTrigger>
@@ -209,7 +209,7 @@ export const FiscalHostOCFTransition = ({ collective }) => {
         {/** Move Host */}
         {!data.account.newAccounts.totalCount && (
           <Collapsible className="rounded-md border border-gray-300 p-4" {...getOpenProps('moveHost')}>
-            <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm [&_svg]:data-[state=open]:rotate-180">
+            <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm data-[state=open]:[&_svg]:rotate-180">
               <div className="font-medium">Find a new Fiscal Host on Open Collective</div>
               <ChevronButton />
             </CollapsibleTrigger>
@@ -278,7 +278,7 @@ export const FiscalHostOCFTransition = ({ collective }) => {
         )}
         {/** Starting your own Fiscal Host */}
         <Collapsible className="rounded-md border border-gray-300 p-4" {...getOpenProps('ownHost')}>
-          <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm [&_svg]:data-[state=open]:rotate-180">
+          <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm data-[state=open]:[&_svg]:rotate-180">
             <div className="font-medium">Starting your own Fiscal Host</div>
             <ChevronButton />
           </CollapsibleTrigger>
@@ -319,7 +319,7 @@ export const FiscalHostOCFTransition = ({ collective }) => {
         </Collapsible>
         {/** Leave OCF */}
         <Collapsible className="rounded-md border border-gray-300 p-4" {...getOpenProps('leaveHost')}>
-          <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm [&_svg]:data-[state=open]:rotate-180">
+          <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm data-[state=open]:[&_svg]:rotate-180">
             <div className="font-medium">Leaving Open Collective Foundation</div>
             <ChevronButton />
           </CollapsibleTrigger>
@@ -345,7 +345,7 @@ export const FiscalHostOCFTransition = ({ collective }) => {
         {/** Reactivating your recurring contributions */}
         {data.account.pausedContributions.totalCount > 0 && (
           <Collapsible className="rounded-md border border-gray-300 p-4" {...getOpenProps('reactivateContributions')}>
-            <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm [&_svg]:data-[state=open]:rotate-180">
+            <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm data-[state=open]:[&_svg]:rotate-180">
               <div className="font-medium">Reactivating your recurring contributions</div>
               <ChevronButton />
             </CollapsibleTrigger>
@@ -364,7 +364,7 @@ export const FiscalHostOCFTransition = ({ collective }) => {
         )}
         {/** External Host */}
         <Collapsible className="rounded-md border border-gray-300 p-4" {...getOpenProps('externalHost')}>
-          <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm [&_svg]:data-[state=open]:rotate-180">
+          <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm data-[state=open]:[&_svg]:rotate-180">
             <div className="font-medium">Your new Fiscal Host isn’t on Open Collective</div>
             <ChevronButton />
           </CollapsibleTrigger>
@@ -382,7 +382,7 @@ export const FiscalHostOCFTransition = ({ collective }) => {
         </Collapsible>
         {/** More Options */}
         <Collapsible className="rounded-md border border-gray-300 p-4" {...getOpenProps('moreOptions')}>
-          <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm [&_svg]:data-[state=open]:rotate-180">
+          <CollapsibleTrigger className="group flex w-full flex-1 items-center justify-between text-sm data-[state=open]:[&_svg]:rotate-180">
             <div className="font-medium">More options</div>
             <ChevronButton />
           </CollapsibleTrigger>
diff --git a/components/edit-collective/tiers/EditTierModal.js b/components/edit-collective/tiers/EditTierModal.js
index f4f1e7cf277..e6d799349af 100644
--- a/components/edit-collective/tiers/EditTierModal.js
+++ b/components/edit-collective/tiers/EditTierModal.js
@@ -563,7 +563,7 @@ FormFields.propTypes = {
 
 const EditSectionContainer = styled(Flex)`
   overflow-y: scroll;
-  flex-grow: 1;
+  grow: 1;
   flex-direction: column;
   padding-right: 0.65rem;
   min-width: 250px;
@@ -576,7 +576,7 @@ const EditSectionContainer = styled(Flex)`
 const PreviewSectionContainer = styled(Flex)`
   overflow: hidden;
   max-height: 600px;
-  flex-grow: 1;
+  grow: 1;
   min-width: 300px;
   justify-content: center;
   @media (max-width: 700px) {
diff --git a/components/expenses/ConfirmOCRValues.tsx b/components/expenses/ConfirmOCRValues.tsx
index 882aa9675bf..bf8a3d81e0b 100644
--- a/components/expenses/ConfirmOCRValues.tsx
+++ b/components/expenses/ConfirmOCRValues.tsx
@@ -26,7 +26,7 @@ export const ConfirmOCRValues = ({
     <MessageBox type={hasMismatches ? 'warning' : 'info'}>
       <div className="flex items-center">
         <Checkbox id="confirm-expense-ocr-values" onCheckedChange={onConfirm} />
-        <label htmlFor="confirm-expense-ocr-values" className="ml-2 text-xs font-medium leading-none">
+        <label htmlFor="confirm-expense-ocr-values" className="ml-2 text-xs leading-none font-medium">
           <FormattedMessage defaultMessage="I have confirmed the date and amount." id="wXQfoE" />
         </label>
       </div>
diff --git a/components/expenses/DeclineExpenseInviteButton.tsx b/components/expenses/DeclineExpenseInviteButton.tsx
index ffcebd33fab..ce2a9e9e0b7 100644
--- a/components/expenses/DeclineExpenseInviteButton.tsx
+++ b/components/expenses/DeclineExpenseInviteButton.tsx
@@ -65,10 +65,10 @@ export default function DeclineExpenseInviteButton(props: DeclineExpenseInviteBu
             <FormattedMessage defaultMessage="Notes" id="expense.notes" />
           </Label>
           <Textarea showCount className="max-h-40" {...formik.getFieldProps('declineReason')} maxLength={255} />
-          <div className="ml-1 mt-1 h-4 text-xs text-muted-foreground">
+          <div className="mt-1 ml-1 h-4 text-xs text-muted-foreground">
             <FormattedMessage defaultMessage="Provide a reason for declining this expense invitation" id="Iom3HU" />
           </div>
-          <div className="ml-1 mt-1 h-4 text-xs text-red-500">
+          <div className="mt-1 ml-1 h-4 text-xs text-red-500">
             {formik.errors.declineReason && formik.touched.declineReason ? formik.errors.declineReason : ''}
           </div>
         </div>
diff --git a/components/expenses/ExpenseForm.js b/components/expenses/ExpenseForm.js
index 97b04609fdf..92b285bfbf7 100644
--- a/components/expenses/ExpenseForm.js
+++ b/components/expenses/ExpenseForm.js
@@ -828,7 +828,7 @@ const ExpenseFormBody = ({
                     </div>
                     {formik.values.accountingCategory?.instructions && (
                       <React.Fragment>
-                        <div className="mb-2 mt-4 text-sm font-semibold text-slate-800">
+                        <div className="mt-4 mb-2 text-sm font-semibold text-slate-800">
                           <FormattedMessage
                             id="withColon"
                             defaultMessage="{item}:"
diff --git a/components/expenses/ExpenseItemForm.js b/components/expenses/ExpenseItemForm.js
index b614c66d2a3..63988ff4174 100644
--- a/components/expenses/ExpenseItemForm.js
+++ b/components/expenses/ExpenseItemForm.js
@@ -137,7 +137,7 @@ const WithOCRComparisonWarning = ({ comparison, formatValue, children, mrClass =
   <div className="relative flex grow">
     {children}
     {Boolean(comparison?.hasMismatch) && (
-      <div className={cn('absolute right-0 top-0 mt-[9px]', mrClass)} data-cy="mismatch-warning">
+      <div className={cn('absolute top-0 right-0 mt-[9px]', mrClass)} data-cy="mismatch-warning">
         <Tooltip>
           <TooltipTrigger>
             <AlertTriangle size={16} color="#CB9C03" />
diff --git a/components/expenses/PayoutMethodData.js b/components/expenses/PayoutMethodData.js
index 74343a81688..42d8545ef20 100644
--- a/components/expenses/PayoutMethodData.js
+++ b/components/expenses/PayoutMethodData.js
@@ -16,7 +16,7 @@ const renderObject = object =>
     }
     return [
       ...acc,
-      <p className="text-ellipsis text-sm leading-5" key={key}>
+      <p className="text-sm leading-5 text-ellipsis" key={key}>
         <FormattedMessage id="withColon" defaultMessage="{item}:" values={{ item: startCase(key) }} /> {value}
       </p>,
     ];
@@ -53,7 +53,7 @@ const PayoutMethodData = ({ payoutMethod, showLabel = true, isLoading = false })
               <PrivateInfoIcon />
             </Container>
           )}
-          <div className="overflow-hidden text-ellipsis text-sm text-slate-700">
+          <div className="overflow-hidden text-sm text-ellipsis text-slate-700">
             {getPmData(payoutMethod, 'email', isLoading)}
           </div>
         </div>
diff --git a/components/expenses/list/SubmittedExpenseListItem.tsx b/components/expenses/list/SubmittedExpenseListItem.tsx
index 396987cfdf1..4d9eda02a4d 100644
--- a/components/expenses/list/SubmittedExpenseListItem.tsx
+++ b/components/expenses/list/SubmittedExpenseListItem.tsx
@@ -71,7 +71,7 @@ export function SubmittedExpenseListItem(props: SubmittedExpenseListItemProps) {
       }}
     >
       <div>
-        <div className="mb-1 max-w-[250px] overflow-hidden text-ellipsis text-sm font-medium text-slate-800 sm:max-w-[400px]">
+        <div className="mb-1 max-w-[250px] overflow-hidden text-sm font-medium text-ellipsis text-slate-800 sm:max-w-[400px]">
           {props.expense.description}
         </div>
         <div className="text-xs text-slate-700">
@@ -141,7 +141,7 @@ export function SubmittedExpenseListItem(props: SubmittedExpenseListItemProps) {
           )}
         </div>
         <div className="flex flex-wrap items-end justify-end gap-2">
-          <span className="rounded-xl rounded-ee-none rounded-se-none bg-slate-100 px-3 py-1 text-xs text-slate-800">
+          <span className="rounded-xl rounded-se-none rounded-ee-none bg-slate-100 px-3 py-1 text-xs text-slate-800">
             {i18nExpenseType(intl, props.expense.type)} #{props.expense.legacyId}
           </span>
 
diff --git a/components/navigation/DrawerMenu.tsx b/components/navigation/DrawerMenu.tsx
index d1e4badd9d1..f68a178b6e7 100644
--- a/components/navigation/DrawerMenu.tsx
+++ b/components/navigation/DrawerMenu.tsx
@@ -111,7 +111,7 @@ export const DrawerMenu = ({ onClose, open, anchor = 'right', children, classNam
         {...props}
       >
         {children}
-        <div className="absolute right-2 top-2">
+        <div className="absolute top-2 right-2">
           <DrawerCloseButton onClick={onClose} />
         </div>
       </SheetContent>
diff --git a/components/navigation/Footer.tsx b/components/navigation/Footer.tsx
index 7db4012c715..79b4abdc7c9 100644
--- a/components/navigation/Footer.tsx
+++ b/components/navigation/Footer.tsx
@@ -56,7 +56,7 @@ const Footer = () => {
   if (LoggedInUser) {
     return (
       <footer className="flex justify-center border-t px-6 py-12 md:px-8">
-        <div className="flex w-full max-w-screen-xl flex-1 flex-col items-start gap-6 sm:flex-row md:flex-col">
+        <div className="flex w-full max-w-(--breakpoint-xl) flex-1 flex-col items-start gap-6 sm:flex-row md:flex-col">
           <div className="flex w-full flex-1 flex-col items-start justify-between gap-6 md:flex-row md:items-center">
             <div className="flex flex-col items-start gap-4 md:flex-row md:items-center">
               <Link href="/home">
@@ -124,7 +124,7 @@ const Footer = () => {
 
   return (
     <footer className="flex-row border-t p-6 py-12">
-      <div className="mx-auto flex w-full max-w-screen-xl flex-1 flex-col gap-8">
+      <div className="mx-auto flex w-full max-w-(--breakpoint-xl) flex-1 flex-col gap-8">
         <div className="flex flex-col gap-4">
           <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
             <Link href="/">
diff --git a/components/navigation/ProfileMenu.tsx b/components/navigation/ProfileMenu.tsx
index 55998050c02..20dcd59ea29 100644
--- a/components/navigation/ProfileMenu.tsx
+++ b/components/navigation/ProfileMenu.tsx
@@ -68,7 +68,7 @@ const MenuItem = ({
     <React.Fragment>
       <div className="flex w-full items-center gap-2" title={label}>
         <Icon className="shrink-0 text-muted-foreground transition-colors group-hover:text-foreground" size={16} />
-        <div className="shrink overflow-hidden text-ellipsis text-nowrap">{label}</div>
+        <div className="shrink overflow-hidden text-nowrap text-ellipsis">{label}</div>
         {appending}
       </div>
     </React.Fragment>
@@ -216,7 +216,7 @@ const ProfileMenu = ({ logoutParameters }: { logoutParameters?: Parameters<UserC
         </div>
         <Separator className="sm:hidden" />
         <div className="flex flex-col sm:w-[256px]">
-          <div className="flex-grow border-l text-sm sm:basis-0 sm:overflow-y-auto">
+          <div className="grow border-l text-sm sm:basis-0 sm:overflow-y-auto">
             <ProfileMenuMemberships user={LoggedInUser} closeDrawer={() => setMenuOpen(false)} />
           </div>
         </div>
@@ -229,7 +229,7 @@ const ProfileMenu = ({ logoutParameters }: { logoutParameters?: Parameters<UserC
       <Popover open={isMenuOpen} onOpenChange={open => setMenuOpen(open)}>
         <PopoverTrigger asChild>
           <button
-            className="rounded-full ring-black ring-offset-1 focus:outline-none focus:ring-2"
+            className="rounded-full ring-black ring-offset-1 focus:ring-2 focus:outline-hidden"
             data-cy="user-menu-trigger"
           >
             <Avatar collective={get(LoggedInUser, 'collective')} radius={32} />
diff --git a/components/navigation/ProfileMenuMemberships.tsx b/components/navigation/ProfileMenuMemberships.tsx
index 498130810d3..d5b425e2b3b 100644
--- a/components/navigation/ProfileMenuMemberships.tsx
+++ b/components/navigation/ProfileMenuMemberships.tsx
@@ -87,11 +87,11 @@ const MembershipLine = ({ user, membership, closeDrawer }) => {
       </MenuLink>
 
       {Boolean(user?.canSeeAdminPanel(membership.collective)) && (
-        <div className="absolute bottom-1 right-1 top-1">
+        <div className="absolute top-1 right-1 bottom-1">
           <Tooltip>
             <TooltipTrigger>
               <Link
-                className="flex h-7 w-7 items-center justify-center rounded-md border bg-white text-slate-950 opacity-0 transition-all hover:border-white hover:bg-slate-900 hover:text-white group-hover:opacity-100"
+                className="flex h-7 w-7 items-center justify-center rounded-md border bg-white text-slate-950 opacity-0 transition-all group-hover:opacity-100 hover:border-white hover:bg-slate-900 hover:text-white"
                 href={getDashboardRoute(membership.collective)}
                 onClick={closeDrawer}
               >
diff --git a/components/navigation/TopBar.tsx b/components/navigation/TopBar.tsx
index 17b6fa9777c..831674b0f9f 100644
--- a/components/navigation/TopBar.tsx
+++ b/components/navigation/TopBar.tsx
@@ -37,7 +37,7 @@ const MobileFooterLink = styled(Link)<{ $isActive: boolean }>`
   align-items: center;
   flex-direction: column;
   gap: 8px;
-  flex-grow: 1;
+  grow: 1;
   font-size: 12px;
   line-height: 16px;
   font-weight: 500;
@@ -67,7 +67,7 @@ const MainNavItem = styled(Link)<{ $isActive: boolean }>`
   align-items: center;
   gap: 8px;
   max-width: 340px;
-  flex-shrink: 1;
+  shrink: 1;
   color: #0f172a;
   font-size: 14px;
   height: 32px;
diff --git a/components/navigation/preview/TopBar.tsx b/components/navigation/preview/TopBar.tsx
index 2f20d2dd611..2c13abdbed9 100644
--- a/components/navigation/preview/TopBar.tsx
+++ b/components/navigation/preview/TopBar.tsx
@@ -27,7 +27,7 @@ const MainNavItem = props => {
     <Link
       {...props}
       className={clsx(
-        'flex h-8 shrink items-center gap-2 truncate whitespace-nowrap rounded-full px-1 text-sm font-medium text-foreground transition-colors hover:bg-slate-100 md:px-3',
+        'flex h-8 shrink items-center gap-2 truncate rounded-full px-1 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-slate-100 md:px-3',
         props.isActive && 'bg-slate-100',
         props.className,
       )}
@@ -60,7 +60,7 @@ const DashboardProfileQuickLink = ({ slug, toProfile }) => {
     <Link
       href={toProfile ? getCollectivePageRoute({ slug }) : getDashboardRoute({ slug })}
       className={cn(
-        'group shrink-0 items-center justify-center rounded-full border border-border text-sm font-medium leading-6 antialiased transition-colors hover:border-border sm:border-transparent',
+        'group shrink-0 items-center justify-center rounded-full border border-border text-sm leading-6 font-medium antialiased transition-colors hover:border-border sm:border-transparent',
         'text-muted-foreground hover:bg-slate-50 hover:text-foreground',
         'flex h-8 w-8 px-0 sm:w-auto sm:px-3',
       )}
@@ -133,7 +133,7 @@ const TopBar = ({ account, navTitle = '' }: TopBarProps) => {
                     <FormattedMessage id="Dashboard" defaultMessage="Dashboard" />
                   </span>
                 </MainNavItem>
-                <DividerIcon size={32} className="-ml-4 -mr-3 shrink-0 text-slate-300" />
+                <DividerIcon size={32} className="-mr-3 -ml-4 shrink-0 text-slate-300" />
                 <AccountSwitcher activeSlug={activeSlug} defaultSlug={defaultSlug} setDefaultSlug={setDefaultSlug} />
 
                 <DashboardProfileQuickLink slug={activeSlug} toProfile />
@@ -144,7 +144,7 @@ const TopBar = ({ account, navTitle = '' }: TopBarProps) => {
                   <React.Fragment>
                     <DividerIcon size={32} className="-mx-2 text-slate-300" />
 
-                    <MainNavItem href={getCollectivePageRoute(parentCollective)} className="!font-normal">
+                    <MainNavItem href={getCollectivePageRoute(parentCollective)} className="font-normal!">
                       {parentCollective.name}
                     </MainNavItem>
                   </React.Fragment>
diff --git a/components/onboarding-modal/OnboardingModal.js b/components/onboarding-modal/OnboardingModal.js
index cca345601d4..cd21ab39d20 100644
--- a/components/onboarding-modal/OnboardingModal.js
+++ b/components/onboarding-modal/OnboardingModal.js
@@ -66,7 +66,7 @@ const ResponsiveModalHeader = styled(ModalHeader)`
 
 const ResponsiveModalBody = styled(ModalBody)`
   @media screen and (max-width: 40em) {
-    flex-grow: 1;
+    grow: 1;
   }
 `;
 
@@ -84,7 +84,7 @@ const ModalWithImage = styled(ResponsiveModal)`
   }
 `;
 const FormWithStyles = styled(Form)`
-  flex-grow: 1;
+  grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
diff --git a/components/orders/OrdersWithData.js b/components/orders/OrdersWithData.js
index ed69b0c9815..a4da44998fa 100644
--- a/components/orders/OrdersWithData.js
+++ b/components/orders/OrdersWithData.js
@@ -194,7 +194,7 @@ const OrdersWithData = ({ accountSlug, title, status, showPlatformTip, canCreate
   return (
     <Box maxWidth={1000} width="100%" m="0 auto">
       <div className="flex flex-wrap justify-between gap-4">
-        <h1 className="text-2xl font-bold leading-10 tracking-tight">
+        <h1 className="text-2xl leading-10 font-bold tracking-tight">
           {title || <FormattedMessage id="FinancialContributions" defaultMessage="Financial Contributions" />}
         </h1>
         <div className="w-[276px]">
diff --git a/components/orders/PaymentMethodPicker.tsx b/components/orders/PaymentMethodPicker.tsx
index ea841b426b6..7ea1511bad6 100644
--- a/components/orders/PaymentMethodPicker.tsx
+++ b/components/orders/PaymentMethodPicker.tsx
@@ -179,9 +179,9 @@ export default function PaymentMethodPicker(props: PaymentMethodPickerProps) {
                   />
                   <div className="mr-3 w-7 text-center">{getPaymentMethodIcon(pm, pm.account, 24)}</div>
                   <div>
-                    <p className="text-xs font-semibold leading-5 text-black">{getPaymentMethodName(pm as any)}</p>
+                    <p className="text-xs leading-5 font-semibold text-black">{getPaymentMethodName(pm as any)}</p>
                     {getPaymentMethodMetadata(pm, props.order?.totalAmount?.valueInCents) && (
-                      <p className="text-xs font-normal leading-4 text-gray-400">
+                      <p className="text-xs leading-4 font-normal text-gray-400">
                         {getPaymentMethodMetadata(pm, props.order?.totalAmount?.valueInCents)}
                       </p>
                     )}
@@ -345,10 +345,10 @@ function StripeSetupPaymentMethodOption(props: StripeSetupPaymentMethodOptionPro
           <CreditCard color="#c9ced4" size={24} />
         </div>
         <div>
-          <p className="text-xs font-semibold leading-5 text-black">
+          <p className="text-xs leading-5 font-semibold text-black">
             <FormattedMessage defaultMessage="New payment method" id="L3WVIm" />
           </p>
-          <p className="text-xs font-normal leading-4 text-gray-400">
+          <p className="text-xs leading-4 font-normal text-gray-400">
             {availableMethodLabels && availableMethodLabels.length > 0 ? (
               availableMethodLabels.join(', ')
             ) : (
@@ -387,7 +387,7 @@ function PayPalSetupOption(props: PayPalSetupOptionProps) {
           <PayPal size={24} />
         </div>
         <div>
-          <p className="text-xs font-semibold leading-5 text-black">
+          <p className="text-xs leading-5 font-semibold text-black">
             <FormattedMessage id="PayoutMethod.Type.Paypal" defaultMessage="PayPal" />
           </p>
         </div>
diff --git a/components/personal-token/CreatePersonalTokenModal.js b/components/personal-token/CreatePersonalTokenModal.js
index 9200a591a56..0c276590529 100644
--- a/components/personal-token/CreatePersonalTokenModal.js
+++ b/components/personal-token/CreatePersonalTokenModal.js
@@ -159,7 +159,7 @@ const CreatePersonalTokenModal = ({ account, onSuccess, onClose, ...props }) =>
                         id="preAuthorize2FA-checkbox"
                         onCheckedChange={value => form.setFieldValue(field.name, value)}
                       />
-                      <label htmlFor="preAuthorize2FA-checkbox" className="ml-2 text-xs font-normal leading-none">
+                      <label htmlFor="preAuthorize2FA-checkbox" className="ml-2 text-xs leading-none font-normal">
                         <FormattedMessage
                           defaultMessage="Allow this token to directly use operations that would normally require 2FA"
                           id="JClbMN"
diff --git a/components/personal-token/PersonalTokenSettings.js b/components/personal-token/PersonalTokenSettings.js
index b5265c1ef4a..b60551cd105 100644
--- a/components/personal-token/PersonalTokenSettings.js
+++ b/components/personal-token/PersonalTokenSettings.js
@@ -254,7 +254,7 @@ const PersonalTokenSettings = ({ backPath, id }) => {
                           checked={field.value}
                           onCheckedChange={value => form.setFieldValue(field.name, value)}
                         />
-                        <label htmlFor="preAuthorize2FA-checkbox" className="ml-2 text-xs font-normal leading-none">
+                        <label htmlFor="preAuthorize2FA-checkbox" className="ml-2 text-xs leading-none font-normal">
                           <FormattedMessage
                             defaultMessage="Allow this token to directly use operations that would normally require 2FA"
                             id="JClbMN"
diff --git a/components/search-page/SearchCollectiveCard.js b/components/search-page/SearchCollectiveCard.js
index e83feed5191..8d4674d3cd6 100644
--- a/components/search-page/SearchCollectiveCard.js
+++ b/components/search-page/SearchCollectiveCard.js
@@ -110,8 +110,8 @@ const SearchCollectiveCard = ({ collective, ...props }) => {
           )}
           {collective.description && (
             <div className="text-xs">
-              <div className="mb-1 mt-2 flex items-center justify-between gap-2">
-                <span className="font-medium uppercase text-slate-700">
+              <div className="mt-2 mb-1 flex items-center justify-between gap-2">
+                <span className="font-medium text-slate-700 uppercase">
                   <FormattedMessage defaultMessage="About Us" id="ZjDH42" />
                 </span>
                 <hr className="flex-1" />
diff --git a/components/search/ContextPill.tsx b/components/search/ContextPill.tsx
index beab8c5e6c4..5d588bb0307 100644
--- a/components/search/ContextPill.tsx
+++ b/components/search/ContextPill.tsx
@@ -15,14 +15,14 @@ export const ContextPill = ({ slug, onRemove }) => {
     fetchPolicy: 'cache-first',
   });
   return (
-    <div className="flex max-w-fit shrink-0 select-none items-center gap-2 overflow-hidden rounded-md bg-muted pr-1">
-      <Avatar collective={data?.account} size={20} className="m-1 bg-white shadow-sm" />
+    <div className="flex max-w-fit shrink-0 items-center gap-2 overflow-hidden rounded-md bg-muted pr-1 select-none">
+      <Avatar collective={data?.account} size={20} className="m-1 bg-white shadow-xs" />
       <div className="text-sm">{data?.account.name ?? slug}</div>
       {onRemove && (
         <button
           tabIndex={-1}
           onClick={onRemove}
-          className="flex size-5 items-center justify-center rounded p-0.5 hover:bg-slate-200 focus:outline-none focus-visible:bg-slate-200"
+          className="flex size-5 items-center justify-center rounded p-0.5 hover:bg-slate-200 focus:outline-hidden focus-visible:bg-slate-200"
         >
           <X size={16} className="text-muted-foreground" />
         </button>
diff --git a/components/search/SearchCommand.tsx b/components/search/SearchCommand.tsx
index 24e78902ff7..78c89d86c76 100644
--- a/components/search/SearchCommand.tsx
+++ b/components/search/SearchCommand.tsx
@@ -220,12 +220,12 @@ export const SearchCommand = ({ open, setOpen }) => {
           onValueChange={setInput}
           value={input}
           placeholder={queryFilter.values.context ? '' : 'Search...'}
-          className="flex h-11 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-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
         />
         {isLoading && <StyledSpinner size={16} className="absolute right-4 text-muted-foreground" />}
       </div>
 
-      <CommandList className="max-h-[600px] border-b border-t-0 [&_.text-xs_mark]:px-1 [&_.text-xs_mark]:py-[1px] [&_mark]:rounded-xl [&_mark]:bg-amber-100 [&_mark]:px-1 [&_mark]:py-2">
+      <CommandList className="max-h-[600px] border-t-0 border-b [&_.text-xs_mark]:px-1 [&_.text-xs_mark]:py-[1px] [&_mark]:rounded-xl [&_mark]:bg-amber-100 [&_mark]:px-1 [&_mark]:py-2">
         <CommandItem value="-" className="hidden" />
         {recentlyVisited.length > 0 && debouncedInput === '' && (
           <CommandGroup heading="Recent">
diff --git a/components/search/result/CommentResult.tsx b/components/search/result/CommentResult.tsx
index 913b5391f05..105f6c5b21d 100644
--- a/components/search/result/CommentResult.tsx
+++ b/components/search/result/CommentResult.tsx
@@ -37,7 +37,7 @@ export function CommentResult({ comment, highlights }: { comment: CommentResultD
         </div>
         {otherHighlight && (
           <div className="truncate">
-            <Markup className="italic text-muted-foreground" allowList={['mark']} content={otherHighlight} />
+            <Markup className="text-muted-foreground italic" allowList={['mark']} content={otherHighlight} />
           </div>
         )}
       </div>
diff --git a/components/search/result/ExpenseResult.tsx b/components/search/result/ExpenseResult.tsx
index 9737b7fce98..e64f8767d3d 100644
--- a/components/search/result/ExpenseResult.tsx
+++ b/components/search/result/ExpenseResult.tsx
@@ -45,7 +45,7 @@ export function ExpenseResult({ expense, highlights }: { expense: ExpenseResultD
         </div>
         {otherHighlight && (
           <div className="truncate">
-            <Markup className="italic text-muted-foreground" allowList={['mark']} content={otherHighlight} />
+            <Markup className="text-muted-foreground italic" allowList={['mark']} content={otherHighlight} />
           </div>
         )}
       </div>
diff --git a/components/search/result/OrderResult.tsx b/components/search/result/OrderResult.tsx
index 2d5af9610e8..8da7eb9ad36 100644
--- a/components/search/result/OrderResult.tsx
+++ b/components/search/result/OrderResult.tsx
@@ -33,7 +33,7 @@ export function OrderResult({ order, highlights }: { order: OrderResultData; hig
         </div>
         {otherHighlight && (
           <div className="truncate">
-            <Markup className="italic text-muted-foreground" allowList={['mark']} content={otherHighlight} />
+            <Markup className="text-muted-foreground italic" allowList={['mark']} content={otherHighlight} />
           </div>
         )}
       </div>
diff --git a/components/search/result/TransactionResult.tsx b/components/search/result/TransactionResult.tsx
index 5a7533e80b4..4248ab29e35 100644
--- a/components/search/result/TransactionResult.tsx
+++ b/components/search/result/TransactionResult.tsx
@@ -66,7 +66,7 @@ export function TransactionResult({
         {otherHighlight && (
           <div className="overflow-hidden">
             <div className="truncate">
-              <Markup className="italic text-muted-foreground" allowList={['mark']} content={otherHighlight} />
+              <Markup className="text-muted-foreground italic" allowList={['mark']} content={otherHighlight} />
             </div>
           </div>
         )}
diff --git a/components/search/result/UpdateResult.tsx b/components/search/result/UpdateResult.tsx
index 1eb952adfc0..e810b5e5be3 100644
--- a/components/search/result/UpdateResult.tsx
+++ b/components/search/result/UpdateResult.tsx
@@ -16,7 +16,7 @@ export function UpdateResult({ update, highlights }: { update: UpdateResultData;
         <div className="truncate font-medium">
           <Markup allowList={['mark']} content={highlightFields.top.title?.[0] || update.title} />
         </div>
-        <div className="truncate italic text-muted-foreground">
+        <div className="truncate text-muted-foreground italic">
           <Markup allowList={['mark']} content={highlightFields.top.html?.[0] || update.html} />
         </div>
       </div>
diff --git a/components/submit-expense/PayoutMethodDetails.tsx b/components/submit-expense/PayoutMethodDetails.tsx
index 32c40c743b6..ff57d5bb000 100644
--- a/components/submit-expense/PayoutMethodDetails.tsx
+++ b/components/submit-expense/PayoutMethodDetails.tsx
@@ -154,14 +154,14 @@ export function PayoutMethodDetailsContainer(props: {
           <React.Fragment>
             <div
               className={clsx(
-                'absolute bottom-0 z-10 h-8 w-full bg-gradient-to-t from-muted to-transparent transition-opacity',
+                'absolute bottom-0 z-10 h-8 w-full bg-linear-to-t from-muted to-transparent transition-opacity',
                 isOpen ? 'opacity-0' : 'opacity-100',
               )}
             />
             <CollapsibleTrigger
               className={clsx(
-                'group absolute z-20 focus:outline-none',
-                isOpen ? 'bottom-0 right-0' : 'inset-0 flex w-full items-end justify-end',
+                'group absolute z-20 focus:outline-hidden',
+                isOpen ? 'right-0 bottom-0' : 'inset-0 flex w-full items-end justify-end',
               )}
               onClick={toggleContainer}
             >
@@ -170,7 +170,7 @@ export function PayoutMethodDetailsContainer(props: {
                 size="xs"
                 asChild
                 className={clsx(
-                  'm-2 border border-transparent text-muted-foreground ring-ring hover:text-foreground group-focus-visible:border-border group-focus-visible:bg-white group-focus-visible:ring-2',
+                  'm-2 border border-transparent text-muted-foreground ring-ring group-focus-visible:border-border group-focus-visible:bg-white group-focus-visible:ring-2 hover:text-foreground',
                   {
                     'group-hover:border-border group-hover:bg-white': !isOpen,
                     'hover:border-border hover:bg-white': isOpen,
diff --git a/components/submit-expense/SubmitExpenseFlow.tsx b/components/submit-expense/SubmitExpenseFlow.tsx
index 372000d8429..707d2f848d9 100644
--- a/components/submit-expense/SubmitExpenseFlow.tsx
+++ b/components/submit-expense/SubmitExpenseFlow.tsx
@@ -315,12 +315,12 @@ export function SubmitExpenseFlow(props: SubmitExpenseFlowProps) {
       >
         <DialogContent
           overlayClassName="p-0 sm:p-0"
-          className="sm:max-w-screen sm:min-w-screen overflow-hidden rounded-none p-0 sm:rounded-none sm:p-0"
+          className="overflow-hidden rounded-none p-0 sm:max-w-screen sm:min-w-screen sm:rounded-none sm:p-0"
           hideCloseButton
         >
-          <div className="max-w-screen min-w-screen before:-z-1 relative flex max-h-screen min-h-screen flex-col overflow-hidden bg-[#F8FAFC] before:absolute before:left-0 before:right-0 before:top-0 before:h-44 before:rotate-180 before:[background:url('/static/images/home/fiscalhost-blue-bg-md.png')]">
-            <header className="min-w-screen z-30 flex items-center justify-between border-b border-slate-100 bg-background px-4 py-3 sm:px-10">
-              <span className="text-xl font-bold leading-7 text-slate-800">
+          <div className="relative flex max-h-screen min-h-screen max-w-screen min-w-screen flex-col overflow-hidden bg-[#F8FAFC] before:absolute before:top-0 before:right-0 before:left-0 before:-z-1 before:h-44 before:rotate-180 before:[background:url('/static/images/home/fiscalhost-blue-bg-md.png')]">
+            <header className="z-30 flex min-w-screen items-center justify-between border-b border-slate-100 bg-background px-4 py-3 sm:px-10">
+              <span className="text-xl leading-7 font-bold text-slate-800">
                 <FormattedMessage
                   defaultMessage="Invoice #{submittedExpenseId} has been submitted successfully!"
                   id="cMGymL"
@@ -330,7 +330,7 @@ export function SubmitExpenseFlow(props: SubmitExpenseFlowProps) {
               <Button
                 onClick={handleOnClose}
                 variant="ghost"
-                className="hidden cursor-pointer items-center gap-2 px-4 py-3 text-base font-medium leading-5 text-slate-800 sm:visible sm:flex"
+                className="hidden cursor-pointer items-center gap-2 px-4 py-3 text-base leading-5 font-medium text-slate-800 sm:visible sm:flex"
                 asChild
               >
                 <span>
@@ -343,9 +343,9 @@ export function SubmitExpenseFlow(props: SubmitExpenseFlowProps) {
                 <X />
               </Button>
             </header>
-            <main className="z-10 flex w-full flex-grow overflow-hidden">
-              <div className="flex w-full flex-grow justify-center overflow-y-scroll">
-                <div className="flex w-full max-w-screen-xl flex-col pt-4 sm:flex sm:flex-row sm:gap-11 sm:px-8 sm:pt-8 lg:pt-24">
+            <main className="z-10 flex w-full grow overflow-hidden">
+              <div className="flex w-full grow justify-center overflow-y-scroll">
+                <div className="flex w-full max-w-(--breakpoint-xl) flex-col pt-4 sm:flex sm:flex-row sm:gap-11 sm:px-8 sm:pt-8 lg:pt-24">
                   <SubmittedExpense expenseId={submittedExpenseId} />
                 </div>
               </div>
@@ -376,7 +376,7 @@ export function SubmitExpenseFlow(props: SubmitExpenseFlowProps) {
       <DialogContent
         hideCloseButton
         overlayClassName="p-0 sm:p-0"
-        className={'sm:max-w-screen sm:min-w-screen overflow-hidden rounded-none p-0 sm:rounded-none sm:p-0'}
+        className={'overflow-hidden rounded-none p-0 sm:max-w-screen sm:min-w-screen sm:rounded-none sm:p-0'}
         onEscapeKeyDown={e => {
           e.preventDefault();
           if (open) {
@@ -384,15 +384,15 @@ export function SubmitExpenseFlow(props: SubmitExpenseFlowProps) {
           }
         }}
       >
-        <div className="max-w-screen min-w-screen flex max-h-screen min-h-screen flex-col overflow-hidden bg-[#F8FAFC]">
-          <header className="min-w-screen flex items-center justify-between border-b border-slate-100 px-4 py-3 sm:px-10">
-            <span className="text-xl font-bold leading-7 text-slate-800">
+        <div className="flex max-h-screen min-h-screen max-w-screen min-w-screen flex-col overflow-hidden bg-[#F8FAFC]">
+          <header className="flex min-w-screen items-center justify-between border-b border-slate-100 px-4 py-3 sm:px-10">
+            <span className="text-xl leading-7 font-bold text-slate-800">
               <FormattedMessage id="ExpenseForm.Submit" defaultMessage="Submit expense" />
             </span>
             <Button
               onClick={handleOnClose}
               variant="ghost"
-              className="hidden cursor-pointer items-center gap-2 px-4 py-3 text-base font-medium leading-5 text-slate-800 sm:visible sm:flex"
+              className="hidden cursor-pointer items-center gap-2 px-4 py-3 text-base leading-5 font-medium text-slate-800 sm:visible sm:flex"
               asChild
             >
               <span>
@@ -405,8 +405,8 @@ export function SubmitExpenseFlow(props: SubmitExpenseFlowProps) {
               <X />
             </Button>
           </header>
-          <main className="flex w-full flex-grow overflow-hidden">
-            <div className="flex w-full flex-grow justify-center">
+          <main className="flex w-full grow overflow-hidden">
+            <div className="flex w-full grow justify-center">
               <div className="relative flex w-full flex-col overflow-y-scroll sm:flex sm:flex-row sm:gap-11 sm:px-8 sm:pt-10">
                 <ExpenseFormikContainer
                   submitExpenseTo={props.submitExpenseTo}
diff --git a/components/submit-expense/SubmitExpenseFlowSteps.tsx b/components/submit-expense/SubmitExpenseFlowSteps.tsx
index 268af43c791..b7ed5733ee8 100644
--- a/components/submit-expense/SubmitExpenseFlowSteps.tsx
+++ b/components/submit-expense/SubmitExpenseFlowSteps.tsx
@@ -192,7 +192,7 @@ function StepHeader(props: StepProps & { stepNumber: number }) {
   return (
     <li
       className={cn(
-        'relative flex items-center gap-2 pb-8 pl-7 font-bold before:absolute before:left-0 before:inline-block before:h-6 before:w-6 before:-translate-x-3 before:rounded-full before:border-2 before:border-[#94A3B8] before:bg-white before:text-center after:absolute after:left-0 after:top-2 after:-z-10 after:h-full after:-translate-x-[1px] after:border-l-2 after:border-solid last:after:hidden',
+        'relative flex items-center gap-2 pb-8 pl-7 font-bold before:absolute before:left-0 before:inline-block before:h-6 before:w-6 before:-translate-x-3 before:rounded-full before:border-2 before:border-[#94A3B8] before:bg-white before:text-center after:absolute after:top-2 after:left-0 after:-z-10 after:h-full after:-translate-x-[1px] after:border-l-2 after:border-solid last:after:hidden',
         {
           'before:border-blue-900': props.isActive,
           "before:border-blue-900 before:bg-blue-900 before:text-white before:content-['✓']": props.isComplete,
@@ -218,7 +218,7 @@ function StepItem(props: StepProps) {
   return (
     <li
       className={cn(
-        'relative flex items-center gap-2 pb-8 pl-7 before:absolute before:left-0 before:inline-block before:h-2 before:w-2 before:-translate-x-1 before:rounded-full before:border-[#CBD5E1] before:bg-[#CBD5E1] before:text-center after:absolute after:left-0 after:top-2 after:-z-10 after:h-full after:-translate-x-[1px] after:border-l-2 after:border-solid after:border-[#E1E7EF]',
+        'relative flex items-center gap-2 pb-8 pl-7 before:absolute before:left-0 before:inline-block before:h-2 before:w-2 before:-translate-x-1 before:rounded-full before:border-[#CBD5E1] before:bg-[#CBD5E1] before:text-center after:absolute after:top-2 after:left-0 after:-z-10 after:h-full after:-translate-x-[1px] after:border-l-2 after:border-solid after:border-[#E1E7EF]',
         {
           'font-bold text-blue-900 before:border-blue-900 before:bg-blue-900 before:[box-shadow:0_0_0_4px_hsla(216,_100%,_58%,_0.3)]':
             props.isActive,
diff --git a/components/submit-expense/SubmittedExpense.tsx b/components/submit-expense/SubmittedExpense.tsx
index 5238d8a714a..c113bf221c0 100644
--- a/components/submit-expense/SubmittedExpense.tsx
+++ b/components/submit-expense/SubmittedExpense.tsx
@@ -38,8 +38,8 @@ export function SubmittedExpense(props: SubmittedExpenseProps) {
   const expense = query.data?.expense;
 
   return (
-    <div className="flex flex-grow flex-col gap-8 px-4 sm:p-0 lg:flex-row">
-      <div className="flex-1 flex-grow-[2]">
+    <div className="flex grow flex-col gap-8 px-4 sm:p-0 lg:flex-row">
+      <div className="flex-1 flex-grow-2">
         <ExpenseSummary
           onDelete={() => {}}
           onEdit={() => {}}
diff --git a/components/submit-expense/form/AdditionalDetailsSection.tsx b/components/submit-expense/form/AdditionalDetailsSection.tsx
index cd614f451bb..f51b6b67799 100644
--- a/components/submit-expense/form/AdditionalDetailsSection.tsx
+++ b/components/submit-expense/form/AdditionalDetailsSection.tsx
@@ -57,7 +57,7 @@ export function AdditionalDetailsSection(props: AdditionalDetailsSectionProps) {
         </div>
       )}
 
-      <Label className="mb-2 mt-4">
+      <Label className="mt-4 mb-2">
         <FormattedMessage defaultMessage="Tag your expense" id="EosA8s" />
       </Label>
       <div className="flex items-center gap-1">
diff --git a/components/submit-expense/form/ExpenseAccountItem.tsx b/components/submit-expense/form/ExpenseAccountItem.tsx
index cbfe2753394..3adabf889cd 100644
--- a/components/submit-expense/form/ExpenseAccountItem.tsx
+++ b/components/submit-expense/form/ExpenseAccountItem.tsx
@@ -91,8 +91,8 @@ export function ExpenseAccountItem(props: ExpenseAccountItemProps) {
       <div>
         <Avatar collective={account} radius={24} />
       </div>
-      <div className="flex flex-grow flex-col gap-0.5">
-        <div className="max-w-96 overflow-x-clip text-ellipsis whitespace-nowrap font-medium">{account.name}</div>
+      <div className="flex grow flex-col gap-0.5">
+        <div className="max-w-96 overflow-x-clip font-medium text-ellipsis whitespace-nowrap">{account.name}</div>
         <div className="max-w-96 overflow-x-clip text-ellipsis whitespace-nowrap text-muted-foreground">
           {'parent' in account && account.parent ? (
             <FormattedMessage
diff --git a/components/submit-expense/form/ExpenseCategorySection.tsx b/components/submit-expense/form/ExpenseCategorySection.tsx
index a4780e78ad5..f3aed9739ad 100644
--- a/components/submit-expense/form/ExpenseCategorySection.tsx
+++ b/components/submit-expense/form/ExpenseCategorySection.tsx
@@ -67,7 +67,7 @@ export function ExpenseCategorySection(props: ExpenseCategorySectionProps) {
           <div className="group mt-4 rounded-md border border-[#DCDDE0] p-4">
             <CollapsibleTrigger asChild>
               <button className="flex w-full items-center text-start text-sm font-bold">
-                <div className="flex-grow">
+                <div className="grow">
                   {' '}
                   <FormattedMessage defaultMessage="Expense category instructions" id="QVX2sp" />
                 </div>
diff --git a/components/submit-expense/form/ExpenseItemsSection.tsx b/components/submit-expense/form/ExpenseItemsSection.tsx
index cf6807f828e..89f8ad71600 100644
--- a/components/submit-expense/form/ExpenseItemsSection.tsx
+++ b/components/submit-expense/form/ExpenseItemsSection.tsx
@@ -75,7 +75,7 @@ export function ExpenseItemsForm(props: { form: ExpenseForm }) {
         expenseItems?.map((ei, i) => (
           // eslint-disable-next-line react/no-array-index-key
           <div key={i} className="flex gap-4">
-            <div className="flex-grow">
+            <div className="grow">
               <ExpenseItem form={props.form} index={i} />
             </div>
             <div>
@@ -206,7 +206,7 @@ function ExpenseItem(props: ExpenseItemProps) {
       <div className="flex gap-4">
         {hasAttachment && (
           <div className="flex flex-col">
-            <div className="flex flex-grow justify-center">
+            <div className="flex grow justify-center">
               <FormField
                 label={intl.formatMessage({ defaultMessage: 'Upload file', id: '6oOCCL' })}
                 name={`expenseItems.${props.index}.attachment`}
@@ -241,7 +241,7 @@ function ExpenseItem(props: ExpenseItemProps) {
             </div>
           </div>
         )}
-        <div className="flex-grow">
+        <div className="grow">
           <div className="mb-2">
             <FormField
               required={props.form.options.isAdminOfPayee}
@@ -251,7 +251,7 @@ function ExpenseItem(props: ExpenseItemProps) {
             />
           </div>
           <div className="flex gap-4">
-            <div className="flex-grow basis-0">
+            <div className="grow basis-0">
               <FormField
                 required={props.form.options.isAdminOfPayee}
                 label={intl.formatMessage({ defaultMessage: 'Date', id: 'expense.incurredAt' })}
@@ -264,7 +264,7 @@ function ExpenseItem(props: ExpenseItemProps) {
               </FormField>
             </div>
 
-            <div className="flex-grow basis-0">
+            <div className="grow basis-0">
               <div className="flex flex-col">
                 <FormField
                   label={intl.formatMessage({ defaultMessage: 'Amount', id: 'Fields.amount' })}
diff --git a/components/submit-expense/form/ExpensePolicyContainer.tsx b/components/submit-expense/form/ExpensePolicyContainer.tsx
index 58950ea8ab9..2b3a566d207 100644
--- a/components/submit-expense/form/ExpensePolicyContainer.tsx
+++ b/components/submit-expense/form/ExpensePolicyContainer.tsx
@@ -34,7 +34,7 @@ export function ExpensePolicyContainer(props: ExpensePolicyContainerProps) {
       <div className="group rounded-md border border-[#DCDDE0] p-4">
         <CollapsibleTrigger asChild>
           <button className="flex w-full items-center text-start text-sm font-bold">
-            <div className="flex-grow">{props.title}</div>
+            <div className="grow">{props.title}</div>
             <div className="group-data-[state=open]:rotate-180">{props.checked && <ChevronDown size={16} />}</div>
           </button>
         </CollapsibleTrigger>
@@ -43,7 +43,7 @@ export function ExpensePolicyContainer(props: ExpensePolicyContainerProps) {
             <HTMLContent content={props.policy} />
             <div className="mt-4">
               <MessageBox type="warning">
-                <label className="flex cursor-pointer items-center gap-2 text-sm font-normal leading-normal">
+                <label className="flex cursor-pointer items-center gap-2 text-sm leading-normal font-normal">
                   <Checkbox
                     checked={props.checked}
                     onCheckedChange={v => {
diff --git a/components/submit-expense/form/InviteUserOption.tsx b/components/submit-expense/form/InviteUserOption.tsx
index aab0e7b5941..42fa2651a27 100644
--- a/components/submit-expense/form/InviteUserOption.tsx
+++ b/components/submit-expense/form/InviteUserOption.tsx
@@ -25,13 +25,13 @@ export function InviteUserOption(props: InviteUserOptionProps) {
             <TabsList>
               <TabsTrigger
                 value={InviteeAccountType.INDIVIDUAL}
-                className="data-[state=active]:text-blue-900 data-[state=active]:shadow"
+                className="data-[state=active]:text-blue-900 data-[state=active]:shadow-sm"
               >
                 <FormattedMessage defaultMessage="Personal Account" id="Sch2bu" />
               </TabsTrigger>
               <TabsTrigger
                 value={InviteeAccountType.ORGANIZATION}
-                className="data-[state=active]:text-blue-900 data-[state=active]:shadow"
+                className="data-[state=active]:text-blue-900 data-[state=active]:shadow-sm"
               >
                 <FormattedMessage defaultMessage="Organization Account" id="cS9oSV" />
               </TabsTrigger>
diff --git a/components/submit-expense/form/PayoutMethodSection.tsx b/components/submit-expense/form/PayoutMethodSection.tsx
index 7bf03dfca1e..4b1f31124fa 100644
--- a/components/submit-expense/form/PayoutMethodSection.tsx
+++ b/components/submit-expense/form/PayoutMethodSection.tsx
@@ -663,7 +663,7 @@ function PayoutMethodRadioGroupItem(props: {
 
                   {!keepNameDifferent && (
                     <React.Fragment>
-                      <div className="mb-2 mt-4 font-bold">
+                      <div className="mt-4 mb-2 font-bold">
                         <FormattedMessage
                           defaultMessage=" Would you like to update your legal name to match your payout method contact name?"
                           id="fEYP7x"
@@ -709,7 +709,7 @@ function PayoutMethodRadioGroupItem(props: {
           )
         }
       >
-        <div className="flex-grow">
+        <div className="grow">
           <PayoutMethodLabel showIcon payoutMethod={props.payoutMethod} />
         </div>
         {!isEditingPayoutMethod && props.isEditable && (
diff --git a/components/submit-expense/form/SummarySection.tsx b/components/submit-expense/form/SummarySection.tsx
index 771e5224b9e..d66ad069368 100644
--- a/components/submit-expense/form/SummarySection.tsx
+++ b/components/submit-expense/form/SummarySection.tsx
@@ -50,7 +50,7 @@ export function SummarySection(props: SummarySectionProps) {
             )}
           </div>
           {props.form.values.recurrenceFrequency && props.form.values.recurrenceFrequency !== 'none' && (
-            <span className="rounded-xl bg-slate-100 px-3 py-1 font-mono text-xs uppercase text-muted-foreground">
+            <span className="rounded-xl bg-slate-100 px-3 py-1 font-mono text-xs text-muted-foreground uppercase">
               <FormattedMessage defaultMessage="Recurring" id="v84fNv" />
             </span>
           )}
@@ -67,7 +67,7 @@ export function SummarySection(props: SummarySectionProps) {
             props.form.values.tags.map(tag => (
               <span
                 key={tag}
-                className="rounded-xl rounded-es-none rounded-ss-none bg-slate-100 px-3 py-1 text-xs text-slate-800"
+                className="rounded-xl rounded-ss-none rounded-es-none bg-slate-100 px-3 py-1 text-xs text-slate-800"
               >
                 {tag}
               </span>
@@ -123,7 +123,7 @@ export function SummarySection(props: SummarySectionProps) {
                   />
                 </div>
               )}
-              <div className="flex-grow">
+              <div className="grow">
                 <div>
                   {ei.description || (
                     <span className="text-muted-foreground">
@@ -273,7 +273,7 @@ export function SummarySection(props: SummarySectionProps) {
         </div>
       )}
       <div className="grid grid-cols-2 gap-4">
-        <div className="mt-4 min-h-32 flex-grow basis-0 rounded-md border border-gray-300 p-4 text-sm">
+        <div className="mt-4 min-h-32 grow basis-0 rounded-md border border-gray-300 p-4 text-sm">
           <div className="font-bold">
             <FormattedMessage defaultMessage="Who is paying?" id="IdR7BG" />
           </div>
@@ -323,7 +323,7 @@ export function SummarySection(props: SummarySectionProps) {
             </React.Fragment>
           )}
         </div>
-        <div className="mt-4 min-h-32 flex-grow basis-0 rounded-md border border-gray-300 p-4 text-sm">
+        <div className="mt-4 min-h-32 grow basis-0 rounded-md border border-gray-300 p-4 text-sm">
           <div className="font-bold">
             <FormattedMessage defaultMessage="Who is getting paid?" id="W5Z+Fm" />
           </div>
@@ -379,7 +379,7 @@ export function SummarySection(props: SummarySectionProps) {
             )
           )}
         </div>
-        <div className="col-span-2 h-fit flex-grow basis-0 rounded-md border border-gray-300 p-4 text-sm">
+        <div className="col-span-2 h-fit grow basis-0 rounded-md border border-gray-300 p-4 text-sm">
           <div className="font-bold">
             <FormattedMessage defaultMessage="Payout Method" id="SecurityScope.PayoutMethod" />
           </div>
@@ -508,7 +508,7 @@ function RecurrenceOptionBox(props: { form: ExpenseForm }) {
 
             {recurrenceFrequency && recurrenceFrequency !== 'none' && (
               <React.Fragment>
-                <Label className="mb-2 mt-4">
+                <Label className="mt-4 mb-2">
                   <FormattedMessage defaultMessage="End Date" id="EndDate" />
                 </Label>
                 <Input type="date" value={recurrenceEndAt} onChange={e => setRecurrenceEndAtEdit(e.target.value)} />
diff --git a/components/submit-expense/form/TypeOfExpenseSection.tsx b/components/submit-expense/form/TypeOfExpenseSection.tsx
index d34b811ea86..c06dbd8229b 100644
--- a/components/submit-expense/form/TypeOfExpenseSection.tsx
+++ b/components/submit-expense/form/TypeOfExpenseSection.tsx
@@ -42,11 +42,7 @@ export function TypeOfExpenseSection(props: TypeOfExpenseSectionProps) {
           onValueChange={newValue => props.form.setFieldValue('expenseTypeOption', newValue as ExpenseType)}
           className="flex"
         >
-          <RadioGroupCard
-            className="flex-grow basis-0"
-            value={ExpenseType.INVOICE}
-            disabled={props.form.initialLoading}
-          >
+          <RadioGroupCard className="grow basis-0" value={ExpenseType.INVOICE} disabled={props.form.initialLoading}>
             <div>
               <div className="mb-1 font-bold">
                 <FormattedMessage defaultMessage="Invoice" id="Expense.Type.Invoice" />
@@ -57,11 +53,7 @@ export function TypeOfExpenseSection(props: TypeOfExpenseSectionProps) {
             </div>
           </RadioGroupCard>
 
-          <RadioGroupCard
-            className="flex-grow basis-0"
-            value={ExpenseType.RECEIPT}
-            disabled={props.form.initialLoading}
-          >
+          <RadioGroupCard className="grow basis-0" value={ExpenseType.RECEIPT} disabled={props.form.initialLoading}>
             <div>
               <div className="mb-1 font-bold">
                 <FormattedMessage defaultMessage="Reimbursement" id="ExpenseForm.ReceiptLabel" />
@@ -154,7 +146,7 @@ export function TypeOfExpenseSection(props: TypeOfExpenseSectionProps) {
               </TabsList>
               <TabsContent value={YesNoOption.YES}>
                 <div className="flex items-start gap-4">
-                  <div className="h-16 flex-grow basis-0">
+                  <div className="h-16 grow basis-0">
                     <div>
                       <FormField
                         required={
@@ -195,7 +187,7 @@ export function TypeOfExpenseSection(props: TypeOfExpenseSectionProps) {
                       </FormField>
                     </div>
                   </div>
-                  <div className="flex-grow basis-0">
+                  <div className="grow basis-0">
                     <FormField
                       required={
                         props.form.options.isAdminOfPayee || props.form.options.payee?.type === CollectiveType.VENDOR
diff --git a/components/table/ColumnHeader.tsx b/components/table/ColumnHeader.tsx
index e11f2d99838..af2f8764d8d 100644
--- a/components/table/ColumnHeader.tsx
+++ b/components/table/ColumnHeader.tsx
@@ -75,7 +75,7 @@ export function ColumnHeader<TData, TValue>({
             variant="ghost"
             size="xs"
             className={clsx(
-              'group/btn -m-2.5 gap-2 data-[state=open]:bg-accent data-[state=open]:text-foreground [&>svg]:data-[state=open]:!text-muted-foreground',
+              'group/btn -m-2.5 gap-2 data-[state=open]:bg-accent data-[state=open]:text-foreground data-[state=open]:[&>svg]:text-muted-foreground!',
               isSorted && 'text-foreground',
             )}
           >
diff --git a/components/table/RowActionsMenu.tsx b/components/table/RowActionsMenu.tsx
index 5b256123a7b..35420b9128b 100644
--- a/components/table/RowActionsMenu.tsx
+++ b/components/table/RowActionsMenu.tsx
@@ -55,7 +55,7 @@ export function RowActionsMenu<TData>({ row, actionsMenuTriggerRef, table }: Row
         <Button
           size="icon-xs"
           variant="outline"
-          className="border-transparent text-muted-foreground hover:bg-white hover:text-foreground hover:shadow-sm group-hover/row:border-border data-[state=open]:border-border data-[state=open]:text-foreground"
+          className="border-transparent text-muted-foreground group-hover/row:border-border hover:bg-white hover:text-foreground hover:shadow-xs data-[state=open]:border-border data-[state=open]:text-foreground"
           data-cy="actions-menu-trigger"
         >
           <MoreHorizontal size={18} />
diff --git a/components/transactions/TransactionsPageContent.tsx b/components/transactions/TransactionsPageContent.tsx
index 6e0b0295d9b..84c0fff79e1 100644
--- a/components/transactions/TransactionsPageContent.tsx
+++ b/components/transactions/TransactionsPageContent.tsx
@@ -194,10 +194,10 @@ const Transactions = ({
   return (
     <Container>
       <div className="flex flex-wrap justify-between gap-4">
-        <h1 className={isDashboard ? 'text-2xl font-bold leading-10 tracking-tight' : 'text-[32px] leading-10'}>
+        <h1 className={isDashboard ? 'text-2xl leading-10 font-bold tracking-tight' : 'text-[32px] leading-10'}>
           <FormattedMessage id="menu.transactions" defaultMessage="Transactions" />
         </h1>
-        <div className="w-[276px] flex-grow sm:flex-grow-0">
+        <div className="w-[276px] grow sm:grow-0">
           <SearchBar
             placeholder={intl.formatMessage({ defaultMessage: 'Search transactions…', id: 'tTmMmK' })}
             defaultValue={router.query.searchTerm}
diff --git a/components/two-factor-authentication/DevicesSettings.tsx b/components/two-factor-authentication/DevicesSettings.tsx
index 73517afc32b..a11347effcd 100644
--- a/components/two-factor-authentication/DevicesSettings.tsx
+++ b/components/two-factor-authentication/DevicesSettings.tsx
@@ -124,7 +124,7 @@ export function DevicesSettings(props: DevicesSettingsProps) {
           );
         })}
       </div>
-      <Button onClick={startWebauthnDeviceRegistration} variant="outline" className="mb-2 mt-3 w-full">
+      <Button onClick={startWebauthnDeviceRegistration} variant="outline" className="mt-3 mb-2 w-full">
         <Plus className="mr-2 h-4 w-4" />
         <FormattedMessage defaultMessage="Add device" id="kFWJpj" />
       </Button>
diff --git a/components/two-factor-authentication/RecoverySettings.tsx b/components/two-factor-authentication/RecoverySettings.tsx
index ef5eb097b94..e9bf594e36c 100644
--- a/components/two-factor-authentication/RecoverySettings.tsx
+++ b/components/two-factor-authentication/RecoverySettings.tsx
@@ -61,7 +61,7 @@ export function RecoverySettings(props: RecoverySettingsProps) {
           variant="outline"
           loading={loading}
           onClick={() => setIsRegeneratingRecoveryCodes(true)}
-          className="mb-2 mt-3 w-full"
+          className="mt-3 mb-2 w-full"
         >
           <RefreshCcw className="mr-2 h-4 w-4" />
           <FormattedMessage defaultMessage="Regenerate codes" id="TWwiPo" />
diff --git a/components/two-factor-authentication/TwoFactorAuthenticationModal.tsx b/components/two-factor-authentication/TwoFactorAuthenticationModal.tsx
index 7f29bdb2b50..d02bc0ae15b 100644
--- a/components/two-factor-authentication/TwoFactorAuthenticationModal.tsx
+++ b/components/two-factor-authentication/TwoFactorAuthenticationModal.tsx
@@ -151,7 +151,7 @@ export default function TwoFactorAuthenticationModal() {
         </div>
 
         <AlertDialogHeader className="sm:text-center">
-          <Button onClick={cancel} variant="ghost" size="icon-xs" className="absolute right-1.5 top-1.5">
+          <Button onClick={cancel} variant="ghost" size="icon-xs" className="absolute top-1.5 right-1.5">
             <X size={16} />
             <span className="sr-only">
               <FormattedMessage id="Close" defaultMessage="Close" />
@@ -239,7 +239,7 @@ function AuthenticatorOption(props: {
 }) {
   return (
     <div className="space-y-4 pb-2">
-      <p className="text-balance text-sm text-muted-foreground">
+      <p className="text-sm text-balance text-muted-foreground">
         <FormattedMessage
           id="TwoFactorAuth.Setup.Form.InputLabel"
           defaultMessage="Please enter the 6-digit code from your authenticator app."
@@ -258,7 +258,7 @@ function AuthenticatorOption(props: {
           character:
             'z-10 pointer-events-none rounded-md border border-input bg-background text-lg ring-offset-background items-center flex justify-center',
           characterInactive: 'bg-muted',
-          characterSelected: 'ring-ring ring-2 ring-offset-2 outline-none text-foreground',
+          characterSelected: 'ring-ring ring-2 ring-offset-2 outline-hidden text-foreground',
         }}
         onChange={val => props.onChange(val)}
       />
@@ -269,7 +269,7 @@ function AuthenticatorOption(props: {
 function RecoveryCodeOptions(props: { value: string; onChange: (string) => void; disabled: boolean }) {
   return (
     <div className="space-y-4">
-      <p className="text-balance text-sm text-muted-foreground">
+      <p className="text-sm text-balance text-muted-foreground">
         <FormattedMessage
           id="TwoFactorAuth.RecoveryCodes.Form.InputLabel"
           defaultMessage="Please enter one of your alphanumeric recovery codes."
diff --git a/components/ui/Accordion.tsx b/components/ui/Accordion.tsx
index 18d3033c226..4941fc1015e 100644
--- a/components/ui/Accordion.tsx
+++ b/components/ui/Accordion.tsx
@@ -48,7 +48,7 @@ const AccordionContent = React.forwardRef<
     )}
     {...props}
   >
-    <div className="pb-4 pt-0">{children}</div>
+    <div className="pt-0 pb-4">{children}</div>
   </AccordionPrimitive.Content>
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
diff --git a/components/ui/Alert.tsx b/components/ui/Alert.tsx
index 195da804e5a..8995d51f1c3 100644
--- a/components/ui/Alert.tsx
+++ b/components/ui/Alert.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
 
 const alertVariants = cva(
-  'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  'relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg]:text-foreground [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7',
   {
     variants: {
       variant: {
@@ -28,7 +28,7 @@ Alert.displayName = 'Alert';
 
 const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
   ({ className, children, ...props }, ref) => (
-    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props}>
+    <h5 ref={ref} className={cn('mb-1 leading-none font-medium tracking-tight', className)} {...props}>
       {children}
     </h5>
   ),
diff --git a/components/ui/AlertDialog.tsx b/components/ui/AlertDialog.tsx
index 036db12d5f9..09126ef4c94 100644
--- a/components/ui/AlertDialog.tsx
+++ b/components/ui/AlertDialog.tsx
@@ -20,7 +20,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-[3000] bg-foreground/25 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-3000 bg-foreground/25 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
       className,
     )}
     {...props}
@@ -36,11 +36,11 @@ const AlertDialogContent = React.forwardRef<
   }
 >(({ className, withBackdropBlur, ...props }, ref) => (
   <AlertDialogPortal>
-    <AlertDialogOverlay className={withBackdropBlur ? 'backdrop-blur-sm' : ''} />
+    <AlertDialogOverlay className={withBackdropBlur ? 'backdrop-blur-xs' : ''} />
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-[3000] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed top-[50%] left-[50%] z-3000 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=open]:zoom-in-95 sm:rounded-lg',
         className,
       )}
       {...props}
diff --git a/components/ui/Badge.tsx b/components/ui/Badge.tsx
index 9e6f12bba07..114c5e4cde5 100644
--- a/components/ui/Badge.tsx
+++ b/components/ui/Badge.tsx
@@ -11,7 +11,7 @@ const badgeVariants = cva('inline-flex items-center gap-0.5 align-middle font-me
       warning: 'bg-yellow-100 text-yellow-800',
       error: 'bg-red-100 text-red-800',
       neutral: 'bg-slate-100 text-slate-700',
-      outline: 'bg-transparent text-muted-foreground ring-1 ring-inset ring-slate-300',
+      outline: 'bg-transparent text-muted-foreground ring-1 ring-slate-300 ring-inset',
     },
     round: {
       true: 'rounded-full',
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 9cc9115874a..d12140c0d1c 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -8,7 +8,7 @@ import { cn } from '../../lib/utils';
 import StyledSpinner from '../StyledSpinner';
 
 const buttonVariants = cva(
-  'relative inline-flex items-center justify-center gap-1 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 gap-1 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/components/ui/Card.tsx b/components/ui/Card.tsx
index 10287f8b5c2..6279e506f23 100644
--- a/components/ui/Card.tsx
+++ b/components/ui/Card.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { cn } from '../../lib/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', className)} {...props} />
+  <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-xs', className)} {...props} />
 ));
 Card.displayName = 'Card';
 
@@ -17,7 +17,7 @@ CardHeader.displayName = 'CardHeader';
 const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
   ({ className, ...props }, ref) => (
     // eslint-disable-next-line jsx-a11y/heading-has-content
-    <h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+    <h3 ref={ref} className={cn('text-2xl leading-none font-semibold tracking-tight', className)} {...props} />
   ),
 );
 CardTitle.displayName = 'CardTitle';
diff --git a/components/ui/Checkbox.tsx b/components/ui/Checkbox.tsx
index 077a17de514..e9f1df5616b 100644
--- a/components/ui/Checkbox.tsx
+++ b/components/ui/Checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm 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 rounded-sm border border-primary ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className,
     )}
     {...props}
diff --git a/components/ui/Command.tsx b/components/ui/Command.tsx
index 062b487066a..fa6af6164a1 100644
--- a/components/ui/Command.tsx
+++ b/components/ui/Command.tsx
@@ -41,7 +41,7 @@ const CommandDialog = ({ children, shouldFilter, onKeyDown, description, ...prop
         <Command
           onKeyDown={onKeyDown}
           shouldFilter={shouldFilter}
-          className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+          className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
         >
           {children}
         </Command>
@@ -66,7 +66,7 @@ const CommandInput = React.forwardRef<
       <CommandPrimitive.Input
         ref={ref}
         className={cn(
-          'flex h-11 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-11 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}
@@ -83,7 +83,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden border-t', className)}
+    className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto border-t', className)}
     cmdk-list-wrapper=""
     {...props}
   />
@@ -142,7 +142,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 data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',
+      'relative flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground',
       className,
     )}
     {...props}
diff --git a/components/ui/DataList.tsx b/components/ui/DataList.tsx
index 1509b4d2891..eb9a49e12a7 100644
--- a/components/ui/DataList.tsx
+++ b/components/ui/DataList.tsx
@@ -11,7 +11,7 @@ export function DataListItemValue({ children, className }: { children?: React.Re
 }
 
 export function DataListItemLabel({ children }: { children?: React.ReactNode }) {
-  return <div className="min-w-[180px] max-w-[240px] shrink-0 grow-0 basis-1/4 text-muted-foreground">{children}</div>;
+  return <div className="max-w-[240px] min-w-[180px] shrink-0 grow-0 basis-1/4 text-muted-foreground">{children}</div>;
 }
 
 export type DataListItemProps = {
diff --git a/components/ui/Dialog.tsx b/components/ui/Dialog.tsx
index e7eb8576f88..c83379d4801 100644
--- a/components/ui/Dialog.tsx
+++ b/components/ui/Dialog.tsx
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-[3000] flex max-h-screen flex-col items-center overflow-y-auto bg-foreground/25 px-0 py-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 sm:px-6 sm:py-20',
+      'fixed inset-0 z-3000 flex max-h-screen flex-col items-center overflow-y-auto bg-foreground/25 px-0 py-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 sm:px-6 sm:py-20',
       className,
     )}
     {...props}
@@ -38,14 +38,14 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          'relative z-50 flex w-full grow flex-col gap-4 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg sm:grow-0 sm:rounded-lg',
+          'relative z-50 flex w-full grow flex-col gap-4 bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg sm:grow-0 sm:rounded-lg',
           className,
         )}
         {...props}
       >
         {children}
         {!hideCloseButton && (
-          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
             <X className="h-4 w-4" />
             <span className="sr-only">
               <FormattedMessage defaultMessage="Close" id="Close" />
@@ -74,7 +74,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    className={cn('text-lg leading-none font-semibold tracking-tight', className)}
     {...props}
   />
 ));
diff --git a/components/ui/DropdownMenu.tsx b/components/ui/DropdownMenu.tsx
index 53d188cc663..09afd677041 100644
--- a/components/ui/DropdownMenu.tsx
+++ b/components/ui/DropdownMenu.tsx
@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      'flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent data-[state=open]:bg-accent',
       inset && 'pl-8',
       className,
     )}
@@ -46,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
       className,
     )}
     {...props}
@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-[3000] min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-3000 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
         className,
       )}
       {...props}
@@ -81,7 +81,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer select-none items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       inset && 'pl-8',
       className,
     )}
@@ -97,7 +97,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className,
     )}
     checked={checked}
@@ -120,7 +120,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className,
     )}
     {...props}
diff --git a/components/ui/HoverCard.tsx b/components/ui/HoverCard.tsx
index 566e70c6742..f13741d95bf 100644
--- a/components/ui/HoverCard.tsx
+++ b/components/ui/HoverCard.tsx
@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      'z-[3000] w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-3000 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
       className,
     )}
     {...props}
diff --git a/components/ui/InfoList.tsx b/components/ui/InfoList.tsx
index 7e93330c15c..86e4ac1cdc5 100644
--- a/components/ui/InfoList.tsx
+++ b/components/ui/InfoList.tsx
@@ -9,7 +9,7 @@ export function InfoList({ children, className }: { children: React.ReactNode; c
 }
 
 export function InfoListItemTitle({ children }: { children: React.ReactNode }) {
-  return <dt className="font-medium leading-6 text-slate-900">{children}</dt>;
+  return <dt className="leading-6 font-medium text-slate-900">{children}</dt>;
 }
 
 // ts-unused-exports:disable-next-line
diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
index 27ab335d595..03002ebee2e 100644
--- a/components/ui/Input.tsx
+++ b/components/ui/Input.tsx
@@ -12,7 +12,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
     <input
       type={type}
       className={cn(
-        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         props.error && 'ring-2 ring-red-500 ring-offset-2',
         className,
       )}
@@ -35,7 +35,7 @@ const InputGroup = React.forwardRef<
 >(({ className, prepend, append, prependClassName, appendClassName, ...props }, ref) => (
   <div
     className={cn(
-      'flex h-10 w-fit overflow-hidden rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
+      'flex h-10 w-fit overflow-hidden rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:outline-hidden',
       props.error && 'ring-2 ring-red-500 ring-offset-2',
       props.disabled && 'cursor-not-allowed opacity-50',
       className,
@@ -44,7 +44,7 @@ const InputGroup = React.forwardRef<
     {prepend && <div className={cn('bg-slate-50 px-3 py-2', prependClassName)}>{prepend}</div>}
 
     <input
-      className="mx-3 my-2 w-full bg-inherit outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium"
+      className="mx-3 my-2 w-full bg-inherit outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium"
       ref={ref}
       {...props}
     />
diff --git a/components/ui/Label.tsx b/components/ui/Label.tsx
index f9c342de533..43ef33d15e0 100644
--- a/components/ui/Label.tsx
+++ b/components/ui/Label.tsx
@@ -6,7 +6,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '../../lib/utils';
 
-const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+const labelVariants = cva('text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
diff --git a/components/ui/Popover.tsx b/components/ui/Popover.tsx
index dd2ec947905..fe4cce82dc5 100644
--- a/components/ui/Popover.tsx
+++ b/components/ui/Popover.tsx
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-[3000] w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-3000 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
         className,
       )}
       {...props}
diff --git a/components/ui/RadioGroup.tsx b/components/ui/RadioGroup.tsx
index 9aaa43242da..0a68718cb89 100644
--- a/components/ui/RadioGroup.tsx
+++ b/components/ui/RadioGroup.tsx
@@ -24,7 +24,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       id={props.id || props.value}
@@ -47,16 +47,16 @@ const RadioGroupCard = React.forwardRef<
 >(({ className, children, showSubcontent, subContent, ...props }, ref) => {
   return (
     <div
-      className={`rounded-lg bg-card text-sm text-card-foreground shadow-sm ring-1 ring-border has-[[data-state=checked]]:ring-2 has-[[data-state=checked]]:ring-ring [&:has(:focus-visible)]:bg-primary/5`}
+      className={`rounded-lg bg-card text-sm text-card-foreground ring-1 shadow-xs ring-border has-data-[state=checked]:ring-2 has-data-[state=checked]:ring-ring [&:has(:focus-visible)]:bg-primary/5`}
     >
       <RadioGroupPrimitive.Item
         ref={ref}
-        className={cn('group w-full p-4 text-left outline-none', className)}
+        className={cn('group w-full p-4 text-left outline-hidden', className)}
         {...props}
         asChild={false}
       >
         <div className="flex w-full items-center gap-4">
-          <div className="flex aspect-square h-4 w-4 shrink-0 items-center justify-center rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
+          <div className="flex aspect-square h-4 w-4 shrink-0 items-center justify-center rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
             <RadioGroupPrimitive.Indicator>
               <Circle className="h-2.5 w-2.5 fill-current text-current" />
             </RadioGroupPrimitive.Indicator>
diff --git a/components/ui/Select.tsx b/components/ui/Select.tsx
index 311134507ea..79f6dc7b661 100644
--- a/components/ui/Select.tsx
+++ b/components/ui/Select.tsx
@@ -20,14 +20,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between gap-1 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'flex h-10 w-full items-center justify-between gap-1 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 flex-shrink-0 opacity-50" />
+      <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -35,7 +35,7 @@ SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectTriggerMini = elementFromClass(
   SelectTrigger,
-  'flex w-fit h-fit text-sm px-0 py-0 text-nowrap rounded-none items-center border-none justify-start gap-1 text-sm text-blue-600 ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-fit h-fit text-sm px-0 py-0 text-nowrap rounded-none items-center border-none justify-start gap-1 text-sm text-blue-600 ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
 );
 
 const SelectContent = React.forwardRef<
@@ -46,7 +46,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-[3000] min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-3000 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,
@@ -72,7 +72,7 @@ const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label ref={ref} className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)} {...props} />
+  <SelectPrimitive.Label ref={ref} className={cn('py-1.5 pr-2 pl-8 text-sm font-semibold', className)} {...props} />
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
@@ -83,7 +83,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className,
     )}
     {...props}
diff --git a/components/ui/Sheet.tsx b/components/ui/Sheet.tsx
index cbe216482d2..5d442491444 100644
--- a/components/ui/Sheet.tsx
+++ b/components/ui/Sheet.tsx
@@ -20,7 +20,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-[3000] bg-foreground/25 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-3000 bg-foreground/25 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
       className,
     )}
     {...props}
@@ -30,7 +30,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  'fixed z-[3000] flex max-w-lg flex-col overflow-y-auto bg-background shadow-lg transition ease-in-out focus:outline-none data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+  'fixed z-3000 flex max-w-lg flex-col overflow-y-auto bg-background shadow-lg transition ease-in-out focus:outline-hidden data-[state=closed]:duration-300 data-[state=closed]:animate-out data-[state=open]:duration-500 data-[state=open]:animate-in',
   {
     variants: {
       side: {
diff --git a/components/ui/Stepper.tsx b/components/ui/Stepper.tsx
index 211b7feb41c..94c3bb674aa 100644
--- a/components/ui/Stepper.tsx
+++ b/components/ui/Stepper.tsx
@@ -459,20 +459,20 @@ type VerticalStepProps = StepSharedProps & {
 const verticalStepVariants = cva(
   [
     'relative flex flex-col transition-all duration-200',
-    'data-[completed=true]:[&:not(:last-child)]:after:bg-primary',
-    'data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive',
+    'data-[completed=true]:not-last:after:bg-primary',
+    'data-[invalid=true]:not-last:after:bg-destructive',
   ],
   {
     variants: {
       variant: {
         circle: cn(
-          '[&:not(:last-child)]:gap-[var(--step-gap)] [&:not(:last-child)]:pb-[var(--step-gap)]',
-          "[&:not(:last-child)]:after:w-[2px] [&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:content-['']",
-          '[&:not(:last-child)]:after:inset-x-[calc(var(--step-icon-size)/2)]',
-          '[&:not(:last-child)]:after:absolute',
-          '[&:not(:last-child)]:after:top-[calc(var(--step-icon-size)+var(--step-gap))]',
-          '[&:not(:last-child)]:after:bottom-[var(--step-gap)]',
-          '[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200',
+          'not-last:gap-(--step-gap) not-last:pb-(--step-gap)',
+          "not-last:after:w-[2px] not-last:after:bg-border not-last:after:content-['']",
+          'not-last:after:inset-x-[calc(var(--step-icon-size)/2)]',
+          'not-last:after:absolute',
+          'not-last:after:top-[calc(var(--step-icon-size)+var(--step-gap))]',
+          'not-last:after:bottom-(--step-gap)',
+          'not-last:after:transition-all not-last:after:duration-200',
         ),
         line: 'mb-4 flex-1 border-t-0',
       },
@@ -606,7 +606,7 @@ const VerticalStep = React.forwardRef<HTMLDivElement, VerticalStepProps>((props,
         className={cn(
           'stepper__vertical-step-content',
           !isLastStep && 'min-h-4',
-          variant !== 'line' && 'ps-[--step-icon-size]',
+          variant !== 'line' && 'ps-(--step-icon-size)',
           variant === 'line' && orientation === 'vertical' && 'min-h-0',
           styles?.['vertical-step-content'],
         )}
@@ -666,15 +666,14 @@ const HorizontalStep = React.forwardRef<HTMLDivElement, StepSharedProps>((props,
       className={cn(
         'stepper__horizontal-step',
         'relative flex items-center transition-all duration-200',
-        '[&:not(:last-child)]:flex-1',
-        '[&:not(:last-child)]:after:transition-all [&:not(:last-child)]:after:duration-200',
-        "[&:not(:last-child)]:after:h-[2px] [&:not(:last-child)]:after:bg-border [&:not(:last-child)]:after:content-['']",
-        'data-[completed=true]:[&:not(:last-child)]:after:bg-primary',
-        'data-[invalid=true]:[&:not(:last-child)]:after:bg-destructive',
+        'not-last:flex-1',
+        'not-last:after:transition-all not-last:after:duration-200',
+        "not-last:after:h-[2px] not-last:after:bg-border not-last:after:content-['']",
+        'data-[completed=true]:not-last:after:bg-primary',
+        'data-[invalid=true]:not-last:after:bg-destructive',
         variant === 'circle-alt' &&
-          'flex-1 flex-col justify-start [&:not(:last-child)]:after:relative [&:not(:last-child)]:after:end-[50%] [&:not(:last-child)]:after:start-[50%] [&:not(:last-child)]:after:top-[calc(var(--step-icon-size)/2)] [&:not(:last-child)]:after:order-[-1] [&:not(:last-child)]:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]',
-        variant === 'circle' &&
-          '[&:not(:last-child)]:after:me-[var(--step-gap)] [&:not(:last-child)]:after:ms-[var(--step-gap)] [&:not(:last-child)]:after:flex-1',
+          'flex-1 flex-col justify-start not-last:after:relative not-last:after:start-[50%] not-last:after:end-[50%] not-last:after:top-[calc(var(--step-icon-size)/2)] not-last:after:order-[-1] not-last:after:w-[calc((100%-var(--step-icon-size))-(var(--step-gap)))]',
+        variant === 'circle' && 'not-last:after:ms-(--step-gap) not-last:after:me-(--step-gap) not-last:after:flex-1',
         variant === 'line' && 'flex-1 flex-col border-t-[3px] data-[active=true]:border-primary',
         styles?.['horizontal-step'],
       )}
diff --git a/components/ui/Switch.tsx b/components/ui/Switch.tsx
index 0c825c2f78a..4c5cb0b4651 100644
--- a/components/ui/Switch.tsx
+++ b/components/ui/Switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
       className,
     )}
     {...props}
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        'pointer-events-none block h-5 w-5 rounded-full bg-background ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/components/ui/Table.tsx b/components/ui/Table.tsx
index 13435461ce3..753ea42b3e2 100644
--- a/components/ui/Table.tsx
+++ b/components/ui/Table.tsx
@@ -11,7 +11,7 @@ const Table = React.forwardRef<
     className={cn(
       'table-auto overflow-auto',
       mobileTableView || fullWidth
-        ? '-mx-4 border-b border-t 2xl:mx-0 2xl:rounded-xl 2xl:border'
+        ? '-mx-4 border-t border-b 2xl:mx-0 2xl:rounded-xl 2xl:border'
         : 'w-full rounded-xl border',
       fullWidth ? 'sm:-mx-6' : mobileTableView ? 'sm:mx-0 sm:w-full sm:rounded-xl sm:border' : '',
       className,
@@ -48,8 +48,8 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      'group/row border-b ring-inset ring-ring data-[state=selected]:bg-muted',
-      highlightOnHover && 'hover:bg-muted has-[[data-state=open]]:bg-muted',
+      'group/row border-b ring-ring ring-inset data-[state=selected]:bg-muted',
+      highlightOnHover && 'hover:bg-muted has-data-[state=open]:bg-muted',
       className,
     )}
     {...props}
@@ -105,7 +105,7 @@ const TableActionsButton = React.forwardRef<HTMLButtonElement, React.ButtonHTMLA
     <button
       ref={ref}
       className={cn(
-        'flex h-8 w-8 items-center justify-center rounded-lg border border-transparent bg-transparent text-slate-500 shadow-sm shadow-transparent ring-2 ring-transparent transition-colors hover:text-slate-950 hover:shadow-slate-200 focus:outline-none focus-visible:ring-black active:ring-black disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 group-hover/row:border-slate-200 group-hover/row:bg-white data-[state=open]:ring-black',
+        'flex h-8 w-8 items-center justify-center rounded-lg border border-transparent bg-transparent text-slate-500 ring-2 shadow-xs shadow-transparent ring-transparent transition-colors group-hover/row:border-slate-200 group-hover/row:bg-white hover:text-slate-950 hover:shadow-slate-200 focus:outline-hidden focus-visible:ring-black active:ring-black disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:ring-black',
         className,
       )}
       {...props}
diff --git a/components/ui/Tabs.tsx b/components/ui/Tabs.tsx
index d1502c055e9..0fc4d59c7ea 100644
--- a/components/ui/Tabs.tsx
+++ b/components/ui/Tabs.tsx
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap ring-offset-background transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
       className,
     )}
     {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'mt-2 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden',
       className,
     )}
     {...props}
diff --git a/components/ui/Textarea.tsx b/components/ui/Textarea.tsx
index 80d8f43d0e4..580e3214611 100644
--- a/components/ui/Textarea.tsx
+++ b/components/ui/Textarea.tsx
@@ -16,7 +16,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     const input = (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
           props.error && 'ring-2 ring-destructive ring-offset-2',
           className,
         )}
@@ -30,7 +30,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     ) : (
       <div className="relative">
         {input}
-        <div className="absolute bottom-1.5 right-1.5">
+        <div className="absolute right-1.5 bottom-1.5">
           <Badge size="sm">
             <span>{value.length}</span>
             {props.maxLength && <span className="text-muted-foreground">/{props.maxLength}</span>}
diff --git a/components/ui/Toast.tsx b/components/ui/Toast.tsx
index 2eb2b3a2329..194f1bc4e89 100644
--- a/components/ui/Toast.tsx
+++ b/components/ui/Toast.tsx
@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      'fixed top-0 z-[5000] flex max-h-screen w-full flex-col-reverse gap-4 p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      'fixed top-0 z-5000 flex max-h-screen w-full flex-col-reverse gap-4 p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',
       className,
     )}
     {...props}
@@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-start gap-2 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  'group pointer-events-auto relative flex w-full items-start gap-2 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:animate-in data-[state=open]:slide-in-from-top-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=end]:animate-out data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none sm:data-[state=open]:slide-in-from-bottom-full',
   {
     variants: {
       variant: {
@@ -79,7 +79,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors group-[.destructive]:border-muted/40 hover:bg-secondary hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden focus:group-[.destructive]:ring-destructive disabled:pointer-events-none disabled:opacity-50',
       className,
     )}
     {...props}
@@ -94,7 +94,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      'absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 hover:text-foreground hover:group-[.destructive]:text-red-50 focus:opacity-100 focus:ring-2 focus:outline-hidden focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600',
       className,
     )}
     data-cy="dismiss-toast-btn"
diff --git a/components/ui/Tooltip.tsx b/components/ui/Tooltip.tsx
index b2c28738d1f..dee1d894de7 100644
--- a/components/ui/Tooltip.tsx
+++ b/components/ui/Tooltip.tsx
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-[10000] overflow-hidden rounded-md bg-slate-950 px-3 py-1.5 text-sm text-slate-50 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-10000 overflow-hidden rounded-md bg-slate-950 px-3 py-1.5 text-sm text-slate-50 shadow-md animate-in fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
       className,
     )}
     {...props}
diff --git a/components/vendors/OrganizationDetails.tsx b/components/vendors/OrganizationDetails.tsx
index e81054a83af..32b670ec802 100644
--- a/components/vendors/OrganizationDetails.tsx
+++ b/components/vendors/OrganizationDetails.tsx
@@ -149,7 +149,7 @@ const OrganizationDetails = ({ organization, host, onCancel, editVendor }) => {
       </div>
       {drawerActionsContainer &&
         createPortal(
-          <div className="flex flex-grow justify-between gap-2">
+          <div className="flex grow justify-between gap-2">
             <Button onClick={onCancel} variant="outline" className="rounded-full">
               <FormattedMessage id="actions.cancel" defaultMessage="Cancel" />
             </Button>
diff --git a/components/vendors/VendorDetails.tsx b/components/vendors/VendorDetails.tsx
index 809da1508fe..8095bb440c9 100644
--- a/components/vendors/VendorDetails.tsx
+++ b/components/vendors/VendorDetails.tsx
@@ -136,7 +136,7 @@ const VendorDetails = ({ vendor, host, onCancel, editVendor }: VendorDetailsProp
       )}
       {drawerActionsContainer &&
         createPortal(
-          <div className="flex flex-grow justify-between gap-2">
+          <div className="flex grow justify-between gap-2">
             <Button onClick={onCancel} variant="outline" className="rounded-full">
               <FormattedMessage id="actions.cancel" defaultMessage="Cancel" />
             </Button>
diff --git a/components/vendors/VendorForm.tsx b/components/vendors/VendorForm.tsx
index 6dd314349c3..4729105646c 100644
--- a/components/vendors/VendorForm.tsx
+++ b/components/vendors/VendorForm.tsx
@@ -262,7 +262,7 @@ const VendorForm = ({ vendor, host, onSuccess, onCancel, isModal, supportsTaxFor
         {isModal && (
           <button
             onClick={onCancel}
-            className="flex h-10 w-10 items-center justify-center rounded-full border border-transparent bg-transparent text-slate-500 ring-2 ring-transparent transition-colors hover:text-slate-950 focus:outline-none focus-visible:ring-black active:ring-black group-hover:border-slate-200 group-hover:bg-white data-[state=open]:ring-black"
+            className="flex h-10 w-10 items-center justify-center rounded-full border border-transparent bg-transparent text-slate-500 ring-2 ring-transparent transition-colors group-hover:border-slate-200 group-hover:bg-white hover:text-slate-950 focus:outline-hidden focus-visible:ring-black active:ring-black data-[state=open]:ring-black"
           >
             <X size="20px" />
           </button>
@@ -271,7 +271,7 @@ const VendorForm = ({ vendor, host, onSuccess, onCancel, isModal, supportsTaxFor
       <Formik initialValues={initialValues} onSubmit={handleSubmit} validate={validateVendorForm}>
         {formik => {
           const actionButtons = (
-            <div className="flex flex-grow justify-between gap-2">
+            <div className="flex grow justify-between gap-2">
               <Button onClick={onCancel} variant="outline" className="rounded-full" disabled={loading}>
                 <FormattedMessage id="actions.cancel" defaultMessage="Cancel" />
               </Button>
@@ -301,7 +301,7 @@ const VendorForm = ({ vendor, host, onSuccess, onCancel, isModal, supportsTaxFor
                     />
                   )}
                 </Field>
-                <div className="flex-grow">
+                <div className="grow">
                   <StyledInputFormikField
                     name="name"
                     label={intl.formatMessage({ defaultMessage: "Vendor's name", id: 'iDPmhB' })}
@@ -366,7 +366,7 @@ const VendorForm = ({ vendor, host, onSuccess, onCancel, isModal, supportsTaxFor
                   )}
                 </React.Fragment>
               )}
-              <p className="mb-3 mt-4 text-base font-bold">
+              <p className="mt-4 mb-3 text-base font-bold">
                 <FormattedMessage defaultMessage="Tax identification" id="YQKRUh" />
               </p>
               <StyledInputFormikField
@@ -407,7 +407,7 @@ const VendorForm = ({ vendor, host, onSuccess, onCancel, isModal, supportsTaxFor
                 {({ field }) => <StyledInput {...field} width="100%" maxWidth={500} maxLength={60} />}
               </StyledInputFormikField>
 
-              <p className="mb-3 mt-4 text-base font-bold">
+              <p className="mt-4 mb-3 text-base font-bold">
                 <FormattedMessage defaultMessage="Mailing address" id="yrKCq7" />
               </p>
               <StyledInputLocation
@@ -445,7 +445,7 @@ const VendorForm = ({ vendor, host, onSuccess, onCancel, isModal, supportsTaxFor
                   />
                 )}
               </StyledInputFormikField>
-              <div className="mt-3 flex-grow">
+              <div className="mt-3 grow">
                 <p className="mb-2 text-[#4D4F51]">
                   <FormattedMessage
                     id="OptionalFieldLabel"
@@ -470,7 +470,7 @@ const VendorForm = ({ vendor, host, onSuccess, onCancel, isModal, supportsTaxFor
               {formik.values.payoutMethod && (
                 <Field name="payoutMethod">
                   {({ field }) => (
-                    <div className="mt-3 flex-grow">
+                    <div className="mt-3 grow">
                       <PayoutMethodForm
                         fieldsPrefix="payoutMethod"
                         payoutMethod={field.value}
diff --git a/components/virtual-card-requests/VirtualCardRequestDrawer.tsx b/components/virtual-card-requests/VirtualCardRequestDrawer.tsx
index 83b0ef50595..077e7fc589c 100644
--- a/components/virtual-card-requests/VirtualCardRequestDrawer.tsx
+++ b/components/virtual-card-requests/VirtualCardRequestDrawer.tsx
@@ -227,8 +227,8 @@ export function VirtualCardRequestDrawer(props: VirtualCardRequestDrawerProps) {
                   virtualCardRequest.spendingLimitAmount,
                   virtualCardRequest.spendingLimitInterval,
                   {
-                    LimitAmount: v => <span className="italic text-slate-600">{v}</span>,
-                    LimitInterval: v => <span className="italic text-slate-600">{v}</span>,
+                    LimitAmount: v => <span className="text-slate-600 italic">{v}</span>,
+                    LimitInterval: v => <span className="text-slate-600 italic">{v}</span>,
                   },
                 )}
               />
diff --git a/components/virtual-card-requests/VirtualCardRequestsTable.tsx b/components/virtual-card-requests/VirtualCardRequestsTable.tsx
index 038552bc16f..cd0eab45886 100644
--- a/components/virtual-card-requests/VirtualCardRequestsTable.tsx
+++ b/components/virtual-card-requests/VirtualCardRequestsTable.tsx
@@ -200,8 +200,8 @@ const tableColumns: ColumnDef<VirtualCardRequest>[] = [
       const vcr = row.original;
       const meta = table.options.meta as VirtualCardRequestsTableMeta;
       return getSpendingLimitShortString(meta.intl, vcr.currency, vcr.spendingLimitAmount, vcr.spendingLimitInterval, {
-        LimitAmount: v => <span className="italic text-slate-600">{v}</span>,
-        LimitInterval: v => <span className="italic text-slate-600">{v}</span>,
+        LimitAmount: v => <span className="text-slate-600 italic">{v}</span>,
+        LimitInterval: v => <span className="text-slate-600 italic">{v}</span>,
       });
     },
   },
diff --git a/components/virtual-cards/StripeVirtualCardComplianceStatement.tsx b/components/virtual-cards/StripeVirtualCardComplianceStatement.tsx
index c5cd0ce24e9..1bdb5316e0b 100644
--- a/components/virtual-cards/StripeVirtualCardComplianceStatement.tsx
+++ b/components/virtual-cards/StripeVirtualCardComplianceStatement.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 
 export function StripeVirtualCardComplianceStatement() {
   return (
-    <p className="text-sm italic text-muted-foreground">
+    <p className="text-sm text-muted-foreground italic">
       <FormattedMessage
         defaultMessage="{virtualCardProgramName} Visa® Commercial Credit cards are issued by Celtic Bank."
         id="l+tve8"
diff --git a/components/virtual-cards/VirtualCardDrawer.tsx b/components/virtual-cards/VirtualCardDrawer.tsx
index 6281dc2744b..9ac5906e2a1 100644
--- a/components/virtual-cards/VirtualCardDrawer.tsx
+++ b/components/virtual-cards/VirtualCardDrawer.tsx
@@ -184,8 +184,8 @@ export default function VirtualCardDrawer(props: VirtualCardDrawerProps) {
                   {
                     AvailableAmount: I18nBold,
                     AmountSeparator: v => <strong>&nbsp;{v}&nbsp;</strong>,
-                    LimitAmount: v => <span className="italic text-slate-600">{v}</span>,
-                    LimitInterval: v => <span className="italic text-slate-600">{v}</span>,
+                    LimitAmount: v => <span className="text-slate-600 italic">{v}</span>,
+                    LimitInterval: v => <span className="text-slate-600 italic">{v}</span>,
                   },
                 )}
               />
diff --git a/components/virtual-cards/VirtualCardsTable.tsx b/components/virtual-cards/VirtualCardsTable.tsx
index 6bc0f4634cd..04410105bea 100644
--- a/components/virtual-cards/VirtualCardsTable.tsx
+++ b/components/virtual-cards/VirtualCardsTable.tsx
@@ -75,7 +75,7 @@ const tableColumns: ColumnDef<GraphQLVirtualCard>[] = [
       const vc = row.original;
       const meta = table.options.meta as VirtualCardsTableMeta;
       return (
-        <div className="italic text-slate-500">
+        <div className="text-slate-500 italic">
           {getAvailableLimitShortString(
             meta.intl,
             vc.currency,
@@ -83,7 +83,7 @@ const tableColumns: ColumnDef<GraphQLVirtualCard>[] = [
             vc.spendingLimitAmount,
             vc.spendingLimitInterval,
             {
-              AvailableAmount: v => <span className="font-medium not-italic text-slate-950">{v}</span>,
+              AvailableAmount: v => <span className="font-medium text-slate-950 not-italic">{v}</span>,
               AmountSeparator: v => <span>&nbsp;{v}&nbsp;</span>,
               LimitAmount: v => <span>{v}</span>,
               LimitInterval: v => <span>{v}</span>,
diff --git a/package-lock.json b/package-lock.json
index 3eaeb2d817a..dbe07e0774d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -154,6 +154,7 @@
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-swc": "^0.3.0",
         "@swc/core": "^1.5.24",
+        "@tailwindcss/postcss": "^4.0.0",
         "@tailwindcss/typography": "^0.5.13",
         "@types/apollo-upload-client": "17.0.5",
         "@types/lodash": "^4.17.14",
@@ -163,7 +164,6 @@
         "@types/webpack-env": "^1.18.5",
         "@typescript-eslint/eslint-plugin": "^7.12.0",
         "@typescript-eslint/parser": "^7.12.0",
-        "autoprefixer": "10.4.20",
         "cheerio": "^1.0.0",
         "circular-dependency-plugin": "^5.2.2",
         "commander": "^13.0.0",
@@ -202,14 +202,14 @@
         "pdf-parse": "^1.1.1",
         "postcss": "8.5.1",
         "prettier": "3.4.2",
-        "prettier-plugin-tailwindcss": "0.6.11",
+        "prettier-plugin-tailwindcss": "^0.6.11",
         "raf": "^3.4.1",
         "raw-loader": "^4.0.2",
         "react-test-renderer": "^18.3.1",
         "rollup": "^3.20.7",
         "shx": "^0.3.4",
         "styled-jsx": "^5.1.6",
-        "tailwindcss": "3.4.17",
+        "tailwindcss": "^4.0.0",
         "tailwindcss-animate": "1.0.7",
         "ts-unused-exports": "^10.1.0",
         "tsx": "^4.11.2",
@@ -11218,6 +11218,244 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.1.tgz",
+      "integrity": "sha512-lc+ly6PKHqgCVl7eO8D2JlV96Lks5bmL6pdtM6UasyUHLU2zmrOqU6jfgln120IVnCh3VC8GG/ca24xVTtSokw==",
+      "dev": true,
+      "dependencies": {
+        "enhanced-resolve": "^5.18.0",
+        "jiti": "^2.4.2",
+        "tailwindcss": "4.0.1"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/jiti": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "dev": true,
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/tailwindcss": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.1.tgz",
+      "integrity": "sha512-UK5Biiit/e+r3i0O223bisoS5+y7ZT1PM8Ojn0MxRHzXN1VPZ2KY6Lo6fhu1dOfCfyUAlK7Lt6wSxowRabATBw==",
+      "dev": true
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.0.1.tgz",
+      "integrity": "sha512-3z1SpWoDeaA6K6jd92CRrGyDghOcRILEgyWVHRhaUm/tcpiazwJpU9BSG0xB7GGGnl9capojaC+zme/nKsZd/w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.0.1",
+        "@tailwindcss/oxide-darwin-arm64": "4.0.1",
+        "@tailwindcss/oxide-darwin-x64": "4.0.1",
+        "@tailwindcss/oxide-freebsd-x64": "4.0.1",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.1",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.0.1",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.0.1",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.0.1",
+        "@tailwindcss/oxide-linux-x64-musl": "4.0.1",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.0.1",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.0.1"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.0.1.tgz",
+      "integrity": "sha512-eP/rI9WaAElpeiiHDqGtDqga9iDsOClXxIqdHayHsw93F24F03b60CwgGhrGF9Io/EuWIpz3TMRhPVOLhoXivw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.0.1.tgz",
+      "integrity": "sha512-jZVUo0kNd1IjxdCYwg4dwegDNsq7PoUx4LM814RmgY3gfJ63Y6GlpJXHOpd5FLv1igpeZox5LzRk2oz8MQoJwQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.0.1.tgz",
+      "integrity": "sha512-E31wHiIf4LB0aKRohrS4U6XfFSACCL9ifUFfPQ16FhcBIL4wU5rcBidvWvT9TQFGPkpE69n5dyXUcqiMrnF/Ig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.0.1.tgz",
+      "integrity": "sha512-8/3ZKLMYqgAsBzTeczOKWtT4geF02g9S7cntY5gvqQZ4E0ImX724cHcZJi9k6fkE6aLbvwxxHxaShFvRxblwKQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.0.1.tgz",
+      "integrity": "sha512-EYjbh225klQfWzy6LeIAfdjHCK+p71yLV/GjdPNW47Bfkkq05fTzIhHhCgshUvNp78EIA33iQU+ktWpW06NgHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.0.1.tgz",
+      "integrity": "sha512-PrX2SwIqWNP5cYeSyQfrhbk4ffOM338T6CrEwIAGvLPoUZiklt19yknlsBme6bReSw7TSAMy+8KFdLLi5fcWNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.0.1.tgz",
+      "integrity": "sha512-iuoFGhKDojtfloi5uj6MIk4kxEOGcsAk/kPbZItF9Dp7TnzVhxo2U/718tXhxGrg6jSL3ST3cQHIjA6yw3OeXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.0.1.tgz",
+      "integrity": "sha512-pNUrGQYyE8RK+N9yvkPmHnlKDfFbni9A3lsi37u4RoA/6Yn+zWVoegvAQMZu3w+jqnpb2A/bYJ+LumcclUZ3yg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.0.1.tgz",
+      "integrity": "sha512-xSGWaDcT6SJ75su9zWXj8GYb2jM/przXwZGH96RTS7HGDIoI1tvgpls88YajG5Sx7hXaqAWCufjw5L/dlu+lzg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.0.1.tgz",
+      "integrity": "sha512-BUNL2isUZ2yWnbplPddggJpZxsqGHPZ1RJAYpu63W4znUnKCzI4m/jiy0WpyYqqOKL9jDM5q0QdsQ9mc3aw5YQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.0.1.tgz",
+      "integrity": "sha512-ZtcVu+XXOddGsPlvO5nh2fnbKmwly2C07ZB1lcYCf/b8qIWF04QY9o6vy6/+6ioLRfbp3E7H/ipFio38DZX4oQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.0.0.tgz",
+      "integrity": "sha512-lI2bPk4TvwavHdehjr5WiC6HnZ59hacM6ySEo4RM/H7tsjWd8JpqiNW9ThH7rO/yKtrn4mGBoXshpvn8clXjPg==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "^4.0.0",
+        "@tailwindcss/oxide": "^4.0.0",
+        "lightningcss": "^1.29.1",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.0.0"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz",
@@ -12645,12 +12883,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
-    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -12768,12 +13000,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -13089,44 +13315,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/autoprefixer": {
-      "version": "10.4.20",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
-      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.23.3",
-        "caniuse-lite": "^1.0.30001646",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -13480,15 +13668,6 @@
         "node": "*"
       }
     },
-    "node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -13803,15 +13982,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/camelize": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
@@ -14149,43 +14319,6 @@
         "entities": "^4.5.0"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/chownr": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -16004,12 +16137,6 @@
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
-    },
     "node_modules/diff": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz",
@@ -16040,12 +16167,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
-    },
     "node_modules/dnsbl": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/dnsbl/-/dnsbl-4.0.1.tgz",
@@ -16305,11 +16426,10 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
-      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.0.tgz",
+      "integrity": "sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -18583,19 +18703,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/framer-motion": {
       "version": "11.5.4",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.4.tgz",
@@ -20271,18 +20378,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-boolean-object": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -22899,6 +22994,246 @@
         "immediate": "~3.0.5"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.1.tgz",
+      "integrity": "sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==",
+      "dev": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.1",
+        "lightningcss-darwin-x64": "1.29.1",
+        "lightningcss-freebsd-x64": "1.29.1",
+        "lightningcss-linux-arm-gnueabihf": "1.29.1",
+        "lightningcss-linux-arm64-gnu": "1.29.1",
+        "lightningcss-linux-arm64-musl": "1.29.1",
+        "lightningcss-linux-x64-gnu": "1.29.1",
+        "lightningcss-linux-x64-musl": "1.29.1",
+        "lightningcss-win32-arm64-msvc": "1.29.1",
+        "lightningcss-win32-x64-msvc": "1.29.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.1.tgz",
+      "integrity": "sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.1.tgz",
+      "integrity": "sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.1.tgz",
+      "integrity": "sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.1.tgz",
+      "integrity": "sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.1.tgz",
+      "integrity": "sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.1.tgz",
+      "integrity": "sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.1.tgz",
+      "integrity": "sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.1.tgz",
+      "integrity": "sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.1.tgz",
+      "integrity": "sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.1.tgz",
+      "integrity": "sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss/node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -24215,17 +24550,6 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nan": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz",
@@ -24473,15 +24797,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/normalize-wheel": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
@@ -24846,15 +25161,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@@ -25655,77 +25961,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/postcss-modules-extract-imports": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
@@ -25785,32 +26020,6 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
     "node_modules/postcss-selector-parser": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
@@ -25860,7 +26069,6 @@
       "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
       "integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=14.21.3"
       },
@@ -26690,15 +26898,6 @@
       "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
       "license": "MIT"
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
     "node_modules/read-package-json-fast": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz",
@@ -26721,18 +26920,6 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
     "node_modules/rechoir": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
@@ -28297,85 +28484,6 @@
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/sucrase/node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -28531,42 +28639,10 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0.tgz",
+      "integrity": "sha512-ULRPI3A+e39T7pSaf1xoi58AqqJxVCLg8F/uM5A3FadUbnyDTgltVnXJvdkTjwCOGA6NazqHVcwPJC5h2vRYVQ==",
+      "dev": true
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",
@@ -28783,27 +28859,6 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/throng": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/throng/-/throng-5.0.0.tgz",
@@ -28988,12 +29043,6 @@
         "typescript": ">=4.2.0"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
-    },
     "node_modules/ts-invariant": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz",
diff --git a/package.json b/package.json
index 5697472146c..e08e2033ba0 100644
--- a/package.json
+++ b/package.json
@@ -218,6 +218,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-swc": "^0.3.0",
     "@swc/core": "^1.5.24",
+    "@tailwindcss/postcss": "^4.0.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/apollo-upload-client": "17.0.5",
     "@types/lodash": "^4.17.14",
@@ -227,7 +228,6 @@
     "@types/webpack-env": "^1.18.5",
     "@typescript-eslint/eslint-plugin": "^7.12.0",
     "@typescript-eslint/parser": "^7.12.0",
-    "autoprefixer": "10.4.20",
     "cheerio": "^1.0.0",
     "circular-dependency-plugin": "^5.2.2",
     "commander": "^13.0.0",
@@ -266,14 +266,14 @@
     "pdf-parse": "^1.1.1",
     "postcss": "8.5.1",
     "prettier": "3.4.2",
-    "prettier-plugin-tailwindcss": "0.6.11",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "raf": "^3.4.1",
     "raw-loader": "^4.0.2",
     "react-test-renderer": "^18.3.1",
     "rollup": "^3.20.7",
     "shx": "^0.3.4",
     "styled-jsx": "^5.1.6",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "^4.0.0",
     "tailwindcss-animate": "1.0.7",
     "ts-unused-exports": "^10.1.0",
     "tsx": "^4.11.2",
@@ -301,11 +301,14 @@
       "@graphql-codegen/add",
       "@graphql-codegen/client-preset",
       "@types/webpack-env",
-      "autoprefixer",
+      "@tailwindcss/postcss",
+      "@tailwindcss/typography",
       "esbuild",
       "postcss",
       "prettier-plugin-tailwindcss",
       "styled-jsx",
+      "tailwindcss",
+      "tailwindcss-animate",
       "pdfjs-dist"
     ]
   }
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index e13d69440f6..9ddfb8494dd 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -239,7 +239,7 @@ const DashboardPage = () => {
               {LoggedInUser && require2FAForAdmins(account) && !LoggedInUser.hasTwoFactorAuth ? (
                 <TwoFactorAuthRequiredMessage className="lg:mt-16" />
               ) : (
-                <div className="min-w-0 max-w-screen-xl flex-1">
+                <div className="max-w-(--breakpoint-xl) min-w-0 flex-1">
                   <DashboardSection
                     section={selectedSection}
                     isLoading={isLoading}
@@ -258,7 +258,7 @@ const DashboardPage = () => {
               ) : (
                 <div
                   className={clsx(
-                    'mx-auto grid w-full max-w-screen-2xl grid-cols-1 justify-center px-3 xl:px-6',
+                    'mx-auto grid w-full max-w-(--breakpoint-2xl) grid-cols-1 justify-center px-3 xl:px-6',
                     ['host-transactions', 'transactions', 'overview'].includes(selectedSection)
                       ? 'lg:grid-cols-[minmax(0,1fr)_minmax(0,1536px)_minmax(0,1fr)]'
                       : subMenu
diff --git a/pages/preview/[collectiveSlug]/index.tsx b/pages/preview/[collectiveSlug]/index.tsx
index 34e0fe9181b..e77c186d319 100644
--- a/pages/preview/[collectiveSlug]/index.tsx
+++ b/pages/preview/[collectiveSlug]/index.tsx
@@ -71,14 +71,14 @@ export default function ContributePage() {
       <div className="flex-1 space-y-8">
         {mainfundraising && (
           <div className="border-b bg-white py-12">
-            <div className="gap- relative mx-auto grid max-w-screen-xl grid-cols-12 px-6">
+            <div className="gap- relative mx-auto grid max-w-(--breakpoint-xl) grid-cols-12 px-6">
               <div className="col-span-2">
                 <div className="sticky top-28 space-y-4">
                   <ContentOverview content={profile?.longDescription} />
                 </div>
               </div>
 
-              <div className="prose prose-slate col-span-7">
+              <div className="col-span-7 prose prose-slate">
                 <h3>About</h3>
                 <Markup
                   noWrap
@@ -118,10 +118,10 @@ export default function ContributePage() {
         )}
 
         {(data?.projects?.totalCount > 0 || data?.events?.totalCount > 0) && (
-          <div className="mx-auto max-w-screen-xl space-y-8 px-6 py-12">
+          <div className="mx-auto max-w-(--breakpoint-xl) space-y-8 px-6 py-12">
             {data?.projects?.totalCount > 0 && (
               <React.Fragment>
-                <h3 className="text-2xl font-semibold leading-none tracking-tight">Projects</h3>
+                <h3 className="text-2xl leading-none font-semibold tracking-tight">Projects</h3>
                 <div className="grid grid-cols-3 gap-4">
                   {data?.projects?.nodes?.map(child => {
                     return (
@@ -133,7 +133,7 @@ export default function ContributePage() {
             )}
             {data?.events?.totalCount > 0 && (
               <React.Fragment>
-                <h3 className="text-2xl font-semibold leading-none tracking-tight">Events</h3>
+                <h3 className="text-2xl leading-none font-semibold tracking-tight">Events</h3>
                 <div className="grid grid-cols-3 gap-4">
                   {data?.events?.nodes?.map(child => {
                     return (
diff --git a/pages/reset-password-completed.js b/pages/reset-password-completed.js
index 8aad1d0e612..554abc8e26e 100644
--- a/pages/reset-password-completed.js
+++ b/pages/reset-password-completed.js
@@ -15,7 +15,7 @@ const ResetPasswordCompleted = ({ LoggedInUser, loadingLoggedInUser }) => {
   return (
     <Page noRobots showFooter={false}>
       <div
-        className="flex flex-col items-center px-4 pb-32 pt-8 text-center sm:pt-16"
+        className="flex flex-col items-center px-4 pt-8 pb-32 text-center sm:pt-16"
         data-cy="reset-password-success-page"
       >
         <Image src="/static/images/sign-in-illustration.png" width={624} height={372} />
diff --git a/pages/reset-password-sent.js b/pages/reset-password-sent.js
index 7d7d7cd0454..a1b877ab0b9 100644
--- a/pages/reset-password-sent.js
+++ b/pages/reset-password-sent.js
@@ -31,7 +31,7 @@ class ResetPasswordSent extends Component {
     const isValidEmail = email && isEmail(email);
     return (
       <Page noRobots showFooter={false}>
-        <div className="flex flex-col items-center px-4 pb-32 pt-8 text-center sm:pt-16">
+        <div className="flex flex-col items-center px-4 pt-8 pb-32 text-center sm:pt-16">
           <Image src="/static/images/sign-in-illustration.png" width={624} height={372} />
           <P fontSize="32px" lineHeight="40px" color="black.900" fontWeight={700}>
             <FormattedMessage defaultMessage="Your reset password email is on its way." id="tSQ2Fc" />
diff --git a/pages/reset-password.tsx b/pages/reset-password.tsx
index 6b97bfaba3d..1d9a32dafc0 100644
--- a/pages/reset-password.tsx
+++ b/pages/reset-password.tsx
@@ -114,7 +114,7 @@ const ResetPasswordPage = ({ token }: { token: string }) => {
             </h1>
 
             {loading ? (
-              <div className="mb-4 mt-6 flex w-full justify-center">
+              <div className="mt-6 mb-4 flex w-full justify-center">
                 <LoadingGrid />
               </div>
             ) : (
diff --git a/pages/signinLinkSent.js b/pages/signinLinkSent.js
index 769a1246426..3839c871438 100644
--- a/pages/signinLinkSent.js
+++ b/pages/signinLinkSent.js
@@ -31,7 +31,7 @@ class SignInLinkSent extends Component {
     const isValidEmail = email && isEmail(email);
     return (
       <Page title="Login Link Sent" noRobots showFooter={false}>
-        <div className="flex flex-col items-center px-4 pb-32 pt-8 text-center sm:pt-16">
+        <div className="flex flex-col items-center px-4 pt-8 pb-32 text-center sm:pt-16">
           <Image src="/static/images/sign-in-illustration.png" width={624} height={372} />
           <P fontSize="32px" lineHeight="40px" fontWeight={700} color="black.900">
             <FormattedMessage id="SignIn.LinkSent" defaultMessage="Your magic link is on its way!" />
diff --git a/pages/staticPage.js b/pages/staticPage.js
index a44bc2447aa..aa4cb95e41c 100644
--- a/pages/staticPage.js
+++ b/pages/staticPage.js
@@ -43,9 +43,9 @@ class StaticPage extends React.Component {
     const { path, pageSlug, title } = this.props;
     return (
       <Page title={title} navTitle={title}>
-        <div className="markdown mx-auto mt-10 max-w-screen-lg px-4 py-2 sm:px-6 sm:py-4">
+        <div className="markdown mx-auto mt-10 max-w-(--breakpoint-lg) px-4 py-2 sm:px-6 sm:py-4">
           {path && pageSlug && (
-            <div className="mt-3 uppercase text-gray-400">
+            <div className="mt-3 text-gray-400 uppercase">
               <Link href={`/${path}`}>{path}</Link>
             </div>
           )}
diff --git a/pages/welcome.tsx b/pages/welcome.tsx
index b36e2804e8c..68b0091d2d1 100644
--- a/pages/welcome.tsx
+++ b/pages/welcome.tsx
@@ -20,16 +20,16 @@ const Welcome = () => {
       showSearch={false}
       menuItemsV2={{ solutions: false, product: false, company: false, docs: false }}
     >
-      <div className="mb-16 mt-28 flex flex-col items-center justify-center lg:flex-row">
+      <div className="mt-28 mb-16 flex flex-col items-center justify-center lg:flex-row">
         <div className="flex flex-col text-center lg:pr-12">
           <div className="flex justify-center">
             <Image src="/static/images/oc-logo-watercolor-256.png" height={96} width={96} alt="OC Logo" />
           </div>
-          <div className="w-full pl-4 pr-4 pt-10 lg:w-[404px] lg:pr-0">
-            <div className="text-black-900 text-3xl font-bold leading-10">
+          <div className="w-full pt-10 pr-4 pl-4 lg:w-[404px] lg:pr-0">
+            <div className="text-black-900 text-3xl leading-10 font-bold">
               <FormattedMessage defaultMessage="Welcome to Open Collective!" id="fMZau6" />
             </div>
-            <div className="text-black-800 pt-4 text-lg font-normal leading-7">
+            <div className="text-black-800 pt-4 text-lg leading-7 font-normal">
               <FormattedMessage
                 defaultMessage="Now that you have created your personal account, there are a couple of things you can do from here..."
                 id="9cMLO9"
@@ -38,20 +38,20 @@ const Welcome = () => {
           </div>
         </div>
 
-        <div className="mt-24 flex w-full flex-col items-center rounded-lg border shadow-sm lg:mt-0 lg:w-[520px]">
+        <div className="mt-24 flex w-full flex-col items-center rounded-lg border shadow-xs lg:mt-0 lg:w-[520px]">
           <div className="-mt-16 rounded-full border-4 border-white bg-white">
             <Image src="/static/images/sample-avatar.png" height={128} width={128} alt="Avatar" />
           </div>
-          <div className="text-black-900 pb-8 pt-10 text-2xl font-bold leading-8">{LoggedInUser?.collective?.name}</div>
+          <div className="text-black-900 pt-10 pb-8 text-2xl leading-8 font-bold">{LoggedInUser?.collective?.name}</div>
 
           <div className="mt-2 w-full rounded-lg bg-white p-2 hover:bg-blue-50 lg:w-[472px]">
             <Link href="/create">
               <div className="flex items-center px-4 py-3">
                 <div className="w-full">
-                  <div className="text-black-900 text-lg font-bold leading-7">
+                  <div className="text-black-900 text-lg leading-7 font-bold">
                     <FormattedMessage id="collective.create" defaultMessage="Create Collective" />
                   </div>
-                  <div className="text-black-700 pt-4 text-sm font-medium leading-6">
+                  <div className="text-black-700 pt-4 text-sm leading-6 font-medium">
                     <FormattedMessage
                       defaultMessage="Create a Collective to be able to accept donations, apply for grants, and manage your budget transparently."
                       id="5xC/JS"
@@ -69,10 +69,10 @@ const Welcome = () => {
             <Link href="/organizations/new">
               <div className="flex items-center px-4 py-3">
                 <div className="w-full">
-                  <div className="text-black-900 text-lg font-bold leading-7">
+                  <div className="text-black-900 text-lg leading-7 font-bold">
                     <FormattedMessage id="organization.create" defaultMessage="Create Organization" />
                   </div>
-                  <div className="text-black-700 pt-4 text-sm font-medium leading-6">
+                  <div className="text-black-700 pt-4 text-sm leading-6 font-medium">
                     <FormattedMessage
                       defaultMessage="Create a profile for your business to appear as a financial contributor, enable your employees to contribute on behalf of your company, and more."
                       id="mntSey"
@@ -90,10 +90,10 @@ const Welcome = () => {
             <Link href="/search">
               <div className="flex items-center px-4 py-3">
                 <div className="w-full">
-                  <div className="text-black-900 text-lg font-bold leading-7">
+                  <div className="text-black-900 text-lg leading-7 font-bold">
                     <FormattedMessage defaultMessage="Contribute and engage with more Collectives" id="oEensl" />
                   </div>
-                  <div className="text-black-700 pt-4 text-sm font-medium leading-6">
+                  <div className="text-black-700 pt-4 text-sm leading-6 font-medium">
                     <FormattedMessage
                       defaultMessage="Discover active Collectives in the platform, contribute and engage with the communities that represent you."
                       id="JYgdfC"
diff --git a/postcss.config.js b/postcss.config.js
index 12a703d900d..e5640725a9e 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/public/static/styles/app.css b/public/static/styles/app.css
index de98b437782..6e494310cf2 100644
--- a/public/static/styles/app.css
+++ b/public/static/styles/app.css
@@ -1,179 +1,306 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src:
-    url('../fonts/inter/Inter-Regular.woff2') format('woff2'),
-    url('../fonts/inter/Inter-Regular.woff') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src:
-    url('../fonts/inter/Inter-Italic.woff2') format('woff2'),
-    url('../fonts/inter/Inter-Italic.woff') format('woff');
-}
+@import 'tailwindcss';
 
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src:
-    url('../fonts/inter/Inter-Medium.woff2') format('woff2'),
-    url('../fonts/inter/Inter-Medium.woff') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 500;
-  font-display: swap;
-  src:
-    url('../fonts/inter/Inter-MediumItalic.woff2') format('woff2'),
-    url('../fonts/inter/Inter-MediumItalic.woff') format('woff');
-}
+@plugin 'tailwindcss-animate';
+@plugin '@tailwindcss/typography';
 
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src:
-    url('../fonts/inter/Inter-SemiBold.woff2') format('woff2'),
-    url('../fonts/inter/Inter-SemiBold.woff') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 600;
-  font-display: swap;
-  src:
-    url('../fonts/inter/Inter-SemiBoldItalic.woff2') format('woff2'),
-    url('../fonts/inter/Inter-SemiBoldItalic.woff') format('woff');
-}
+@custom-variant dark (&:is(.dark *));
 
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src:
-    url('../fonts/inter/Inter-Bold.woff2') format('woff2'),
-    url('../fonts/inter/Inter-Bold.woff') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src:
-    url('../fonts/inter/Inter-BoldItalic.woff2') format('woff2'),
-    url('../fonts/inter/Inter-BoldItalic.woff') format('woff');
-}
+@theme {
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src:
-    url('../fonts/inter/Inter-ExtraBold.woff2') format('woff2'),
-    url('../fonts/inter/Inter-ExtraBold.woff') format('woff');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 800;
-  font-display: swap;
-  src:
-    url('../fonts/inter/Inter-ExtraBoldItalic.woff2') format('woff2'),
-    url('../fonts/inter/Inter-ExtraBoldItalic.woff') format('woff');
-}
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
 
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src:
-    url('../fonts/inter/Inter-Black.woff2') format('woff2'),
-    url('../fonts/inter/Inter-Black.woff') format('woff');
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-oc-blue-tints-500: hsla(213, 100%, 59%, 1);
+  --color-oc-blue-tints-800: hsla(222, 80%, 40%, 1);
+  --color-oc-blue-tints-transparent: hsla(216, 100%, 58%, 0.3);
+
+  --color-dark-900: hsla(216, 2%, 8%, 1);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 6px);
+
+  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-signature: JustMeAgainDownHere, cursive;
+  --font-emoji: AppleColorEmoji, Segoe UI Emoji, NotoColorEmoji,
+    Segoe UI Symbol, Android Emoji, EmojiSymbols;
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-collapsible-down: collapsible-down 0.2s ease-out;
+  --animate-collapsible-up: collapsible-up 0.2s ease-out;
+  --animate-arrow-right: arrow-right 0.2s ease-out forwards;
+
+  --transition-duration-1500: 1500ms;
+  --transition-duration-2000: 2000ms;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+  @keyframes collapsible-up {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+  @keyframes arrow-right {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(25%);
+    }
+  }
 }
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 900;
-  font-display: swap;
-  src:
-    url('../fonts/inter/Inter-BlackItalic.woff2') format('woff2'),
-    url('../fonts/inter/Inter-BlackItalic.woff') format('woff');
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 1.5rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1536px) {
+    max-width: 1536px;
+  }
 }
 
 /*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@layer utilities {
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src:
+      url('../fonts/inter/Inter-Regular.woff2') format('woff2'),
+      url('../fonts/inter/Inter-Regular.woff') format('woff');
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src:
+      url('../fonts/inter/Inter-Italic.woff2') format('woff2'),
+      url('../fonts/inter/Inter-Italic.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src:
+      url('../fonts/inter/Inter-Medium.woff2') format('woff2'),
+      url('../fonts/inter/Inter-Medium.woff') format('woff');
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src:
+      url('../fonts/inter/Inter-MediumItalic.woff2') format('woff2'),
+      url('../fonts/inter/Inter-MediumItalic.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src:
+      url('../fonts/inter/Inter-SemiBold.woff2') format('woff2'),
+      url('../fonts/inter/Inter-SemiBold.woff') format('woff');
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src:
+      url('../fonts/inter/Inter-SemiBoldItalic.woff2') format('woff2'),
+      url('../fonts/inter/Inter-SemiBoldItalic.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src:
+      url('../fonts/inter/Inter-Bold.woff2') format('woff2'),
+      url('../fonts/inter/Inter-Bold.woff') format('woff');
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src:
+      url('../fonts/inter/Inter-BoldItalic.woff2') format('woff2'),
+      url('../fonts/inter/Inter-BoldItalic.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src:
+      url('../fonts/inter/Inter-ExtraBold.woff2') format('woff2'),
+      url('../fonts/inter/Inter-ExtraBold.woff') format('woff');
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 800;
+    font-display: swap;
+    src:
+      url('../fonts/inter/Inter-ExtraBoldItalic.woff2') format('woff2'),
+      url('../fonts/inter/Inter-ExtraBoldItalic.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src:
+      url('../fonts/inter/Inter-Black.woff2') format('woff2'),
+      url('../fonts/inter/Inter-Black.woff') format('woff');
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src:
+      url('../fonts/inter/Inter-BlackItalic.woff2') format('woff2'),
+      url('../fonts/inter/Inter-BlackItalic.woff') format('woff');
+  }
+
+  /*
 * A font for signatures. Imported as absolute to prevent NextJS from appending a hash to the URL and including it
 * on all pages.
 */
-@font-face {
-  font-family: 'JustMeAgainDownHere';
-  src: url('/static/fonts/JustMeAgainDownHere-Regular.ttf');
-  font-weight: normal;
-  font-style: normal;
+  @font-face {
+    font-family: 'JustMeAgainDownHere';
+    src: url('/static/fonts/JustMeAgainDownHere-Regular.ttf');
+    font-weight: normal;
+    font-style: normal;
+  }
 }
 
+/* Default theme */
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
+    --background: var(--color-white);
+    --foreground: var(--color-slate-900);
+    --card: var(--color-white);
+    --card-foreground: var(--color-slate-900);
+    --popover: var(--color-white);
+    --popover-foreground: var(--color-slate-900);
+    --primary: var(--color-blue-600);
+    --primary-foreground: var(--color-slate-50);
+    --secondary: var(--color-slate-100);
+    --secondary-foreground: var(--color-slate-900);
+    --muted: var(--color-slate-100);
+    --muted-foreground: var(--color-slate-500);
+    --accent: var(--color-slate-100);
+    --accent-foreground: var(--color-slate-900);
+    --destructive: var(--color-rose-500);
+    --destructive-foreground: var(--color-slate-50);
+    --border: var(--color-slate-200);
+    --input: var(--color-slate-200);
+    --ring: var(--color-slate-400);
     --radius: 0.75rem;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
+    --background: var(--color-zinc-950);
+    --foreground: var(--color-zinc-50);
+    --card: var(--color-zinc-950);
+    --card-foreground: var(--color-zinc-50);
+    --popover: var(--color-zinc-950);
+    --popover-foreground: var(--color-zinc-50);
+    --primary: var(--color-zinc-50);
+    --primary-foreground: var(--color-zinc-900);
+    --secondary: var(--color-zinc-800);
+    --secondary-foreground: var(--color-zinc-50);
+    --muted: var(--color-zinc-800);
+    --muted-foreground: var(--color-zinc-400);
+    --accent: var(--color-zinc-800);
+    --accent-foreground: var(--color-zinc-50);
+    --destructive: var(--color-rose-700);
+    --destructive-foreground: var(--color-zinc-50);
+    --border: var(--color-zinc-800);
+    --input: var(--color-zinc-800);
+    --ring: var(--color-zinc-300);
   }
 }
 
@@ -242,7 +369,7 @@ h4 {
   @apply mt-4 scroll-m-20 text-xl font-semibold tracking-tight;
 }
 .markdown p {
-  @apply leading-7 [&:not(:first-child)]:mt-4;
+  @apply leading-7 not-first:mt-4;
 }
 .markdown p.lead {
   @apply text-lg text-slate-600 sm:text-xl;
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index e8a5942713d..00000000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,112 +0,0 @@
-const { fontFamily } = require('tailwindcss/defaultTheme');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ['class'],
-  content: ['./pages/**/*.{js,ts,jsx,tsx,mdx,md}', './components/**/*.{js,ts,jsx,tsx,mdx,md}'],
-  theme: {
-    container: {
-      center: true,
-      padding: '1.5rem',
-      screens: {
-        '2xl': '1536px',
-      },
-    },
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        oc: {
-          'blue-tints-500': 'hsla(213, 100%, 59%, 1)',
-          'blue-tints-800': 'hsla(222, 80%, 40%, 1)',
-          'blue-tints-transparent': 'hsla(216, 100%, 58%, 0.3)',
-        },
-        dark: {
-          900: 'hsla(216, 2%, 8%, 1)',
-        },
-      },
-      borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: 'calc(var(--radius) - 6px)',
-      },
-      fontFamily: {
-        sans: ['var(--font-sans)', ...fontFamily.sans],
-        signature: ['JustMeAgainDownHere', 'cursive'],
-        emoji: [
-          'AppleColorEmoji',
-          'Segoe UI Emoji',
-          'NotoColorEmoji',
-          'Segoe UI Symbol',
-          'Android Emoji',
-          'EmojiSymbols',
-        ],
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: 0 },
-        },
-        'collapsible-down': {
-          from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)' },
-          to: { height: 0 },
-        },
-        'arrow-right': {
-          from: { transform: 'translateX(0)' },
-          to: { transform: 'translateX(25%)' },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-        'collapsible-down': 'collapsible-down 0.2s ease-out',
-        'collapsible-up': 'collapsible-up 0.2s ease-out',
-        'arrow-right': 'arrow-right 0.2s ease-out forwards',
-      },
-      transitionDuration: {
-        1500: '1500ms',
-        2000: '2000ms',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
-};