pl-fe: optimize initial js size

Signed-off-by: mkljczk <git@mkljczk.pl>

packages/pl-fe/src/components/account-hover-card.tsx

@@ -124,7 +124,7 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <Card variant='rounded' className='relative isolate overflow-hidden black:rounded-xl black:border black:border-gray-800'>
+      <Card variant='rounded' className='black:rounded-xl black:border black:border-gray-800 relative isolate overflow-hidden'>
         <CardBody>
           <Stack space={2}>
             <UserPanel

packages/pl-fe/src/components/account.tsx

@@ -55,7 +55,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
 
   return (
     <button
-      className='size-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
+      className='focus:ring-primary-500 size-4 flex-none focus:ring-2 focus:ring-offset-2'
       onClick={handleClick}
       disabled={disabled}
     >

packages/pl-fe/src/components/announcements/announcements-panel.tsx

@@ -29,7 +29,7 @@ const AnnouncementsPanel = () => {
 
   return (
     <Widget title={<FormattedMessage id='announcements.title' defaultMessage='Announcements' />}>
-      <Card className='relative black:rounded-xl black:border black:border-gray-800' size='md' variant='rounded'>
+      <Card className='black:rounded-xl black:border black:border-gray-800 relative' size='md' variant='rounded'>
         <ReactSwipeableViews animateHeight index={index} onChangeIndex={handleChangeIndex}>
           {announcements.map((announcement) => (
             <Announcement

packages/pl-fe/src/components/announcements/reaction.tsx

@@ -43,7 +43,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, emojiMap, sty
 
   return (
     <button
-      className={clsx('flex shrink-0 items-center gap-1.5 rounded-sm bg-gray-100 px-1.5 py-1 transition-colors dark:bg-primary-900', {
+      className={clsx('dark:bg-primary-900 flex shrink-0 items-center gap-1.5 rounded-sm bg-gray-100 px-1.5 py-1 transition-colors', {
         'bg-gray-200 dark:bg-primary-800': hovered,
         'bg-primary-200 dark:bg-primary-500': reaction.me,
       })}
@@ -56,7 +56,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, emojiMap, sty
       <span className='block size-4'>
         <Emoji hovered={hovered} emoji={reaction.name} emojiMap={emojiMap} />
       </span>
-      <span className='block min-w-[9px] text-center text-xs font-medium text-primary-600 dark:text-white'>
+      <span className='text-primary-600 block min-w-[9px] text-center text-xs font-medium dark:text-white'>
         <AnimatedNumber value={reaction.count} />
       </span>
     </button>

packages/pl-fe/src/components/autosuggest-input.tsx

@@ -217,7 +217,7 @@ const AutosuggestInput: React.FC<IAutosuggestInput> = ({
 
     return menu.map((item, i) => (
       <a
-        className={clsx('flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', {
+        className={clsx('dark:focus:bg-primary-800 flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800', {
           selected: suggestions.length - selectedSuggestion === i,
         })}
         href='#'

packages/pl-fe/src/components/avatar-stack.tsx

@@ -23,7 +23,7 @@ const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
           style={{ zIndex: limit - i }}
         >
           <Avatar
-            className='ring-1 ring-white dark:ring-primary-900'
+            className='dark:ring-primary-900 ring-1 ring-white'
             src={account.avatar}
             alt={account.avatar_description}
             size={20}

packages/pl-fe/src/components/big-card.tsx

@@ -13,7 +13,7 @@ interface IBigCard {
 const BigCard: React.FC<IBigCard> = ({ title, subtitle, children }) => (
   <Card variant='rounded' size='xl'>
     <CardBody>
-      <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
+      <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
         <Stack space={2}>
           <Text size='2xl' align='center' weight='bold'>{title}</Text>
           {subtitle && <Text theme='muted' align='center'>{subtitle}</Text>}

packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx

@@ -100,7 +100,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
   }
 
   return (
-    <li className='truncate focus-visible:ring-2 focus-visible:ring-primary-500'>
+    <li className='focus-visible:ring-primary-500 truncate focus-visible:ring-2'>
       <a
         href={item.href || item.to || '#'}
         role='button'
@@ -113,7 +113,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
         target={item.target}
         title={item.text}
         className={
-          clsx('mx-2 my-1 flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-800 focus:bg-gray-100 focus:text-gray-800 focus:outline-none black:hover:bg-gray-900 black:focus:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:bg-gray-800 dark:focus:text-gray-200', {
+          clsx('black:hover:bg-gray-900 black:focus:bg-gray-900 mx-2 my-1 flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-800 focus:bg-gray-100 focus:text-gray-800 focus:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:bg-gray-800 dark:focus:text-gray-200', {
             'text-danger-600 dark:text-danger-400': item.destructive,
           })
         }

packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx

@@ -311,7 +311,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
   }
 
   const getClassName = () => {
-    const className = clsx('z-[1001] bg-white py-1 shadow-lg ease-in-out focus:outline-none black:bg-black no-reduce-motion:transition-all dark:bg-gray-900 dark:ring-2 dark:ring-primary-700', {
+    const className = clsx('black:bg-black no-reduce-motion:transition-all dark:ring-primary-700 z-[1001] bg-white py-1 shadow-lg ease-in-out focus:outline-none dark:bg-gray-900 dark:ring-2', {
       'rounded-md min-w-56 max-w-sm duration-100': true,
       'no-reduce-motion:scale-0': !(isDisplayed && isOpen),
       'scale-100': isDisplayed && isOpen,
@@ -371,7 +371,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
               <div
                 ref={arrowRef}
                 style={arrowProps}
-                className='pointer-events-none absolute z-[-1] size-3 bg-white black:bg-black dark:bg-gray-900'
+                className='black:bg-black pointer-events-none absolute z-[-1] size-3 bg-white dark:bg-gray-900'
               />
             </div>
           </div>

packages/pl-fe/src/components/event-preview.tsx

@@ -54,11 +54,11 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
   ));
 
   return (
-    <div className={clsx('relative w-full overflow-hidden rounded-lg bg-gray-100 black:border black:border-gray-800 black:bg-black dark:bg-primary-800', className)}>
+    <div className={clsx('black:border black:border-gray-800 black:bg-black dark:bg-primary-800 relative w-full overflow-hidden rounded-lg bg-gray-100', className)}>
       <div className='absolute right-3 top-28'>
         {floatingAction && action}
       </div>
-      <div className='h-40 bg-primary-200 dark:bg-gray-600'>
+      <div className='bg-primary-200 h-40 dark:bg-gray-600'>
         {banner && <img className='size-full object-cover' src={banner.url} alt={intl.formatMessage(messages.eventBanner)} />}
       </div>
       <Stack className='p-2.5' space={2}>

packages/pl-fe/src/components/group-card.tsx

@@ -19,11 +19,11 @@ interface IGroupCard {
 
 const GroupCard: React.FC<IGroupCard> = ({ group }) => (
   <Stack
-    className='relative h-[240px] rounded-lg border border-solid border-gray-300 bg-white black:bg-black dark:border-primary-800 dark:bg-primary-900'
+    className='black:bg-black dark:border-primary-800 dark:bg-primary-900 relative h-[240px] rounded-lg border border-solid border-gray-300 bg-white'
     data-testid='group-card'
   >
     {/* Group Cover Image */}
-    <Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
+    <Stack grow className='bg-primary-100 relative basis-1/2 rounded-t-lg dark:bg-gray-800'>
       <GroupHeaderImage
         group={group}
         className='absolute inset-0 size-full rounded-t-lg object-cover'

packages/pl-fe/src/components/groups/popover/group-popover.tsx

@@ -51,11 +51,11 @@ const GroupPopover = (props: IGroupPopoverContainer) => {
       content={
         <Stack space={4} className='w-80 pb-4'>
           <Stack
-            className='relative h-60 rounded-lg bg-white black:bg-white dark:border-primary-800 dark:bg-primary-900'
+            className='black:bg-white dark:border-primary-800 dark:bg-primary-900 relative h-60 rounded-lg bg-white'
             data-testid='group-card'
           >
             {/* Group Cover Image */}
-            <Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
+            <Stack grow className='bg-primary-100 relative basis-1/2 rounded-t-lg dark:bg-gray-800'>
               {group.header && (
                 <img
                   className='absolute inset-0 size-full rounded-t-lg object-cover'

packages/pl-fe/src/components/hashtags-bar.tsx

@@ -36,7 +36,7 @@ const HashtagsBar: React.FC<IHashtagsBar> = ({ hashtags }) => {
           key={hashtag}
           to={`/tags/${hashtag}`}
           onClick={(e) => e.stopPropagation()}
-          className='flex items-center rounded-sm bg-gray-100 px-1.5 py-1 text-center text-xs font-medium text-primary-600 black:bg-primary-900 dark:bg-primary-700 dark:text-white'
+          className='text-primary-600 black:bg-primary-900 dark:bg-primary-700 flex items-center rounded-sm bg-gray-100 px-1.5 py-1 text-center text-xs font-medium dark:text-white'
         >
           <Text size='xs' weight='semibold' theme='inherit'>
             #<span>{hashtag}</span>

packages/pl-fe/src/components/landing-gradient.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 /** Fullscreen gradient used as a backdrop to public pages. */
 const LandingGradient: React.FC = () => (
-  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-gradient-end/10 black:hidden dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50' />
+  <div className='from-primary-50 to-gradient-end/10 black:hidden dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50 fixed h-screen w-full bg-gradient-to-tr via-white' />
 );
 
 export { LandingGradient as default };

packages/pl-fe/src/components/link.tsx

@@ -4,7 +4,7 @@ import { Link as Comp, LinkProps } from 'react-router-dom';
 const Link = (props: LinkProps) => (
   <Comp
     {...props}
-    className='text-primary-600 hover:underline dark:text-accent-blue'
+    className='text-primary-600 dark:text-accent-blue hover:underline'
   />
 );
 

packages/pl-fe/src/components/list.tsx

@@ -56,7 +56,7 @@ const ListItem: React.FC<IListItem> = ({ className, label, hint, children, to, h
     return null;
   }), [children, domId]);
 
-  const classNames = clsx('flex items-center justify-between overflow-hidden bg-gradient-to-r from-gradient-start/20 to-gradient-end/20 first:rounded-t-lg last:rounded-b-lg dark:from-gradient-start/10 dark:to-gradient-end/10',
+  const classNames = clsx('from-gradient-start/20 to-gradient-end/20 dark:from-gradient-start/10 dark:to-gradient-end/10 flex items-center justify-between overflow-hidden bg-gradient-to-r first:rounded-t-lg last:rounded-b-lg',
     className,
     {
       'px-4 py-2': size === 'md',

packages/pl-fe/src/components/mention.tsx

@@ -23,7 +23,7 @@ const Mention: React.FC<IMention> = ({ mention: { acct, username }, disabled })
     <Tooltip text={`@${acct}`}>
       <Link
         to={`/@${acct}`}
-        className='text-primary-600 hover:underline dark:text-accent-blue'
+        className='text-primary-600 dark:text-accent-blue hover:underline'
         onClick={handleClick}
         dir='ltr'
       >

packages/pl-fe/src/components/modal-root.tsx

@@ -205,7 +205,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
       <div
         role='presentation'
         id='modal-overlay'
-        className={clsx('fixed inset-0 bg-gray-500/90 black:bg-gray-900/90 dark:bg-gray-700/90', {
+        className={clsx('black:bg-gray-900/90 fixed inset-0 bg-gray-500/90 dark:bg-gray-700/90', {
           'opacity-60': type === 'DROPDOWN_MENU',
         })}
         onClick={handleOnClose}

packages/pl-fe/src/components/navlinks.tsx

@@ -24,7 +24,7 @@ const Navlinks: React.FC<INavlinks> = ({ type }) => {
 
           return (
             <div key={idx} className='px-5 py-2'>
-              <Comp {...compProps} className='text-primary-600 hover:underline dark:text-primary-400'>
+              <Comp {...compProps} className='text-primary-600 dark:text-primary-400 hover:underline'>
                 <Text tag='span' theme='inherit' size='sm'>
                   {link.titleLocales[locale] || link.title}
                 </Text>

packages/pl-fe/src/components/parsed-content.tsx

@@ -122,7 +122,7 @@ function parseContent({ html, mentions, hasQuote, emojis }: IParsedContent, extr
                 <HoverAccountWrapper accountId={mention.id} element='span'>
                   <Link
                     to={`/@${mention.acct}`}
-                    className='text-primary-600 hover:underline dark:text-accent-blue'
+                    className='text-primary-600 dark:text-accent-blue hover:underline'
                     dir='ltr'
                     onClick={(e) => e.stopPropagation()}
                   >

packages/pl-fe/src/components/pending-items-row.tsx

@@ -20,7 +20,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
   <Link to={to} className='group' data-testid='pending-items-row'>
     <HStack alignItems='center' justifyContent='between'>
       <HStack alignItems='center' space={2}>
-        <div className={clsx('rounded-full bg-primary-200 text-primary-500 dark:bg-primary-800 dark:text-primary-200', {
+        <div className={clsx('bg-primary-200 text-primary-500 dark:bg-primary-800 dark:text-primary-200 rounded-full', {
           'p-3': size === 'lg',
           'p-2.5': size === 'md',
         })}

packages/pl-fe/src/components/polls/poll-option.tsx

@@ -20,7 +20,7 @@ const PollPercentageBar: React.FC<{ percent: number; leading: boolean }> = ({ pe
   <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { ...presets.gentle, precision: 0.1 }) }}>
     {({ width }) => (
       <span
-        className='absolute inset-0 inline-block h-full rounded-l-md bg-primary-100 dark:bg-primary-500'
+        className='bg-primary-100 dark:bg-primary-500 absolute inset-0 inline-block h-full rounded-l-md'
         style={{ width: `${width}%` }}
       />
     )}
@@ -45,7 +45,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
   return (
     <label
       className={
-        clsx('relative flex cursor-pointer rounded-3xl border border-solid bg-white p-2 hover:bg-primary-50 dark:bg-primary-900 dark:hover:bg-primary-800/50', {
+        clsx('hover:bg-primary-50 dark:bg-primary-900 dark:hover:bg-primary-800/50 relative flex cursor-pointer rounded-3xl border border-solid bg-white p-2', {
           'border-primary-600 ring-1 ring-primary-600 bg-primary-50 dark:bg-primary-800/50 dark:border-primary-300 dark:ring-primary-300': active,
           'border-primary-300 dark:border-primary-500': !active,
         })
@@ -86,7 +86,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
             aria-label={option.title}
           >
             {active && (
-              <Icon src={require('@tabler/icons/outline/check.svg')} className='size-4 text-white dark:text-primary-900' />
+              <Icon src={require('@tabler/icons/outline/check.svg')} className='dark:text-primary-900 size-4 text-white' />
             )}
           </span>
         </div>
@@ -128,7 +128,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
           <HStack
             justifyContent='between'
             alignItems='center'
-            className='relative w-full overflow-hidden rounded-md bg-white p-2 dark:bg-primary-800'
+            className='dark:bg-primary-800 relative w-full overflow-hidden rounded-md bg-white p-2'
           >
             <PollPercentageBar percent={percent} leading={leading} />
 
@@ -147,7 +147,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
                 <Icon
                   src={require('@tabler/icons/outline/circle-check.svg')}
                   alt={intl.formatMessage(messages.voted)}
-                  className='size-4 text-primary-600 dark:fill-white dark:text-primary-800'
+                  className='text-primary-600 dark:text-primary-800 size-4 dark:fill-white'
                 />
               ) : (
                 <div className='svg-icon' />

packages/pl-fe/src/components/radio.tsx

@@ -30,7 +30,7 @@ const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChang
       checked={checked}
       onChange={onChange}
       value={value}
-      className='size-4 border-gray-300 text-primary-600 focus:ring-primary-500'
+      className='text-primary-600 focus:ring-primary-500 size-4 border-gray-300'
     />
   </ListItem>
 );

packages/pl-fe/src/components/scroll-top-button.tsx

@@ -85,7 +85,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
   return (
     <div className='fixed left-1/2 top-2 z-50 -translate-x-1/2'>
       <button
-        className='flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full bg-primary-600 px-4 py-2 text-white transition-transform hover:scale-105 hover:bg-primary-700 active:scale-100'
+        className='bg-primary-600 hover:bg-primary-700 flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full px-4 py-2 text-white transition-transform hover:scale-105 active:scale-100'
         onClick={handleClick}
       >
         <Icon

packages/pl-fe/src/components/sidebar-menu.tsx

@@ -62,8 +62,8 @@ interface ISidebarLink {
 const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {
   const body = (
     <HStack space={2} alignItems='center'>
-      <div className='relative inline-flex rounded-full bg-primary-50 p-2 dark:bg-gray-800'>
+      <div className='bg-primary-50 relative inline-flex rounded-full p-2 dark:bg-gray-800'>
-        <Icon src={icon} className='size-5 text-primary-500' />
+        <Icon src={icon} className='text-primary-500 size-5' />
       </div>
 
       <Text tag='span' weight='medium' theme='inherit'>{text}</Text>
@@ -187,7 +187,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
       onTouchEnd={handleTouchEnd}
     >
       <div
-        className={clsx('fixed inset-0 cursor-default bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700', {
+        className={clsx('black:bg-gray-900 no-reduce-motion:transition-opacity fixed inset-0 cursor-default bg-gray-500 dark:bg-gray-700', {
           'no-reduce-motion:opacity-0': !(sidebarVisible && isSidebarOpen),
           'opacity-40': (sidebarVisible && isSidebarOpen),
         })}
@@ -197,7 +197,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
       <div
         className={
-          clsx('fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white shadow-lg ease-in-out black:bg-black no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900 dark:shadow-none rtl:right-2 rtl:origin-bottom-right', {
+          clsx('black:bg-black no-reduce-motion:transition-transform dark:bg-primary-900 fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white shadow-lg ease-in-out rtl:right-2 rtl:origin-bottom-right dark:border dark:border-gray-800 dark:shadow-none', {
             'scale-100': sidebarVisible && isSidebarOpen,
             'no-reduce-motion:scale-0': !(sidebarVisible && isSidebarOpen),
           })
@@ -419,11 +419,11 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                     </button>
 
                     {switcher && (
-                      <div className='border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800'>
+                      <div className='black:border-t border-t-2 border-solid border-gray-100 dark:border-gray-800'>
                         {otherAccounts.map(account => renderAccount(account))}
 
                         <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
-                          <Icon className='size-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
+                          <Icon className='text-primary-500 size-4' src={require('@tabler/icons/outline/plus.svg')} />
                           <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
                         </NavLink>
                       </div>

packages/pl-fe/src/components/site-error-boundary.tsx

@@ -79,7 +79,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
   };
 
   const fallback = (
-    <div className='flex h-screen flex-col bg-white pb-12 pt-16 black:bg-black dark:bg-primary-900'>
+    <div className='black:bg-black dark:bg-primary-900 flex h-screen flex-col bg-white pb-12 pt-16'>
       <main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'>
         {logoSrc && (
           <div className='flex shrink-0 justify-center'>
@@ -91,7 +91,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
 
         <div className='py-8'>
           <div className='mx-auto max-w-xl space-y-2 text-center'>
-            <h1 className='text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-500 sm:text-4xl'>
+            <h1 className='text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-500'>
               <FormattedMessage id='alert.unexpected.message' defaultMessage='Something went wrong.' />
             </h1>
             <p className='text-lg text-gray-700 dark:text-gray-600'>
@@ -100,7 +100,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
                 defaultMessage="We're sorry for the interruption. If the problem persists, please reach out to our support team. You may also try to {clearCookies} (this will log you out)."
                 values={{
                   clearCookies: (
-                    <a href='/' onClick={clearCookies} className='text-primary-600 hover:underline dark:text-accent-blue'>
+                    <a href='/' onClick={clearCookies} className='text-primary-600 dark:text-accent-blue hover:underline'>
                       <FormattedMessage
                         id='alert.unexpected.clear_cookies'
                         defaultMessage='clear cookies and browser data'
@@ -118,7 +118,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
             </Text>
 
             <div className='mt-10'>
-              <a href='/' className='text-base font-medium text-primary-600 hover:underline dark:text-accent-blue'>
+              <a href='/' className='text-primary-600 dark:text-accent-blue text-base font-medium hover:underline'>
                 <FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
                 {' '}
                 <span className='inline-block rtl:rotate-180' aria-hidden='true'>&rarr;</span>

packages/pl-fe/src/components/status-action-button.tsx

@@ -100,7 +100,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
       type='button'
       className={clsx(
         '-m-1 flex items-center rounded-full p-2 rtl:space-x-reverse',
-        'transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0',
+        'focus:ring-primary-500 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0',
         {
           'text-gray-600 hover:text-gray-800 dark:hover:text-white bg-transparent hover:bg-primary-100 dark:hover:bg-primary-800 black:hover:bg-gray-800': theme === 'default',
           'text-white/80 hover:text-white bg-transparent dark:bg-transparent': theme === 'inverse',

packages/pl-fe/src/components/status-hover-card.tsx

@@ -107,7 +107,7 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <Card className='relative overflow-hidden black:rounded-xl black:border black:border-gray-800'>
+      <Card className='black:rounded-xl black:border black:border-gray-800 relative overflow-hidden'>
         <CardBody>
           {renderStatus(statusId)}
         </CardBody>

packages/pl-fe/src/components/status-mention.tsx

@@ -23,7 +23,7 @@ const StatusMention: React.FC<IStatusMention> = ({ accountId, fallback }) => {
     <HoverAccountWrapper accountId={accountId} element='span'>
       <Link
         to={`/@${account.acct}`}
-        className='text-primary-600 hover:underline dark:text-accent-blue'
+        className='text-primary-600 dark:text-accent-blue hover:underline'
         dir='ltr'
         onClick={(e) => e.stopPropagation()}
       >

packages/pl-fe/src/components/status-reactions-bar.tsx

@@ -134,7 +134,7 @@ const StatusReactionsBar: React.FC<IStatusReactionsBar> = ({ status, collapsed }
       {me && (
         <EmojiPickerDropdown onPickEmoji={handlePickEmoji}>
           <button
-            className='emoji-picker-dropdown cursor-pointer rounded-md border border-gray-400 bg-transparent p-1.5 transition-colors hover:bg-gray-50 black:border-primary-800 black:bg-primary-800 hover:black:bg-primary-700 dark:border-primary-700 dark:bg-primary-700 hover:dark:border-primary-600 hover:dark:bg-primary-600'
+            className='emoji-picker-dropdown black:border-primary-800 black:bg-primary-800 hover:black:bg-primary-700 dark:border-primary-700 dark:bg-primary-700 hover:dark:border-primary-600 hover:dark:bg-primary-600 cursor-pointer rounded-md border border-gray-400 bg-transparent p-1.5 transition-colors hover:bg-gray-50'
             title={intl.formatMessage(messages.addEmoji)}
           >
             <Icon

packages/pl-fe/src/components/status-reply-mentions.tsx

@@ -47,7 +47,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
       <Link
         key={account.id}
         to={`/@${account.acct}`}
-        className='inline-block max-w-[200px] truncate align-bottom text-primary-600 no-underline [direction:ltr] hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'
+        className='text-primary-600 hover:text-primary-700 dark:text-accent-blue dark:hover:text-accent-blue inline-block max-w-[200px] truncate align-bottom no-underline [direction:ltr] hover:underline'
         onClick={(e) => e.stopPropagation()}
       >
         @{account.username}

packages/pl-fe/src/components/status.tsx

@@ -273,7 +273,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='size-4 text-primary-600 dark:text-accent-blue' />}
+          icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='text-primary-600 dark:text-accent-blue size-4' />}
           text={
             <FormattedMessage
               id='status.group'
@@ -314,7 +314,7 @@ const Status: React.FC<IStatus> = (props) => {
           <Text theme='muted'>
             <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {status.filtered.join(', ')}.
             {' '}
-            <button className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleUnfilter}>
+            <button className='text-primary-600 dark:text-accent-blue hover:underline' onClick={handleUnfilter}>
               <FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
             </button>
           </Text>

packages/pl-fe/src/components/statuses/status-info.tsx

@@ -26,7 +26,7 @@ const StatusInfo = (props: IStatusInfo) => {
       <HStack
         space={3}
         alignItems='center'
-        className='cursor-default text-xs font-medium text-gray-700 dark:text-gray-600 rtl:space-x-reverse'
+        className='cursor-default text-xs font-medium text-gray-700 rtl:space-x-reverse dark:text-gray-600'
       >
         <div
           className='flex justify-end'

packages/pl-fe/src/components/thumb-navigation.tsx

@@ -58,13 +58,13 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     >
       <Icon
         src={require('@tabler/icons/outline/square-rounded-plus.svg')}
-        className='size-6 text-gray-600 black:text-white'
+        className='black:text-white size-6 text-gray-600'
       />
     </button>
   );
 
   return (
-    <div className='fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/80 dark:border-gray-800 dark:bg-primary-900/90 lg:hidden'>
+    <div className='black:bg-black/80 dark:bg-primary-900/90 fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md lg:hidden dark:border-gray-800'>
       <button
         className='flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600'
         onClick={openSidebar}
@@ -72,7 +72,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
       >
         <Icon
           src={require('@tabler/icons/outline/menu-2.svg')}
-          className='size-5 text-gray-600 black:text-white'
+          className='black:text-white size-5 text-gray-600'
         />
       </button>
 

packages/pl-fe/src/components/trending-link.tsx

@@ -37,7 +37,7 @@ const TrendingLink: React.FC<ITrendingLink> = ({ trendingLink }) => {
 
   return (
     <a
-      className='flex cursor-pointer gap-4 overflow-hidden rounded-lg border border-solid border-gray-200 p-4 text-sm text-gray-800 no-underline hover:bg-gray-100 hover:no-underline dark:border-gray-800 dark:text-gray-200 dark:hover:bg-primary-800/30'
+      className='dark:hover:bg-primary-800/30 flex cursor-pointer gap-4 overflow-hidden rounded-lg border border-solid border-gray-200 p-4 text-sm text-gray-800 no-underline hover:bg-gray-100 hover:no-underline dark:border-gray-800 dark:text-gray-200'
       href={trendingLink.url}
       target='_blank'
       rel='noopener'

packages/pl-fe/src/components/ui/accordion.tsx

@@ -46,7 +46,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
   };
 
   return (
-    <div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
+    <div className='dark:bg-primary-800 rounded-lg bg-white text-gray-900 shadow dark:text-gray-100 dark:shadow-none'>
       <button
         type='button'
         onClick={handleToggle}

packages/pl-fe/src/components/ui/card.tsx

@@ -71,7 +71,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
     const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
 
     return (
-      <Comp {...backAttributes} className='rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
+      <Comp {...backAttributes} className='focus:ring-primary-500 rounded-full text-gray-900 focus:ring-2 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
         <SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} className='size-6 rtl:rotate-180' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>

packages/pl-fe/src/components/ui/checkbox.tsx

@@ -8,7 +8,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => (
     {...props}
     ref={ref}
     type='checkbox'
-    className='size-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900'
+    className='text-primary-600 focus:ring-primary-500 black:bg-black size-4 rounded border-2 border-gray-300 dark:border-gray-800 dark:bg-gray-900'
   />
 ));
 

packages/pl-fe/src/components/ui/counter.tsx

@@ -11,7 +11,7 @@ interface ICounter {
 
 /** A simple counter for notifications, etc. */
 const Counter: React.FC<ICounter> = ({ count, countMax }) => (
-  <span className='flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white black:ring-black dark:ring-gray-800'>
+  <span className='bg-secondary-500 black:ring-black flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full text-xs font-medium text-white ring-2 ring-white dark:ring-gray-800'>
     <AnimatedNumber value={count} max={countMax} />
   </span>
 );

packages/pl-fe/src/components/ui/divider.tsx

@@ -13,12 +13,12 @@ interface IDivider {
 const Divider = ({ text, textSize = 'md' }: IDivider) => (
   <div className='relative' data-testid='divider'>
     <div className='absolute inset-0 flex items-center' aria-hidden='true'>
-      <div className='w-full border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800' />
+      <div className='black:border-t w-full border-t-2 border-solid border-gray-100 dark:border-gray-800' />
     </div>
 
     {text && (
       <div className='relative flex justify-center'>
-        <span className='bg-white px-2 text-gray-700 black:bg-black dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
+        <span className='black:bg-black bg-white px-2 text-gray-700 dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
           <Text size={textSize} tag='span' theme='inherit'>{text}</Text>
         </span>
       </div>

packages/pl-fe/src/components/ui/form-group.tsx

@@ -57,7 +57,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
             <div>
               <p
                 data-testid='form-group-error'
-                className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
+                className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
               >
                 {errors.join(', ')}
               </p>
@@ -100,7 +100,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
         {hasError && (
           <p
             data-testid='form-group-error'
-            className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
+            className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
           >
             {errors.join(', ')}
           </p>

packages/pl-fe/src/components/ui/icon-button.tsx

@@ -29,7 +29,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
     <Component
       ref={ref}
       type='button'
-      className={clsx('flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0', {
+      className={clsx('focus:ring-primary-500 flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0', {
         'bg-white dark:bg-transparent': theme === 'seamless',
         'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': theme === 'outlined',
         'border-transparent bg-primary-100 dark:bg-primary-800 hover:bg-primary-50 dark:hover:bg-primary-700 focus:bg-primary-100 dark:focus:bg-primary-800 text-primary-500 dark:text-primary-200': theme === 'secondary',

packages/pl-fe/src/components/ui/inline-multiselect.tsx

@@ -10,13 +10,13 @@ interface IInlineMultiselect<T extends string> {
 
 /** Allows to select many of available options. */
 const InlineMultiselect = <T extends string>({ items, value, onChange, disabled }: IInlineMultiselect<T>) => (
-  <div className='flex w-fit overflow-auto rounded-md border border-gray-400 bg-white black:bg-black dark:border-gray-800 dark:bg-gray-900'>
+  <div className='black:bg-black flex w-fit overflow-auto rounded-md border border-gray-400 bg-white dark:border-gray-800 dark:bg-gray-900'>
     {Object.entries(items).map(([key, label], i) => {
       const checked = value?.includes(key as T);
 
       return (
         <label
-          className={clsx('whitespace-nowrap px-3 py-2 text-white transition-colors hover:bg-primary-700 [&:has(:focus-visible)]:bg-primary-700', {
+          className={clsx('hover:bg-primary-700 [&:has(:focus-visible)]:bg-primary-700 whitespace-nowrap px-3 py-2 text-white transition-colors', {
             'cursor-pointer': !disabled,
             'opacity-75': disabled,
             'bg-gray-500': !checked,

packages/pl-fe/src/components/ui/input.tsx

@@ -87,7 +87,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
           {...filteredProps}
           type={revealed ? 'text' : type}
           ref={ref}
-          className={clsx('block w-full text-base placeholder:text-gray-600 focus:border-primary-500 dark:placeholder:text-gray-600 dark:focus:border-primary-500 sm:text-sm', {
+          className={clsx('focus:border-primary-500 dark:focus:border-primary-500 block w-full text-base placeholder:text-gray-600 sm:text-sm dark:placeholder:text-gray-600', {
             'ring-1 focus:ring-primary-500 dark:ring-gray-800 dark:focus:ring-primary-500': ['search', 'normal'].includes(theme),
             'px-0 border-none !ring-0': theme === 'transparent',
             'text-gray-900 dark:text-gray-100': !props.disabled,
@@ -120,7 +120,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 type='button'
                 onClick={togglePassword}
                 tabIndex={-1}
-                className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
+                className='focus:ring-primary-500 h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 dark:text-gray-600 dark:hover:text-gray-400'
               >
                 <SvgIcon
                   src={revealed ? require('@tabler/icons/outline/eye-off.svg') : require('@tabler/icons/outline/eye.svg')}

packages/pl-fe/src/components/ui/layout.tsx

@@ -23,7 +23,7 @@ interface LayoutComponent extends React.FC<ILayout> {
 
 /** Layout container, to hold Sidebar, Main, and Aside. */
 const Layout: LayoutComponent = ({ children }) => (
-  <div className='relative flex grow flex-col black:pt-0 sm:pt-4'>
+  <div className='black:pt-0 relative flex grow flex-col sm:pt-4'>
     <div className='mx-auto w-full max-w-3xl grow sm:px-6 md:grid md:max-w-7xl md:grid-cols-12 md:gap-8 md:px-8 xl:max-w-[1440px]'>
       {children}
     </div>

packages/pl-fe/src/components/ui/modal.tsx

@@ -100,13 +100,13 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
     <div
       ref={ref}
       data-testid='modal'
-      className={clsx(className, 'pointer-events-auto relative mx-auto flex max-h-[90vh] w-full flex-col overflow-auto rounded-2xl bg-white text-start align-middle text-gray-900 shadow-xl transition-all ease-in-out black:bg-black dark:bg-primary-900 dark:text-gray-100 md:max-h-[80vh]', widths[width], {
+      className={clsx(className, 'black:bg-black dark:bg-primary-900 pointer-events-auto relative mx-auto flex max-h-[90vh] w-full flex-col overflow-auto rounded-2xl bg-white text-start align-middle text-gray-900 shadow-xl transition-all ease-in-out md:max-h-[80vh] dark:text-gray-100', widths[width], {
         'bottom-0': !firstRender,
         'no-reduce-motion:-bottom-32': firstRender,
       })}
     >
       {title && (
-        <div className='sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur black:bg-black/80 dark:bg-primary-900/75'>
+        <div className='black:bg-black/80 dark:bg-primary-900/75 sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur'>
           <div
             className={clsx('flex w-full items-center gap-2', {
               'flex-row-reverse': closePosition === 'left',
@@ -117,7 +117,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
                 src={require('@tabler/icons/outline/arrow-left.svg')}
                 title={intl.formatMessage(messages.back)}
                 onClick={onBack}
-                className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
+                className='text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'
               />
             )}
 
@@ -130,7 +130,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
                 src={closeIcon}
                 title={intl.formatMessage(messages.close)}
                 onClick={onClose}
-                className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
+                className='text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'
               />
             )}
           </div>

packages/pl-fe/src/components/ui/popover.tsx

@@ -107,7 +107,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
             <div
               className={
                 clsx(
-                  'overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700',
+                  'dark:ring-primary-700 overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2',
                   { 'p-6': !isFlush },
                 )
               }
@@ -119,7 +119,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
             <FloatingArrow
               ref={arrowRef}
               context={context}
-              className='fill-white dark:fill-primary-700'
+              className='dark:fill-primary-700 fill-white'
               tipRadius={3}
             />
           </div>

packages/pl-fe/src/components/ui/progress-bar.tsx

@@ -14,7 +14,7 @@ interface IProgressBar {
 /** A horizontal meter filled to the given percentage. */
 const ProgressBar: React.FC<IProgressBar> = ({ progress, size = 'md' }) => (
   <div
-    className={clsx('h-2.5 w-full overflow-hidden rounded-lg bg-gray-300 dark:bg-primary-800', {
+    className={clsx('dark:bg-primary-800 h-2.5 w-full overflow-hidden rounded-lg bg-gray-300', {
       'h-2.5': size === 'md',
       'h-[6px]': size === 'sm',
     })}
@@ -22,7 +22,7 @@ const ProgressBar: React.FC<IProgressBar> = ({ progress, size = 'md' }) => (
     <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress * 100) }}>
       {({ width }) => (
         <div
-          className='h-full bg-secondary-500'
+          className='bg-secondary-500 h-full'
           style={{ width: `${width}%` }}
         />
       )}

packages/pl-fe/src/components/ui/select.tsx

@@ -14,7 +14,7 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
     <select
       ref={ref}
       className={clsx(
-        'truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm',
+        'focus:border-primary-500 focus:ring-primary-500 black:bg-black dark:focus:border-primary-500 dark:focus:ring-primary-500 truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none disabled:opacity-50 sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800',
         className,
         {
           'w-full': full,

packages/pl-fe/src/components/ui/slider.tsx

@@ -57,10 +57,10 @@ const Slider: React.FC<ISlider> = ({ value, onChange }) => {
       onMouseDown={handleMouseDown}
       ref={node}
     >
-      <div className='absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700' />
+      <div className='bg-primary-200 dark:bg-primary-700 absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full' />
-      <div className='absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500' style={{ width: `${value * 100}%` }} />
+      <div className='bg-accent-500 absolute top-1/2 h-1 -translate-y-1/2 rounded-full' style={{ width: `${value * 100}%` }} />
       <span
-        className='absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow'
+        className='bg-accent-500 absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full shadow'
         tabIndex={0}
         style={{ left: `${value * 100}%` }}
       />

packages/pl-fe/src/components/ui/tabs.tsx

@@ -46,11 +46,11 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
         ref={ref}
       >
         <div
-          className='absolute h-[3px] w-full bg-primary-200 dark:bg-gray-800'
+          className='bg-primary-200 absolute h-[3px] w-full dark:bg-gray-800'
           style={{ top }}
         />
         <div
-          className={clsx('absolute h-[3px] bg-primary-500 transition-all duration-200', {
+          className={clsx('bg-primary-500 absolute h-[3px] transition-all duration-200', {
             'hidden': top <= 0,
           })}
           style={{ left, top, width }}

packages/pl-fe/src/components/ui/tag-input.tsx

@@ -44,7 +44,7 @@ const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
   return (
     <div className='relative mt-1 grow shadow-sm'>
       <HStack
-        className='block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm'
+        className='focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600'
         space={2}
         wrap
       >

packages/pl-fe/src/components/ui/tag.tsx

@@ -12,7 +12,7 @@ interface ITag {
 
 /** A single editable Tag (used by TagInput). */
 const Tag: React.FC<ITag> = ({ tag, onDelete }) => (
-  <div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
+  <div className='bg-primary-500 inline-flex items-center whitespace-nowrap rounded p-1'>
     <Text theme='white'>{tag}</Text>
 
     <IconButton

packages/pl-fe/src/components/ui/textarea.tsx

@@ -91,7 +91,7 @@ const Textarea = React.forwardRef(({
         ref={ref}
         rows={rows}
         onChange={handleChange}
-        className={clsx('block w-full rounded-md text-gray-900 placeholder:text-gray-600 dark:text-gray-100 dark:placeholder:text-gray-600 sm:text-sm', {
+        className={clsx('block w-full rounded-md text-gray-900 placeholder:text-gray-600 sm:text-sm dark:text-gray-100 dark:placeholder:text-gray-600', {
           'bg-white dark:bg-transparent shadow-sm border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
             theme === 'default',
           'bg-transparent border-0 focus:border-0 focus:ring-0': theme === 'transparent',

packages/pl-fe/src/components/ui/toast.tsx

@@ -43,7 +43,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/outline/circle-check.svg')}
-            className='size-6 text-success-500 dark:text-success-400'
+            className='text-success-500 dark:text-success-400 size-6'
             aria-hidden
           />
         );
@@ -51,7 +51,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/outline/info-circle.svg')}
-            className='size-6 text-primary-600 dark:text-accent-blue'
+            className='text-primary-600 dark:text-accent-blue size-6'
             aria-hidden
           />
         );
@@ -59,7 +59,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/outline/alert-circle.svg')}
-            className='size-6 text-danger-600'
+            className='text-danger-600 size-6'
             aria-hidden
           />
         );
@@ -138,7 +138,7 @@ const Toast = (props: IToast) => {
           <div className='flex shrink-0 pt-0.5'>
             <button
               type='button'
-              className='inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
+              className='focus:ring-primary-500 inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
               onClick={dismissToast}
               data-testid='toast-dismiss'
             >

packages/pl-fe/src/components/ui/toggle.tsx

@@ -16,7 +16,7 @@ const Toggle: React.FC<IToggle> = ({ id, size = 'md', name, checked = false, onC
 
   return (
     <button
-      className={clsx('flex-none rounded-full focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500', {
+      className={clsx('focus:ring-primary-500 dark:focus:ring-primary-500 flex-none rounded-full focus:ring-2 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0', {
         'bg-gray-500': !checked && !disabled,
         'bg-primary-600': checked && !disabled,
         'bg-gray-200': !checked && disabled,

packages/pl-fe/src/components/ui/widget.tsx

@@ -52,7 +52,7 @@ const Widget: React.FC<IWidget> = ({
         {title && <WidgetTitle title={title} />}
         {action || (onActionClick && (
           <IconButton
-            className='ml-2 size-6 text-black dark:text-white rtl:rotate-180'
+            className='ml-2 size-6 text-black rtl:rotate-180 dark:text-white'
             src={actionIcon}
             onClick={onActionClick}
             title={actionTitle}

packages/pl-fe/src/components/verification-badge.tsx

@@ -24,8 +24,8 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
   const Element = icon.endsWith('.svg') ? Icon : 'img';
 
   return (
-    <span className='rounded-full bg-accent-500' data-testid='verified-badge'>
+    <span className='bg-accent-500 rounded-full' data-testid='verified-badge'>
-      <Element className={clsx('size-[16px] rounded-full bg-accent-500 stroke-[4] p-px text-white', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
+      <Element className={clsx('bg-accent-500 size-[16px] rounded-full stroke-[4] p-px text-white', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
     </span>
   );
 };

packages/pl-fe/src/features/about/index.tsx

@@ -56,7 +56,7 @@ const AboutPage: React.FC = () => {
   return (
     <div>
       <Card variant='rounded'>
-        <div className='prose mx-auto py-4 dark:prose-invert sm:p-6'>
+        <div className='prose dark:prose-invert mx-auto py-4 sm:p-6'>
           {pageHtml && <div dangerouslySetInnerHTML={{ __html: pageHtml }} />}
           {alsoAvailable}
         </div>

packages/pl-fe/src/features/account-timeline/components/moved-note.tsx

@@ -19,7 +19,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
     <HStack className='mb-2' alignItems='center' space={1.5}>
       <Icon
         src={require('@tabler/icons/outline/briefcase.svg')}
-        className='flex-none text-primary-600 dark:text-primary-400'
+        className='text-primary-600 dark:text-primary-400 flex-none'
       />
 
       <div className='truncate'>

packages/pl-fe/src/features/account/components/header.tsx

@@ -118,7 +118,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
     return (
       <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
         <div>
-          <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
+          <div className='black:rounded-t-none relative h-32 w-full bg-gray-200 md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
         </div>
 
         <div className='px-4 sm:px-6'>
@@ -634,7 +634,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       )}
 
       <div>
-        <div className='relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48'>
+        <div className='black:rounded-t-none relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 md:rounded-t-xl lg:h-48 dark:bg-gray-900/50'>
           {renderHeader()}
 
           <div className='absolute left-2 top-2'>
@@ -653,12 +653,12 @@ const Header: React.FC<IHeader> = ({ account }) => {
                 src={account.avatar}
                 alt={account.avatar_description}
                 size={96}
-                className='relative size-24 rounded-lg bg-white ring-4 ring-white black:ring-black dark:bg-primary-900 dark:ring-primary-900'
+                className='black:ring-black dark:bg-primary-900 dark:ring-primary-900 relative size-24 rounded-lg bg-white ring-4 ring-white'
               />
             </a>
             {account.verified && (
               <div className='absolute -bottom-2 -right-2'>
-                <VerificationBadge className='!size-[24px] rounded-full !p-[2px] ring-2 ring-white black:ring-black dark:ring-primary-900' />
+                <VerificationBadge className='black:ring-black dark:ring-primary-900 !size-[24px] rounded-full !p-[2px] ring-2 ring-white' />
               </div>
             )}
           </div>

packages/pl-fe/src/features/admin/announcements.tsx

@@ -47,7 +47,7 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement }) => {
   };
 
   return (
-    <div key={announcement.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+    <div key={announcement.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
       <Stack space={2}>
         <Text>
           <ParsedContent html={announcement.content} emojis={announcement.emojis} />

packages/pl-fe/src/features/admin/components/report.tsx

@@ -140,7 +140,7 @@ const Report: React.FC<IReport> = ({ id }) => {
                 <Link
                   to={`/@${reporterAcct}`}
                   title={reporterAcct}
-                  className='text-primary-600 hover:underline dark:text-accent-blue'
+                  className='text-primary-600 dark:text-accent-blue hover:underline'
                 >
                   @{reporterAcct}
                 </Link>

packages/pl-fe/src/features/admin/domains.tsx

@@ -65,7 +65,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
   }) : undefined;
 
   return (
-    <div key={domain.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+    <div key={domain.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
       <Stack space={2}>
         <HStack alignItems='center' space={4} wrap>
           <Text size='sm'>

packages/pl-fe/src/features/admin/relays.tsx

@@ -39,7 +39,7 @@ const Relay: React.FC<IRelay> = ({ relay }) => {
   };
 
   return (
-    <div key={relay.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+    <div key={relay.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
       <Stack space={2}>
         <HStack alignItems='center' space={4} wrap>
           <Text size='sm'>

packages/pl-fe/src/features/admin/rules.tsx

@@ -46,7 +46,7 @@ const Rule: React.FC<IRule> = ({ rule }) => {
   };
 
   return (
-    <div key={rule.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+    <div key={rule.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
       <Stack space={2}>
         <Text>{rule.text}</Text>
         <Text tag='span' theme='muted' size='sm'>{rule.hint}</Text>

packages/pl-fe/src/features/aliases/components/search.tsx

@@ -45,7 +45,7 @@ const Search: React.FC = () => {
         <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
 
         <input
-          className='block w-full rounded-full focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 sm:text-sm'
+          className='focus:border-primary-500 focus:ring-primary-500 block w-full rounded-full sm:text-sm dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500'
           type='text'
           value={value}
           onChange={handleChange}

packages/pl-fe/src/features/audio/index.tsx

@@ -466,7 +466,7 @@ const Audio: React.FC<IAudio> = (props) => {
         <img
           src={poster}
           alt=''
-          className='pointer-events-none absolute aspect-1 -translate-x-1/2 -translate-y-1/2 rounded-full object-cover'
+          className='aspect-1 pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full object-cover'
           width={(_getRadius() - TICK_SIZE) * 2}
           height={(_getRadius() - TICK_SIZE) * 2}
           style={{
@@ -481,7 +481,7 @@ const Audio: React.FC<IAudio> = (props) => {
         <div className='absolute top-0 block h-1 rounded bg-white/20' style={{ width: `${buffer}%` }} />
 
         <div
-          className='absolute top-0 block h-1 rounded bg-accent-500'
+          className='bg-accent-500 absolute top-0 block h-1 rounded'
           style={{ width: `${progress}%`, backgroundColor: accentColor }}
         />
 

packages/pl-fe/src/features/auth-login/components/consumers-list.tsx

@@ -19,7 +19,7 @@ const ConsumersList: React.FC<IConsumersList> = () => {
 
   if (providers.length > 0) {
     return (
-      <Card className='bg-gray-50 p-2 black:bg-black black:p-0 dark:bg-primary-800 sm:rounded-xl'>
+      <Card className='black:bg-black black:p-0 dark:bg-primary-800 bg-gray-50 p-2 sm:rounded-xl'>
         <Stack space={2}>
           <Text size='xs' theme='muted'>
             <FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />

packages/pl-fe/src/features/auth-token-list/index.tsx

@@ -50,7 +50,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
   };
 
   return (
-    <div className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+    <div className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
       <Stack space={2}>
         <Stack>
           <Text size='md' weight='medium'>{token.app_name}</Text>

packages/pl-fe/src/features/backups/index.tsx

@@ -36,7 +36,7 @@ const Backup: React.FC<IBackup> = ({ backup }) => {
   );
 
   return (
-    <div key={backup.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+    <div key={backup.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
       <Stack space={2}>
         <Stack>
           <Text size='md'>

packages/pl-fe/src/features/chats/components/chat-composer.tsx

@@ -152,7 +152,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
 
   if (isBlocking) {
     return (
-      <div className='mt-auto p-6 shadow-3xl dark:border-t-2 dark:border-solid dark:border-gray-800'>
+      <div className='shadow-3xl mt-auto p-6 dark:border-t-2 dark:border-solid dark:border-gray-800'>
         <Stack space={3} alignItems='center'>
           <Text align='center' theme='muted'>
             {intl.formatMessage(messages.blocked)}
@@ -171,7 +171,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   }
 
   return (
-    <div className='mt-auto px-4 shadow-3xl'>
+    <div className='shadow-3xl mt-auto px-4'>
       {/* Spacer */}
       <div className='h-5' />
 

packages/pl-fe/src/features/chats/components/chat-list-item.tsx

@@ -83,7 +83,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
       key={chat.id}
       onClick={() => onClick(chat)}
       onKeyDown={handleKeyDown}
-      className='group flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 focus:shadow-inset-ring dark:hover:bg-gray-800'
+      className='focus:shadow-inset-ring group flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 dark:hover:bg-gray-800'
       data-testid='chat-list-item'
       tabIndex={0}
     >
@@ -152,7 +152,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
             <>
               {chat.last_message.unread && (
                 <div
-                  className='size-2 rounded-full bg-secondary-500'
+                  className='bg-secondary-500 size-2 rounded-full'
                   data-testid='chat-unread-indicator'
                 />
               )}

packages/pl-fe/src/features/chats/components/chat-list.tsx

@@ -70,7 +70,7 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, parentRef, topOffset }) =>
 
       </div>
       <div
-        className={clsx('pointer-events-none absolute inset-x-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 black:from-black dark:from-gray-900', {
+        className={clsx('black:from-black pointer-events-none absolute inset-x-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 dark:from-gray-900', {
           'opacity-0': isNearTop,
           'opacity-100 black:opacity-50': !isNearTop,
         })}
@@ -79,7 +79,7 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, parentRef, topOffset }) =>
         }}
       />
       <div
-        className={clsx('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pb-8 pt-12 transition-opacity duration-500 black:from-black dark:from-gray-900', {
+        className={clsx('black:from-black pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pb-8 pt-12 transition-opacity duration-500 dark:from-gray-900', {
           'opacity-0': isNearBottom,
           'opacity-100 black:opacity-50': !isNearBottom,
         })}

packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx

@@ -55,14 +55,14 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
     <div
       ref={containerRef}
       style={{ height }}
-      className='h-screen overflow-hidden bg-white text-gray-900 shadow-lg black:bg-transparent dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:rounded-t-xl'
+      className='black:bg-transparent dark:bg-primary-900 h-screen overflow-hidden bg-white text-gray-900 shadow-lg sm:rounded-t-xl dark:text-gray-100 dark:shadow-none'
     >
       <div
-        className='grid h-full grid-cols-9 overflow-hidden dark:divide-solid dark:divide-gray-800 sm:black:divide-x sm:dark:divide-x-2'
+        className='sm:black:divide-x grid h-full grid-cols-9 overflow-hidden dark:divide-solid dark:divide-gray-800 sm:dark:divide-x-2'
         data-testid='chat-page'
       >
         <Stack
-          className={clsx('dark:inset col-span-9 overflow-hidden bg-gradient-to-r from-white to-gray-100 black:bg-black dark:bg-gray-900 dark:bg-none sm:col-span-3', {
+          className={clsx('dark:inset black:bg-black col-span-9 overflow-hidden bg-gradient-to-r from-white to-gray-100 sm:col-span-3 dark:bg-gray-900 dark:bg-none', {
             'hidden sm:block': isSidebarHidden,
           })}
         >

packages/pl-fe/src/features/chats/components/chat-pending-upload.tsx

@@ -8,7 +8,7 @@ interface IChatPendingUpload {
 
 /** Displays a loading thumbnail for an upload in the chat composer. */
 const ChatPendingUpload: React.FC<IChatPendingUpload> = ({ progress }) => (
-  <div className='relative isolate inline-flex size-24 items-center justify-center overflow-hidden rounded-lg bg-gray-200 p-4 dark:bg-primary-900'>
+  <div className='dark:bg-primary-900 relative isolate inline-flex size-24 items-center justify-center overflow-hidden rounded-lg bg-gray-200 p-4'>
     <ProgressBar progress={progress} size='sm' />
   </div>
 );

packages/pl-fe/src/features/chats/components/chat-search/results.tsx

@@ -73,13 +73,13 @@ const Results = ({ accountSearchResult, onSelect, parentRef }: IResults) => {
       </ScrollableList>
 
       <div
-        className={clsx('pointer-events-none absolute inset-x-0 top-[58px] flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 black:from-black dark:from-gray-900', {
+        className={clsx('black:from-black pointer-events-none absolute inset-x-0 top-[58px] flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 dark:from-gray-900', {
           'opacity-0': isNearTop,
           'opacity-100': !isNearTop,
         })}
       />
       <div
-        className={clsx('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pb-8 pt-12 transition-opacity duration-500 black:from-black dark:from-gray-900', {
+        className={clsx('black:from-black pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pb-8 pt-12 transition-opacity duration-500 dark:from-gray-900', {
           'opacity-0': isNearBottom,
           'opacity-100': !isNearBottom,
         })}

packages/pl-fe/src/features/chats/components/chat-textarea.tsx

@@ -24,15 +24,15 @@ const ChatTextarea = React.forwardRef<HTMLTextAreaElement, IChatTextarea>(({
   ...rest
 }, ref) => (
   <div className={`
-      block
-      w-full
-      rounded-md border border-gray-400
-      bg-white text-gray-900
-      shadow-sm placeholder:text-gray-600
       focus-within:border-primary-500
-      focus-within:ring-1 focus-within:ring-primary-500 dark:border-gray-800 dark:bg-gray-800
+      focus-within:ring-primary-500
-      dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500
+      dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 block
-      dark:focus-within:ring-primary-500 sm:text-sm
+      w-full rounded-md
+      border border-gray-400
+      bg-white
+      text-gray-900 shadow-sm placeholder:text-gray-600 focus-within:ring-1
+      sm:text-sm dark:border-gray-800 dark:bg-gray-800 dark:text-gray-100 dark:ring-1
+      dark:ring-gray-800 dark:placeholder:text-gray-600
     `}
   >
     {(attachment || uploading) && (

packages/pl-fe/src/features/chats/components/chat-upload.tsx

@@ -24,7 +24,7 @@ const ChatUpload: React.FC<IChatUpload> = ({ attachment, onDelete }) => {
   };
 
   return (
-    <div className='relative isolate inline-block size-24 overflow-hidden rounded-lg bg-gray-200 dark:bg-primary-900'>
+    <div className='dark:bg-primary-900 relative isolate inline-block size-24 overflow-hidden rounded-lg bg-gray-200'>
       <Blurhash hash={attachment.blurhash} className='absolute inset-0 -z-10 size-full' />
 
       <div className='absolute right-[6px] top-[6px]'>
@@ -50,7 +50,7 @@ const RemoveButton: React.FC<IRemoveButton> = ({ onClick }) => (
   <button
     type='button'
     onClick={onClick}
-    className='flex size-5 items-center justify-center rounded-full bg-secondary-500 p-1'
+    className='bg-secondary-500 flex size-5 items-center justify-center rounded-full p-1'
   >
     <Icon
       className='size-3 text-white'

packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx

@@ -52,7 +52,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
               ({unreadCount})
             </Text>
 
-            <div className='size-2.5 rounded-full bg-accent-300' />
+            <div className='bg-accent-300 size-2.5 rounded-full' />
           </HStack>
         )}
       </ButtonComp>

packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx

@@ -100,7 +100,7 @@ const ChatSettings = () => {
             <button onClick={closeSettings}>
               <Icon
                 src={require('@tabler/icons/outline/arrow-left.svg')}
-                className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
+                className='size-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
               />
             </button>
 
@@ -121,13 +121,13 @@ const ChatSettings = () => {
         </HStack>
 
         <Stack space={5}>
-          <button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-accent-blue'>
+          <button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='text-primary-600 dark:text-accent-blue flex w-full items-center space-x-2 text-sm font-bold'>
             <Icon src={require('@tabler/icons/outline/ban.svg')} className='size-5' />
             <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
           </button>
 
           {features.chatsDelete && (
-            <button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
+            <button onClick={handleLeaveChat} className='text-danger-600 flex w-full items-center space-x-2 text-sm font-bold'>
               <Icon src={require('@tabler/icons/outline/logout.svg')} className='size-5' />
               <span>{intl.formatMessage(messages.leaveChat)}</span>
             </button>

packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx

@@ -62,7 +62,7 @@ const ChatWindow = () => {
               <button onClick={closeChat}>
                 <Icon
                   src={require('@tabler/icons/outline/arrow-left.svg')}
-                  className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
+                  className='size-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
                 />
               </button>
             )}

packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx

@@ -29,7 +29,7 @@ const ChatSearchHeader = () => {
           >
             <Icon
               src={require('@tabler/icons/outline/arrow-left.svg')}
-              className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
+              className='size-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
             />
           </button>
 

packages/pl-fe/src/features/chats/components/ui/pane.tsx

@@ -11,7 +11,7 @@ interface IPane {
 /** Chat pane UI component for desktop. */
 const Pane: React.FC<IPane> = ({ isOpen = false, children }) => (
   <div
-    className={clsx('fixed bottom-0 z-[99] flex w-96 flex-col rounded-t-lg bg-white shadow-3xl black:border black:border-b-0 black:border-gray-800 black:bg-black dark:bg-gray-900 ltr:right-5 rtl:left-5', {
+    className={clsx('shadow-3xl black:border black:border-b-0 black:border-gray-800 black:bg-black fixed bottom-0 z-[99] flex w-96 flex-col rounded-t-lg bg-white ltr:right-5 rtl:left-5 dark:bg-gray-900', {
       'h-[550px] max-h-[100vh]': isOpen,
       'h-16': !isOpen,
     })}

packages/pl-fe/src/features/circle/index.tsx

@@ -149,7 +149,7 @@ const Circle: React.FC = () => {
             <FormattedMessage id='interactions_circle.confirmation_heading' defaultMessage='Do you want to generate an interaction circle for the user @{username}?' values={{ username: account?.acct }} />
           </Text>
 
-          <div className='mx-auto max-w-md rounded-lg p-2 black:border black:border-gray-800'>
+          <div className='black:border black:border-gray-800 mx-auto max-w-md rounded-lg p-2'>
             {account && <Account account={account} withRelationship={false} disabled />}
           </div>
 

packages/pl-fe/src/features/compose-event/components/upload-button.tsx

@@ -31,7 +31,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
   };
 
   return (
-    <HStack className='size-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
+    <HStack className='text-primary-500 dark:text-accent-blue size-full cursor-pointer' space={3} alignItems='center' justifyContent='center' element='label'>
       <Icon
         src={require('@tabler/icons/outline/photo-plus.svg')}
         className='size-7'

packages/pl-fe/src/features/compose-event/tabs/edit-event.tsx

@@ -177,7 +177,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
         labelText={<FormattedMessage id='compose_event.fields.banner_label' defaultMessage='Event banner' />}
         hintText={<FormattedMessage id='compose_event.fields.banner_hint' defaultMessage='PNG, GIF or JPG. Landscape format is preferred.' />}
       >
-        <div className='dark:sm:shadow-inset relative flex h-24 items-center justify-center overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-white sm:h-32 sm:shadow'>
+        <div className='dark:sm:shadow-inset bg-primary-100 text-primary-500 relative flex h-24 items-center justify-center overflow-hidden rounded-lg sm:h-32 sm:shadow dark:bg-gray-800 dark:text-white'>
           {banner ? (
             <>
               <img className='size-full object-cover' src={banner.url} alt='' />
@@ -203,7 +203,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
       >
         <ComposeEditor
           key={String(isDisabled)}
-          className='block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 focus-within:border-primary-500 focus-within:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 sm:text-sm'
+          className='focus-within:border-primary-500 focus-within:ring-primary-500 black:bg-black dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600'
           placeholderClassName='pt-2'
           composeId={composeId}
           placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}

packages/pl-fe/src/features/compose/components/compose-form.tsx

@@ -265,7 +265,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
             ref={editorRef}
             className={transparent
               ? ''
-              : 'rounded-md border-gray-400 px-3 py-2 ring-2 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:ring-gray-800 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500'}
+              : 'focus-within:border-primary-500 focus-within:ring-primary-500 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 rounded-md border-gray-400 px-3 py-2 ring-2 dark:border-gray-800 dark:ring-gray-800'}
             placeholderClassName={transparent ? '' : 'pt-2'}
             composeId={id}
             condensed={condensed}

packages/pl-fe/src/features/compose/components/language-dropdown.tsx

@@ -191,7 +191,7 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
               ref={active ? focusedItem : null}
             >
               <div
-                className={clsx('flex-auto grow text-primary-600 dark:text-primary-400', {
+                className={clsx('text-primary-600 dark:text-primary-400 flex-auto grow', {
                   'text-black dark:text-white': modified,
                 })}
               >

packages/pl-fe/src/features/compose/components/reply-indicator.tsx

@@ -37,7 +37,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
   }
 
   return (
-    <Stack space={2} className={clsx('max-h-72 overflow-y-auto rounded-lg bg-gray-100 p-4 black:bg-gray-900 dark:bg-gray-800', className)}>
+    <Stack space={2} className={clsx('black:bg-gray-900 max-h-72 overflow-y-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800', className)}>
       <AccountContainer
         {...actions}
         id={status.account_id}

packages/pl-fe/src/features/compose/components/reply-mentions.tsx

@@ -51,7 +51,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
     return (
       <span
         key={acct}
-        className='inline-block text-primary-600 no-underline [direction:ltr] hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'
+        className='text-primary-600 hover:text-primary-700 dark:text-accent-blue dark:hover:text-accent-blue inline-block no-underline [direction:ltr] hover:underline'
       >
         @{username}
       </span>

packages/pl-fe/src/features/compose/editor/plugins/floating-link-editor-plugin.tsx

@@ -198,7 +198,7 @@ const FloatingLinkEditor = ({
           </>
         ) : (
           <>
-            <a className='mr-8 block truncate text-primary-600 no-underline hover:underline dark:text-accent-blue' href={linkUrl} target='_blank' rel='noopener noreferrer'>
+            <a className='text-primary-600 dark:text-accent-blue mr-8 block truncate no-underline hover:underline' href={linkUrl} target='_blank' rel='noopener noreferrer'>
               {linkUrl}
             </a>
             <div

packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx

@@ -93,7 +93,7 @@ interface IToolbarButton extends React.HTMLAttributes<HTMLButtonElement> {
 export const ToolbarButton: React.FC<IToolbarButton> = ({ active, icon, ...props }) => (
   <button
     className={clsx(
-      'flex cursor-pointer rounded-lg border-0 bg-none p-1 align-middle hover:bg-gray-100 disabled:cursor-not-allowed disabled:hover:bg-none dark:hover:bg-primary-700',
+      'dark:hover:bg-primary-700 flex cursor-pointer rounded-lg border-0 bg-none p-1 align-middle hover:bg-gray-100 disabled:cursor-not-allowed disabled:hover:bg-none',
       { 'bg-gray-100/30 dark:bg-gray-800/30': active },
     )}
     type='button'
@@ -185,7 +185,7 @@ const BlockTypeDropdown = ({ editor, anchorElem, blockType, icon }: {
     <>
       <button
         onClick={() => setShowDropDown(!showDropDown)}
-        className='relative flex cursor-pointer rounded-lg border-0 bg-none p-1 align-middle hover:bg-gray-100 disabled:cursor-not-allowed disabled:hover:bg-none dark:hover:bg-primary-700'
+        className='dark:hover:bg-primary-700 relative flex cursor-pointer rounded-lg border-0 bg-none p-1 align-middle hover:bg-gray-100 disabled:cursor-not-allowed disabled:hover:bg-none'
         aria-label=''
         type='button'
       >

packages/pl-fe/src/features/crypto-donate/components/crypto-address.tsx

@@ -5,13 +5,12 @@ import HStack from 'pl-fe/components/ui/hstack';
 import Icon from 'pl-fe/components/ui/icon';
 import Stack from 'pl-fe/components/ui/stack';
 import Text from 'pl-fe/components/ui/text';
+import { CryptoIcon } from 'pl-fe/features/ui/util/async-components';
 import { useModalsStore } from 'pl-fe/stores/modals';
 
 import { getExplorerUrl } from '../utils/block-explorer';
 import { getTitle } from '../utils/coin-db';
 
-import CryptoIcon from './crypto-icon';
-
 interface ICryptoAddress {
   address: string;
   ticker: string;

packages/pl-fe/src/features/crypto-donate/components/detailed-crypto-address.tsx

@@ -3,12 +3,11 @@ import React from 'react';
 
 import CopyableInput from 'pl-fe/components/copyable-input';
 import Icon from 'pl-fe/components/icon';
+import { CryptoIcon } from 'pl-fe/features/ui/util/async-components';
 
 import { getExplorerUrl } from '../utils/block-explorer';
 import { getTitle } from '../utils/coin-db';
 
-import CryptoIcon from './crypto-icon';
-
 interface IDetailedCryptoAddress {
   address: string;
   ticker: string;

packages/pl-fe/src/features/directory/components/account-card.tsx

@@ -30,7 +30,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
   const followedBy = me !== account.id && account.relationship?.followed_by;
 
   return (
-    <div className='flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow dark:divide-primary-700 dark:bg-primary-800'>
+    <div className='dark:divide-primary-700 dark:bg-primary-800 flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow'>
       <div className='relative'>
         {followedBy && (
           <div className='absolute left-2.5 top-2.5'>
@@ -56,7 +56,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
             <Avatar
               src={account.avatar}
               alt={account.avatar_description}
-              className='!absolute bottom-0 left-3 translate-y-1/2 bg-white ring-2 ring-white dark:bg-primary-900 dark:ring-primary-900'
+              className='dark:bg-primary-900 dark:ring-primary-900 !absolute bottom-0 left-3 translate-y-1/2 bg-white ring-2 ring-white'
               size={64}
             />
           </Link>

packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx

@@ -55,7 +55,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
     <label
       ref={picker}
       className={clsx(
-        'absolute bottom-0 left-1/2 size-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-lg bg-primary-300 ring-2',
+        'bg-primary-300 absolute bottom-0 left-1/2 size-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-lg ring-2',
         {
           'border-2 border-primary-600 border-dashed !z-[99] overflow-hidden': isDragging,
           'ring-white dark:ring-primary-900': !isDraggedOver,

packages/pl-fe/src/features/edit-profile/components/header-picker.tsx

@@ -63,7 +63,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
     <label
       ref={picker}
       className={clsx(
-        'dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow',
+        'dark:sm:shadow-inset bg-primary-100 text-primary-500 dark:text-accent-blue relative h-24 w-full cursor-pointer overflow-hidden rounded-lg sm:h-36 sm:shadow dark:bg-gray-800',
         {
           'border-2 border-primary-600 border-dashed !z-[99]': isDragging,
           'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,

packages/pl-fe/src/features/embedded-status/index.tsx

@@ -67,7 +67,7 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
 
   return (
     <a
-      className='block bg-white dark:bg-primary-900'
+      className='dark:bg-primary-900 block bg-white'
       href={status?.url || '#'}
       onClick={e => e.stopPropagation()}
       target='_blank'

packages/pl-fe/src/features/event/components/event-header.tsx

@@ -88,7 +88,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
     return (
       <>
         <div className='-mx-4 -mt-4'>
-          <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
+          <div className='black:rounded-t-none relative h-32 w-full bg-gray-200 md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
         </div>
 
         <PlaceholderEventHeader />
@@ -360,13 +360,13 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   return (
     <>
       <div className='-mx-4 -mt-4'>
-        <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48'>
+        <div className='black:rounded-t-none relative h-32 w-full bg-gray-200 md:rounded-t-xl lg:h-48 dark:bg-gray-900/50'>
           {banner && (
             <a href={banner.url} onClick={handleHeaderClick} target='_blank'>
               <StillImage
                 src={banner.url}
                 alt={intl.formatMessage(messages.bannerHeader)}
-                className='absolute inset-0 h-full object-cover black:rounded-t-none md:rounded-t-xl'
+                className='black:rounded-t-none absolute inset-0 h-full object-cover md:rounded-t-xl'
               />
             </a>
           )}