Update to tailwind v4

.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"
 }

components/AccountingCategorySelect.tsx

@@ -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 },

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}

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'}

components/Drawer.tsx

@@ -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)}
             />
           )}

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:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
         '[&>img]:max-h-full [&>img]:max-w-full',
         isDragActive && 'border-muted-foreground/50',
         props.disabled && 'pointer-events-none opacity-60',

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 left-0 top-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();

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>

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}
 `;

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,

components/SearchTrigger.tsx

@@ -22,7 +22,7 @@ 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} />

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)}

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;
 `;
 

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,

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};
     `}
 `;
 

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 whitespace-nowrap rounded-md px-2 py-1 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 whitespace-nowrap border-b-2 px-1 pb-4 pt-2 text-sm font-medium ring-inset ring-ring transition-colors focus:outline-hidden focus-visible:ring-2',
                 selected
                   ? 'border-primary text-primary'
                   : 'border-transparent text-muted-foreground hover:border-border hover:text-foreground/80',

components/agreements/AgreementsTable.tsx

@@ -89,7 +89,7 @@ const columns: ColumnDef<Agreement>[] = [
             size={32}
             borderRadius="8px"
             openFileViewer={() => meta?.onFilePreview(agreement)}
-            className="hover:shadow"
+            className="hover:shadow-sm"
           />
         </div>
       );

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} />
@@ -346,7 +346,7 @@ const ExpenseBudgetItem = ({
                   />
                 </div>
                 {isMultiCurrency && (
-                  <div className="my-1 text-sm text-muted-foreground">
+                  <div className="text-muted-foreground my-1 text-sm">
                     <AmountWithExchangeRateInfo amount={expense.amountInAccountCurrency} />
                   </div>
                 )}
@@ -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>

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;
 

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="bg-primary absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full" />}
       </TooltipTrigger>
       <TooltipContent>
         <FormattedMessage

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) {

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} />
           ) : (
@@ -528,7 +528,7 @@ export function ContributionDrawer(props: ContributionDrawerProps) {
                     <div className="text-slate-80 w-fit text-base font-bold leading-6">
                       <FormattedMessage defaultMessage="Related Activity" id="LP8cIK" />
                     </div>
-                    <hr className="flex-grow border-neutral-300" />
+                    <hr className="grow border-neutral-300" />
                     <Button
                       asChild
                       variant="outline"

components/conversations/SmallComment.tsx

@@ -44,7 +44,7 @@ export default function SmallComment(props: CommentProps) {
                 <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 bottom-[-4px] right-[-4px] flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow-sm">
                       <NotepadText className="text-amber-500" size={13} />
                     </div>
                   )}

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"

components/conversations/SmallThreadActivity.tsx

@@ -46,14 +46,14 @@ export default function SmallThreadActivity(props: SmallThreadActivityProps) {
                 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 -bottom-1 -right-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>
             )}

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))}

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>

components/crowdfunding-redesign/FundraiserLayout.tsx

@@ -57,7 +57,7 @@ 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>
                   <p className="text-lg">{fundraiser.description}</p>
@@ -107,7 +107,7 @@ export function FundraiserLayout({ children, activeTab }) {
             </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="relative mx-auto -mb-px h-16 max-w-(--breakpoint-xl) px-6">
                 <TabsList centered={false}>
                   <TabsTrigger href={baseRoute} active={activeTab === 'fundraiser'}>
                     Fundraiser