diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index e829eaa1fa..51cc6e8330 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -5,6 +5,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:import/typescript',
     'plugin:compat/recommended',
+    'plugin:tailwindcss/recommended',
   ],
 
   env: {
@@ -61,6 +62,9 @@ module.exports = {
       'URL', // core-js
       'URLSearchParams', // core-js
     ],
+    tailwindcss: {
+      config: 'tailwind.config.cjs',
+    },
   },
 
   rules: {
@@ -235,18 +239,7 @@ module.exports = {
       },
     ],
     'import/newline-after-import': 'error',
-    'import/no-extraneous-dependencies': [
-      'error',
-      // {
-      //   devDependencies: [
-      //     'webpack/**',
-      //     'app/soapbox/test_setup.js',
-      //     'app/soapbox/test_helpers.js',
-      //     'app/**/__tests__/**',
-      //     'app/**/__mocks__/**',
-      //   ],
-      // },
-    ],
+    'import/no-extraneous-dependencies': 'error',
     'import/no-unresolved': 'error',
     'import/no-webpack-loader-syntax': 'error',
     'import/order': [
@@ -271,6 +264,9 @@ module.exports = {
     'promise/catch-or-return': 'error',
 
     'react-hooks/rules-of-hooks': 'error',
+
+    'tailwindcss/classnames-order': 'error',
+    'tailwindcss/migration-from-tailwind-2': 'error',
   },
   overrides: [
     {
diff --git a/app/soapbox/components/account-search.tsx b/app/soapbox/components/account-search.tsx
index c519b0243a..a3d7fd1a62 100644
--- a/app/soapbox/components/account-search.tsx
+++ b/app/soapbox/components/account-search.tsx
@@ -72,7 +72,7 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
         <div
           role='button'
           tabIndex={0}
-          className='absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer'
+          className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3'
           onClick={handleClear}
         >
           <SvgIcon
diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index e92569ebeb..2901433ec8 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -43,11 +43,11 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
 
   return (
     <button
-      className='w-4 h-4 flex-none focus:ring-primary-500 focus:ring-2 focus:ring-offset-2'
+      className='h-4 w-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
       onClick={handleClick}
       disabled={disabled}
     >
-      <img src={account.favicon} alt='' title={account.domain} className='w-full max-h-full' />
+      <img src={account.favicon} alt='' title={account.domain} className='max-h-full w-full' />
     </button>
   );
 };
@@ -147,7 +147,7 @@ const Account = ({
           src={actionIcon}
           title={actionTitle}
           onClick={handleAction}
-          className='bg-transparent text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
+          className='bg-transparent text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
           iconClassName='w-4 h-4'
         />
       );
@@ -193,7 +193,7 @@ const Account = ({
   const LinkEl: any = withLinkToProfile ? Link : 'div';
 
   return (
-    <div data-testid='account' className='flex-shrink-0 group block w-full' ref={overflowRef}>
+    <div data-testid='account' className='group block w-full shrink-0' ref={overflowRef}>
       <HStack alignItems={actionAlignment} justifyContent='between'>
         <HStack alignItems={withAccountNote || note ? 'top' : 'center'} space={3}>
           <ProfilePopper
@@ -208,14 +208,14 @@ const Account = ({
               <Avatar src={account.avatar} size={avatarSize} />
               {emoji && (
                 <Emoji
-                  className='w-5 h-5 absolute -bottom-1.5 -right-1.5'
+                  className='absolute -bottom-1.5 -right-1.5 h-5 w-5'
                   emoji={emoji}
                 />
               )}
             </LinkEl>
           </ProfilePopper>
 
-          <div className='flex-grow'>
+          <div className='grow'>
             <ProfilePopper
               condition={showProfileHoverCard}
               wrapper={(children) => <HoverRefWrapper accountId={account.id} inline>{children}</HoverRefWrapper>}
diff --git a/app/soapbox/components/animated-number.tsx b/app/soapbox/components/animated-number.tsx
index 0f6908fdee..e7dd824624 100644
--- a/app/soapbox/components/animated-number.tsx
+++ b/app/soapbox/components/animated-number.tsx
@@ -50,7 +50,7 @@ const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate }) => {
   return (
     <TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}>
       {items => (
-        <span className='inline-flex flex-col items-stretch relative overflow-hidden'>
+        <span className='relative inline-flex flex-col items-stretch overflow-hidden'>
           {items.map(({ key, data, style }) => (
             <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <FormattedNumber value={data} />}</span>
           ))}
diff --git a/app/soapbox/components/announcements/emoji.tsx b/app/soapbox/components/announcements/emoji.tsx
index 64266639d5..3628227dfe 100644
--- a/app/soapbox/components/announcements/emoji.tsx
+++ b/app/soapbox/components/announcements/emoji.tsx
@@ -24,7 +24,7 @@ const Emoji: React.FC<IEmoji> = ({ emoji, emojiMap, hovered }) => {
     return (
       <img
         draggable='false'
-        className='emojione block m-0'
+        className='emojione m-0 block'
         alt={emoji}
         title={title}
         src={joinPublicPath(`packs/emoji/${filename}.svg`)}
@@ -37,7 +37,7 @@ const Emoji: React.FC<IEmoji> = ({ emoji, emojiMap, hovered }) => {
     return (
       <img
         draggable='false'
-        className='emojione block m-0'
+        className='emojione m-0 block'
         alt={shortCode}
         title={shortCode}
         src={filename as string}
diff --git a/app/soapbox/components/birthday-input.tsx b/app/soapbox/components/birthday-input.tsx
index b8e4d11ad4..3be57348ac 100644
--- a/app/soapbox/components/birthday-input.tsx
+++ b/app/soapbox/components/birthday-input.tsx
@@ -113,7 +113,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
   const handleChange = (date: Date) => onChange(date ? new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().slice(0, 10) : '');
 
   return (
-    <div className='mt-1 relative rounded-md shadow-sm'>
+    <div className='relative mt-1 rounded-md shadow-sm'>
       <BundleContainer fetchComponent={DatePicker}>
         {Component => (<Component
           selected={selected}
diff --git a/app/soapbox/components/dropdown-menu.tsx b/app/soapbox/components/dropdown-menu.tsx
index 3cab63aeb5..a125b9565f 100644
--- a/app/soapbox/components/dropdown-menu.tsx
+++ b/app/soapbox/components/dropdown-menu.tsx
@@ -196,7 +196,7 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
           data-method={isLogout ? 'delete' : undefined}
           title={text}
         >
-          {icon && <SvgIcon src={icon} className='mr-3 rtl:ml-3 rtl:mr-0 h-5 w-5 flex-none' />}
+          {icon && <SvgIcon src={icon} className='mr-3 h-5 w-5 flex-none rtl:ml-3 rtl:mr-0' />}
 
           <span className='truncate'>{text}</span>
 
diff --git a/app/soapbox/components/error-boundary.tsx b/app/soapbox/components/error-boundary.tsx
index 87f6d749dd..3a6b4ac0be 100644
--- a/app/soapbox/components/error-boundary.tsx
+++ b/app/soapbox/components/error-boundary.tsx
@@ -113,17 +113,17 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
     const errorText = this.getErrorText();
 
     return (
-      <div className='h-screen pt-16 pb-12 flex flex-col bg-white dark:bg-primary-900'>
-        <main className='flex-grow flex flex-col justify-center max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8'>
-          <div className='flex-shrink-0 flex justify-center'>
+      <div className='flex h-screen flex-col bg-white pt-16 pb-12 dark:bg-primary-900'>
+        <main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'>
+          <div className='flex shrink-0 justify-center'>
             <a href='/' className='inline-flex'>
               <SiteLogo alt='Logo' className='h-12 w-auto cursor-pointer' />
             </a>
           </div>
 
           <div className='py-8'>
-            <div className='text-center max-w-xl mx-auto space-y-2'>
-              <h1 className='text-3xl font-extrabold text-gray-900 dark:text-gray-500 tracking-tight sm:text-4xl'>
+            <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'>
                 <FormattedMessage id='alert.unexpected.message' defaultMessage='Something went wrong.' />
               </h1>
               <p className='text-lg text-gray-700 dark:text-gray-600'>
@@ -132,7 +132,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
                   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={this.clearCookies} className='text-primary-600 dark:text-accent-blue hover:underline'>
+                      <a href='/' onClick={this.clearCookies} className='text-primary-600 hover:underline dark:text-accent-blue'>
                         <FormattedMessage
                           id='alert.unexpected.clear_cookies'
                           defaultMessage='clear cookies and browser data'
@@ -150,7 +150,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
               </Text>
 
               <div className='mt-10'>
-                <a href='/' className='text-base font-medium text-primary-600 dark:text-accent-blue hover:underline'>
+                <a href='/' className='text-base font-medium text-primary-600 hover:underline dark:text-accent-blue'>
                   <FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
                   <span aria-hidden='true'> &rarr;</span>
                 </a>
@@ -158,11 +158,11 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
             </div>
 
             {!isProduction && (
-              <div className='py-16 max-w-lg mx-auto space-y-4'>
+              <div className='mx-auto max-w-lg space-y-4 py-16'>
                 {errorText && (
                   <textarea
                     ref={this.setTextareaRef}
-                    className='h-48 p-4 shadow-sm bg-gray-100 text-gray-900 dark:text-gray-100 dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 dark:border-gray-700 rounded-md font-mono'
+                    className='block h-48 w-full rounded-md border-gray-300 bg-gray-100 p-4 font-mono text-gray-900 shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 sm:text-sm'
                     value={errorText}
                     onClick={this.handleCopy}
                     readOnly
@@ -180,11 +180,11 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
           </div>
         </main>
 
-        <footer className='flex-shrink-0 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8'>
+        <footer className='mx-auto w-full max-w-7xl shrink-0 px-4 sm:px-6 lg:px-8'>
           <HStack justifyContent='center' space={4} element='nav'>
             {links.get('status') && (
               <>
-                <a href={links.get('status')} className='text-sm font-medium text-gray-700 dark:text-gray-600 hover:underline'>
+                <a href={links.get('status')} className='text-sm font-medium text-gray-700 hover:underline dark:text-gray-600'>
                   <FormattedMessage id='alert.unexpected.links.status' defaultMessage='Status' />
                 </a>
               </>
@@ -193,7 +193,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
             {links.get('help') && (
               <>
                 <span className='inline-block border-l border-gray-300' aria-hidden='true' />
-                <a href={links.get('help')} className='text-sm font-medium text-gray-700 dark:text-gray-600 hover:underline'>
+                <a href={links.get('help')} className='text-sm font-medium text-gray-700 hover:underline dark:text-gray-600'>
                   <FormattedMessage id='alert.unexpected.links.help' defaultMessage='Help Center' />
                 </a>
               </>
@@ -202,7 +202,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
             {links.get('support') && (
               <>
                 <span className='inline-block border-l border-gray-300' aria-hidden='true' />
-                <a href={links.get('support')} className='text-sm font-medium text-gray-700 dark:text-gray-600 hover:underline'>
+                <a href={links.get('support')} className='text-sm font-medium text-gray-700 hover:underline dark:text-gray-600'>
                   <FormattedMessage id='alert.unexpected.links.support' defaultMessage='Support' />
                 </a>
               </>
diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx
index 2bbcec24c9..e0585e01b2 100644
--- a/app/soapbox/components/event-preview.tsx
+++ b/app/soapbox/components/event-preview.tsx
@@ -55,7 +55,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
       <div className='absolute top-28 right-3'>
         {floatingAction && action}
       </div>
-      <div className='bg-primary-200 dark:bg-gray-600 h-40'>
+      <div className='h-40 bg-primary-200 dark:bg-gray-600'>
         {banner && <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.eventBanner)} />}
       </div>
       <Stack className='p-2.5' space={2}>
@@ -65,7 +65,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
           {!floatingAction && action}
         </HStack>
 
-        <div className='flex gap-y-1 gap-x-2 flex-wrap text-gray-700 dark:text-gray-600'>
+        <div className='flex flex-wrap gap-y-1 gap-x-2 text-gray-700 dark:text-gray-600'>
           <HStack alignItems='center' space={2}>
             <Icon src={require('@tabler/icons/user.svg')} />
             <HStack space={1} alignItems='center' grow>
diff --git a/app/soapbox/components/gdpr-banner.tsx b/app/soapbox/components/gdpr-banner.tsx
index 0c9ea85c88..a5a2f53f12 100644
--- a/app/soapbox/components/gdpr-banner.tsx
+++ b/app/soapbox/components/gdpr-banner.tsx
@@ -31,7 +31,7 @@ const GdprBanner: React.FC = () => {
 
   return (
     <Banner theme='opaque' className={classNames('transition-transform', { 'translate-y-full': slideout })}>
-      <div className='flex flex-col space-y-4 lg:space-y-0 lg:space-x-4 rtl:space-x-reverse lg:flex-row lg:items-center lg:justify-between'>
+      <div className='flex flex-col space-y-4 rtl:space-x-reverse lg:flex-row lg:items-center lg:justify-between lg:space-y-0 lg:space-x-4'>
         <Stack space={2}>
           <Text size='xl' weight='bold'>
             <FormattedMessage id='gdpr.title' defaultMessage='{siteTitle} uses cookies' values={{ siteTitle: instance.title }} />
diff --git a/app/soapbox/components/group-card.tsx b/app/soapbox/components/group-card.tsx
index faade0dc7f..15d8cf4971 100644
--- a/app/soapbox/components/group-card.tsx
+++ b/app/soapbox/components/group-card.tsx
@@ -18,9 +18,9 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
 
   return (
     <div className='overflow-hidden'>
-      <Stack className='bg-white dark:bg-primary-900 border border-solid border-gray-300 dark:border-primary-800 rounded-lg sm:rounded-xl'>
-        <div className='bg-primary-100 dark:bg-gray-800 h-[120px] relative -m-[1px] mb-0 rounded-t-lg sm:rounded-t-xl'>
-          {group.header && <img className='h-full w-full object-cover rounded-t-lg sm:rounded-t-xl' src={group.header} alt={intl.formatMessage(messages.groupHeader)} />}
+      <Stack className='rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900 sm:rounded-xl'>
+        <div className='relative -m-[1px] mb-0 h-[120px] rounded-t-lg bg-primary-100 dark:bg-gray-800 sm:rounded-t-xl'>
+          {group.header && <img className='h-full w-full rounded-t-lg object-cover sm:rounded-t-xl' src={group.header} alt={intl.formatMessage(messages.groupHeader)} />}
           <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
             <Avatar className='ring-2 ring-white dark:ring-primary-900' src={group.avatar} size={64} />
           </div>
diff --git a/app/soapbox/components/landing-gradient.tsx b/app/soapbox/components/landing-gradient.tsx
index f6dae6f617..1cef998439 100644
--- a/app/soapbox/components/landing-gradient.tsx
+++ b/app/soapbox/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 dark:from-primary-900/50 via-white dark:via-primary-900 to-gradient-end/10 dark:to-primary-800/50' />
+  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-gradient-end/10 dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50' />
 );
 
 export default LandingGradient;
diff --git a/app/soapbox/components/link.tsx b/app/soapbox/components/link.tsx
index 7455547e6b..51bb913003 100644
--- a/app/soapbox/components/link.tsx
+++ b/app/soapbox/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 dark:text-accent-blue hover:underline'
+    className='text-primary-600 hover:underline dark:text-accent-blue'
   />
 );
 
diff --git a/app/soapbox/components/loading-screen.tsx b/app/soapbox/components/loading-screen.tsx
index 991007ba81..3b86fd2e01 100644
--- a/app/soapbox/components/loading-screen.tsx
+++ b/app/soapbox/components/loading-screen.tsx
@@ -9,7 +9,7 @@ const LoadingScreen: React.FC = () => {
     <div className='fixed h-screen w-screen'>
       <LandingGradient />
 
-      <div className='fixed d-screen w-screen flex items-center justify-center z-10'>
+      <div className='d-screen fixed z-10 flex w-screen items-center justify-center'>
         <div className='p-4'>
           <Spinner size={40} withText={false} />
         </div>
diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx
index 9b9d1fb7d7..3321ba1581 100644
--- a/app/soapbox/components/media-gallery.tsx
+++ b/app/soapbox/components/media-gallery.tsx
@@ -171,7 +171,7 @@ const Item: React.FC<IItem> = ({
         target='_blank'
       >
         <StillImage
-          className='w-full h-full'
+          className='h-full w-full'
           src={mediaPreview ? attachment.preview_url : attachment.url}
           alt={attachment.description}
           letterboxed={letterboxed}
diff --git a/app/soapbox/components/modal-root.tsx b/app/soapbox/components/modal-root.tsx
index 8abc27eac6..67f3fb32a6 100644
--- a/app/soapbox/components/modal-root.tsx
+++ b/app/soapbox/components/modal-root.tsx
@@ -241,7 +241,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
       <div
         role='presentation'
         id='modal-overlay'
-        className='fixed inset-0 bg-gray-500/90 dark:bg-gray-700/90 backdrop-blur'
+        className='fixed inset-0 bg-gray-500/90 backdrop-blur dark:bg-gray-700/90'
         onClick={handleOnClose}
       />
 
diff --git a/app/soapbox/components/polls/poll-option.tsx b/app/soapbox/components/polls/poll-option.tsx
index f81be4f5b4..5c99e1186c 100644
--- a/app/soapbox/components/polls/poll-option.tsx
+++ b/app/soapbox/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 h-full inline-block bg-primary-100 dark:bg-primary-500 rounded-l-md'
+          className='absolute inset-0 inline-block h-full rounded-l-md bg-primary-100 dark:bg-primary-500'
           style={{ width: `${width}%` }}
         />
       )}
@@ -61,8 +61,8 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
         onChange={handleOptionChange}
       />
 
-      <div className='grid items-center w-full'>
-        <div className='col-start-1 row-start-1 justify-self-center ml-4 mr-6'>
+      <div className='grid w-full items-center'>
+        <div className='col-start-1 row-start-1 ml-4 mr-6 justify-self-center'>
           <div className='text-primary-600 dark:text-white'>
             <Text
               theme='inherit'
@@ -72,7 +72,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
           </div>
         </div>
 
-        <div className='col-start-1 row-start-1 justify-self-end flex items-center'>
+        <div className='col-start-1 row-start-1 flex items-center justify-self-end'>
           <span
             className={classNames('flex items-center justify-center w-6 h-6 flex-none border border-solid rounded-full', {
               'bg-primary-600 border-primary-600 dark:bg-primary-300 dark:border-primary-300': active,
@@ -85,7 +85,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
             aria-label={option.title}
           >
             {active && (
-              <Icon src={require('@tabler/icons/check.svg')} className='text-white dark:text-primary-900 w-4 h-4' />
+              <Icon src={require('@tabler/icons/check.svg')} className='h-4 w-4 text-white dark:text-primary-900' />
             )}
           </span>
         </div>
@@ -123,7 +123,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
           <HStack
             justifyContent='between'
             alignItems='center'
-            className='relative p-2 w-full bg-white dark:bg-primary-800 rounded-md overflow-hidden'
+            className='relative w-full overflow-hidden rounded-md bg-white p-2 dark:bg-primary-800'
           >
             <PollPercentageBar percent={percent} leading={leading} />
 
@@ -141,7 +141,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
                 <Icon
                   src={require('@tabler/icons/circle-check.svg')}
                   alt={intl.formatMessage(messages.voted)}
-                  className='text-primary-600 dark:text-primary-800 dark:fill-white w-4 h-4'
+                  className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
                 />
               ) : (
                 <div className='svg-icon' />
diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx
index 39d766f801..32e4ceb208 100644
--- a/app/soapbox/components/profile-hover-card.tsx
+++ b/app/soapbox/components/profile-hover-card.tsx
@@ -123,7 +123,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
               <HStack alignItems='center' space={0.5}>
                 <Icon
                   src={require('@tabler/icons/calendar.svg')}
-                  className='w-4 h-4 text-gray-800 dark:text-gray-200'
+                  className='h-4 w-4 text-gray-800 dark:text-gray-200'
                 />
 
                 <Text size='sm'>
diff --git a/app/soapbox/components/scroll-top-button.tsx b/app/soapbox/components/scroll-top-button.tsx
index 7bf03f66bc..7a0fb71de9 100644
--- a/app/soapbox/components/scroll-top-button.tsx
+++ b/app/soapbox/components/scroll-top-button.tsx
@@ -83,7 +83,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
 
   return (
     <div className={classes}>
-      <a className='flex items-center bg-primary-600 hover:bg-primary-700 hover:scale-105 active:scale-100 transition-transform text-white rounded-full px-4 py-2 space-x-1.5 cursor-pointer whitespace-nowrap' onClick={handleClick}>
+      <a 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' onClick={handleClick}>
         <Icon src={require('@tabler/icons/arrow-bar-to-up.svg')} />
 
         {(count > 0) && (
diff --git a/app/soapbox/components/sidebar-menu.tsx b/app/soapbox/components/sidebar-menu.tsx
index fc9942e124..51640d40e5 100644
--- a/app/soapbox/components/sidebar-menu.tsx
+++ b/app/soapbox/components/sidebar-menu.tsx
@@ -53,8 +53,8 @@ interface ISidebarLink {
 const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {
   const body = (
     <HStack space={2} alignItems='center'>
-      <div className='bg-primary-50 dark:bg-gray-800 relative rounded-full inline-flex p-2'>
-        <Icon src={icon} className='text-primary-500 h-5 w-5' />
+      <div className='relative inline-flex rounded-full bg-primary-50 p-2 dark:bg-gray-800'>
+        <Icon src={icon} className='h-5 w-5 text-primary-500' />
       </div>
 
       <Text tag='span' weight='medium' theme='inherit'>{text}</Text>
@@ -63,14 +63,14 @@ const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick })
 
   if (to) {
     return (
-      <NavLink className='group rounded-full text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800' to={to} onClick={onClick}>
+      <NavLink className='group rounded-full text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800' to={to} onClick={onClick}>
         {body}
       </NavLink>
     );
   }
 
   return (
-    <a className='group rounded-full text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800' href={href} target='_blank' onClick={onClick}>
+    <a className='group rounded-full text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800' href={href} target='_blank' onClick={onClick}>
       {body}
     </a>
   );
@@ -165,10 +165,10 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
             src={require('@tabler/icons/x.svg')}
             ref={closeButtonRef}
             iconClassName='h-6 w-6'
-            className='absolute top-0 right-0 -mr-11 mt-2 text-gray-600 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
+            className='absolute top-0 right-0 -mr-11 mt-2 text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300'
           />
 
-          <div className='relative overflow-y-scroll overflow-auto h-full w-full'>
+          <div className='relative h-full w-full overflow-auto overflow-y-scroll'>
             <div className='p-4'>
               <Stack space={4}>
                 <Link to={`/@${account.acct}`} onClick={onClose}>
@@ -342,11 +342,11 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                     </button>
 
                     {switcher && (
-                      <div className='border-t-2 border-gray-100 dark:border-gray-800 border-solid'>
+                      <div className='border-t-2 border-solid border-gray-100 dark:border-gray-800'>
                         {otherAccounts.map(account => renderAccount(account))}
 
-                        <NavLink className='flex items-center py-2 space-x-1' to='/login/add' onClick={handleClose}>
-                          <Icon className='text-primary-500 w-4 h-4' src={require('@tabler/icons/plus.svg')} />
+                        <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
+                          <Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/plus.svg')} />
                           <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
                         </NavLink>
                       </div>
@@ -361,7 +361,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
         {/* Dummy element to keep Close Icon visible */}
         <div
           aria-hidden
-          className='w-14 flex-shrink-0'
+          className='w-14 shrink-0'
           onClick={handleClose}
         />
       </div>
diff --git a/app/soapbox/components/status-action-button.tsx b/app/soapbox/components/status-action-button.tsx
index 3eca779a60..2ac9e259dd 100644
--- a/app/soapbox/components/status-action-button.tsx
+++ b/app/soapbox/components/status-action-button.tsx
@@ -41,8 +41,8 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
   const renderIcon = () => {
     if (emoji) {
       return (
-        <span className='flex w-6 h-6 items-center justify-center'>
-          <Emoji className='w-full h-full p-0.5' emoji={emoji} />
+        <span className='flex h-6 w-6 items-center justify-center'>
+          <Emoji className='h-full w-full p-0.5' emoji={emoji} />
         </span>
       );
     } else {
diff --git a/app/soapbox/components/status-content.tsx b/app/soapbox/components/status-content.tsx
index 307faf6792..719dea6e7b 100644
--- a/app/soapbox/components/status-content.tsx
+++ b/app/soapbox/components/status-content.tsx
@@ -25,7 +25,7 @@ interface IReadMoreButton {
 
 /** Button to expand a truncated status (due to too much content) */
 const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
-  <button className='flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline' onClick={onClick}>
+  <button className='flex items-center border-0 bg-transparent p-0 pt-2 text-gray-900 hover:underline active:underline dark:text-gray-300' onClick={onClick}>
     <FormattedMessage id='status.read_more' defaultMessage='Read more' />
     <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} />
   </button>
diff --git a/app/soapbox/components/status-reply-mentions.tsx b/app/soapbox/components/status-reply-mentions.tsx
index 5d1374a693..335fd38f35 100644
--- a/app/soapbox/components/status-reply-mentions.tsx
+++ b/app/soapbox/components/status-reply-mentions.tsx
@@ -73,7 +73,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
 
   if (to.size > 2) {
     accounts.push(
-      <span key='more' className='hover:underline cursor-pointer' role='button' onClick={handleOpenMentionsModal} tabIndex={0}>
+      <span key='more' className='cursor-pointer hover:underline' role='button' onClick={handleOpenMentionsModal} tabIndex={0}>
         <FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />
       </span>,
     );
@@ -93,7 +93,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
                 <HoverStatusWrapper statusId={status.in_reply_to_id} inline>
                   <span
                     key='hoverstatus'
-                    className='hover:underline cursor-pointer'
+                    className='cursor-pointer hover:underline'
                     role='presentation'
                   >
                     {children}
diff --git a/app/soapbox/components/statuses/sensitive-content-overlay.tsx b/app/soapbox/components/statuses/sensitive-content-overlay.tsx
index ed8891535d..192df71d1b 100644
--- a/app/soapbox/components/statuses/sensitive-content-overlay.tsx
+++ b/app/soapbox/components/statuses/sensitive-content-overlay.tsx
@@ -107,8 +107,8 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
           size='sm'
         />
       ) : (
-        <div className='flex justify-center items-center max-h-screen'>
-          <div className='text-center w-3/4 mx-auto space-y-4' ref={ref}>
+        <div className='flex max-h-screen items-center justify-center'>
+          <div className='mx-auto w-3/4 space-y-4 text-center' ref={ref}>
             <div className='space-y-1'>
               <Text theme='white' weight='semibold'>
                 {intl.formatMessage(isUnderReview ? messages.underReviewTitle : messages.sensitiveTitle)}
diff --git a/app/soapbox/components/statuses/status-info.tsx b/app/soapbox/components/statuses/status-info.tsx
index 55d0452ecb..322a911bc7 100644
--- a/app/soapbox/components/statuses/status-info.tsx
+++ b/app/soapbox/components/statuses/status-info.tsx
@@ -21,7 +21,7 @@ const StatusInfo = (props: IStatusInfo) => {
   return (
     <Container
       {...containerProps}
-      className='flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-3 rtl:space-x-reverse hover:underline'
+      className='flex items-center space-x-3 text-xs font-medium text-gray-700 hover:underline rtl:space-x-reverse dark:text-gray-600'
     >
       <div
         className='flex justify-end'
diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx
index 1f4f1a2611..0f6ee96598 100644
--- a/app/soapbox/components/still-image.tsx
+++ b/app/soapbox/components/still-image.tsx
@@ -70,7 +70,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
       )}
 
       {(hoverToPlay && showExt) && (
-        <div className='group-hover:hidden absolute opacity-90 left-2 bottom-2 pointer-events-none'>
+        <div className='pointer-events-none absolute left-2 bottom-2 opacity-90 group-hover:hidden'>
           <ExtensionBadge ext='GIF' />
         </div>
       )}
@@ -86,7 +86,7 @@ interface IExtensionBadge {
 /** Badge displaying a file extension. */
 const ExtensionBadge: React.FC<IExtensionBadge> = ({ ext }) => {
   return (
-    <div className='inline-flex items-center px-2 py-0.5 rounded text-sm font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100'>
+    <div className='inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-sm font-medium text-gray-900 dark:bg-gray-800 dark:text-gray-100'>
       {ext}
     </div>
   );
diff --git a/app/soapbox/components/tombstone.tsx b/app/soapbox/components/tombstone.tsx
index 3a1c0ae4be..0507d90dd7 100644
--- a/app/soapbox/components/tombstone.tsx
+++ b/app/soapbox/components/tombstone.tsx
@@ -19,7 +19,7 @@ const Tombstone: React.FC<ITombstone> = ({ id, onMoveUp, onMoveDown }) => {
 
   return (
     <HotKeys handlers={handlers}>
-      <div className='p-9 flex items-center justify-center sm:rounded-xl bg-gray-100 border border-solid border-gray-200 dark:bg-gray-900 dark:border-gray-800 focusable' tabIndex={0}>
+      <div className='focusable flex items-center justify-center border border-solid border-gray-200 bg-gray-100 p-9 dark:border-gray-800 dark:bg-gray-900 sm:rounded-xl' tabIndex={0}>
         <Text>
           <FormattedMessage id='statuses.tombstone' defaultMessage='One or more posts are unavailable.' />
         </Text>
diff --git a/app/soapbox/components/ui/accordion/accordion.tsx b/app/soapbox/components/ui/accordion/accordion.tsx
index c6a2e00d1a..cb9e66497b 100644
--- a/app/soapbox/components/ui/accordion/accordion.tsx
+++ b/app/soapbox/components/ui/accordion/accordion.tsx
@@ -36,13 +36,13 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
   };
 
   return (
-    <div className='bg-white dark:bg-primary-800 text-gray-900 dark:text-gray-100 rounded-lg shadow dark:shadow-none'>
+    <div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
       <button
         type='button'
         onClick={handleToggle}
         title={intl.formatMessage(expanded ? messages.collapse : messages.expand)}
         aria-expanded={expanded}
-        className='px-4 py-3 font-semibold flex items-center justify-between w-full'
+        className='flex w-full items-center justify-between px-4 py-3 font-semibold'
       >
         <span>{headline}</span>
 
@@ -55,7 +55,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
           )}
           <Icon
             src={expanded ? require('@tabler/icons/chevron-up.svg') : require('@tabler/icons/chevron-down.svg')}
-            className='text-gray-700 dark:text-gray-600 h-5 w-5'
+            className='h-5 w-5 text-gray-700 dark:text-gray-600'
           />
         </HStack>
       </button>
diff --git a/app/soapbox/components/ui/banner/banner.tsx b/app/soapbox/components/ui/banner/banner.tsx
index f9313eca34..d58804db7b 100644
--- a/app/soapbox/components/ui/banner/banner.tsx
+++ b/app/soapbox/components/ui/banner/banner.tsx
@@ -17,7 +17,7 @@ const Banner: React.FC<IBanner> = ({ theme, children, className }) => {
         'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-3xl dark:shadow-inset': theme === 'opaque',
       }, className)}
     >
-      <div className='max-w-4xl mx-auto px-4'>
+      <div className='mx-auto max-w-4xl px-4'>
         {children}
       </div>
     </div>
diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx
index b09e8c0e22..8847f9c58b 100644
--- a/app/soapbox/components/ui/button/button.tsx
+++ b/app/soapbox/components/ui/button/button.tsx
@@ -63,7 +63,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
       return null;
     }
 
-    return <Icon src={icon} className='w-4 h-4' />;
+    return <Icon src={icon} className='h-4 w-4' />;
   };
 
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback((event) => {
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 6fc85a39af..88c9df2d24 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -64,7 +64,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
     const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
 
     return (
-      <Comp {...backAttributes} className='text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2' aria-label={intl.formatMessage(messages.back)}>
+      <Comp {...backAttributes} className='text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
         <SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
diff --git a/app/soapbox/components/ui/checkbox/checkbox.tsx b/app/soapbox/components/ui/checkbox/checkbox.tsx
index 028c52296c..fe31e8089f 100644
--- a/app/soapbox/components/ui/checkbox/checkbox.tsx
+++ b/app/soapbox/components/ui/checkbox/checkbox.tsx
@@ -9,7 +9,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
       {...props}
       ref={ref}
       type='checkbox'
-      className='border-2 dark:bg-gray-900 dark:border-gray-800 focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded'
+      className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900'
     />
   );
 });
diff --git a/app/soapbox/components/ui/counter/counter.tsx b/app/soapbox/components/ui/counter/counter.tsx
index 983263b95b..e0fbb60049 100644
--- a/app/soapbox/components/ui/counter/counter.tsx
+++ b/app/soapbox/components/ui/counter/counter.tsx
@@ -12,7 +12,7 @@ interface ICounter {
 /** A simple counter for notifications, etc. */
 const Counter: React.FC<ICounter> = ({ count, countMax }) => {
   return (
-    <span className='h-5 min-w-[20px] max-w-[26px] flex items-center justify-center bg-secondary-500 text-xs font-medium text-white rounded-full ring-2 ring-white dark:ring-gray-800'>
+    <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 dark:ring-gray-800'>
       {shortNumberFormat(count, countMax)}
     </span>
   );
diff --git a/app/soapbox/components/ui/datepicker/datepicker.tsx b/app/soapbox/components/ui/datepicker/datepicker.tsx
index bef8467096..d9ba83f425 100644
--- a/app/soapbox/components/ui/datepicker/datepicker.tsx
+++ b/app/soapbox/components/ui/datepicker/datepicker.tsx
@@ -31,7 +31,7 @@ const Datepicker = ({ onChange }: IDatepicker) => {
   }, [month, day, year]);
 
   return (
-    <div className='grid grid-cols-1 gap-y-2 gap-x-2 sm:grid-cols-3'>
+    <div className='grid grid-cols-1 gap-2 sm:grid-cols-3'>
       <div className='sm:col-span-1'>
         <Stack>
           <Text size='sm' weight='medium' theme='muted'>
diff --git a/app/soapbox/components/ui/divider/divider.tsx b/app/soapbox/components/ui/divider/divider.tsx
index ebe436fa95..cd1a3b68ab 100644
--- a/app/soapbox/components/ui/divider/divider.tsx
+++ b/app/soapbox/components/ui/divider/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-gray-100 dark:border-gray-800 border-solid' />
+      <div className='w-full border-t-2 border-solid border-gray-100 dark:border-gray-800' />
     </div>
 
     {text && (
       <div className='relative flex justify-center'>
-        <span className='px-2 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-600' data-testid='divider-text'>
+        <span className='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>
diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index caaea79ee6..f8187fa982 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -18,7 +18,7 @@ interface IEmojiButton {
 const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabIndex }): JSX.Element => {
   return (
     <button className={classNames(className)} onClick={onClick} tabIndex={tabIndex}>
-      <Emoji className='w-8 h-8 duration-100 hover:scale-125' emoji={emoji} />
+      <Emoji className='h-8 w-8 duration-100 hover:scale-125' emoji={emoji} />
     </button>
   );
 };
diff --git a/app/soapbox/components/ui/file-input/file-input.tsx b/app/soapbox/components/ui/file-input/file-input.tsx
index f54f20ae82..89c42f14bc 100644
--- a/app/soapbox/components/ui/file-input/file-input.tsx
+++ b/app/soapbox/components/ui/file-input/file-input.tsx
@@ -8,7 +8,7 @@ const FileInput = forwardRef<HTMLInputElement, IFileInput>((props, ref) => {
       {...props}
       ref={ref}
       type='file'
-      className='block w-full text-sm text-gray-800 dark:text-gray-200 file:cursor-pointer file:mr-2 file:py-1.5 file:px-3 file:rounded-full file:text-xs file:leading-4 file:font-medium file:border-gray-200 file:border file:border-solid file:bg-white file:text-gray-700 hover:file:bg-gray-100 dark:file:border-gray-800 dark:file:bg-gray-900 dark:file:hover:bg-gray-800 dark:file:text-gray-500'
+      className='block w-full text-sm text-gray-800 file:mr-2 file:cursor-pointer file:rounded-full file:border file:border-solid file:border-gray-200 file:bg-white file:py-1.5 file:px-3 file:text-xs file:font-medium file:leading-4 file:text-gray-700 hover:file:bg-gray-100 dark:text-gray-200 dark:file:border-gray-800 dark:file:bg-gray-900 dark:file:text-gray-500 dark:file:hover:bg-gray-800'
     />
   );
 });
diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx
index d33c6d2a99..bbd094d2e4 100644
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/app/soapbox/components/ui/form-group/form-group.tsx
@@ -55,7 +55,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
             <div>
               <p
                 data-testid='form-group-error'
-                className='mt-0.5 text-xs text-danger-900 bg-danger-200 rounded-md inline-block px-2 py-1 relative form-error'
+                className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
               >
                 {errors.join(', ')}
               </p>
@@ -92,7 +92,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
         {hasError && (
           <p
             data-testid='form-group-error'
-            className='mt-0.5 text-xs text-danger-900 bg-danger-200 rounded-md inline-block px-2 py-1 relative form-error'
+            className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
           >
             {errors.join(', ')}
           </p>
diff --git a/app/soapbox/components/ui/icon/icon.tsx b/app/soapbox/components/ui/icon/icon.tsx
index 55e83b0df1..29ebc77c95 100644
--- a/app/soapbox/components/ui/icon/icon.tsx
+++ b/app/soapbox/components/ui/icon/icon.tsx
@@ -21,9 +21,9 @@ interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
 
 /** Renders and SVG icon with optional counter. */
 const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, ...filteredProps }): JSX.Element => (
-  <div className='flex flex-col flex-shrink-0 relative' data-testid='icon'>
+  <div className='relative flex shrink-0 flex-col' data-testid='icon'>
     {count ? (
-      <span className='absolute -top-2 -right-3 min-w-[20px] h-5 flex-shrink-0 whitespace-nowrap flex items-center justify-center break-words'>
+      <span className='absolute -top-2 -right-3 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words'>
         <Counter count={count} countMax={countMax} />
       </span>
     ) : null}
diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 9087943b60..c16c59a6a5 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -68,7 +68,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
         }
       >
         {icon ? (
-          <div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
+          <div className='pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3'>
             <Icon src={icon} className='h-4 w-4 text-gray-700 dark:text-gray-600' aria-hidden='true' />
           </div>
         ) : null}
@@ -95,7 +95,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
         />
 
         {append ? (
-          <div className='absolute inset-y-0 right-0 rtl:left-0 rtl:right-auto flex items-center pr-3'>
+          <div className='absolute inset-y-0 right-0 flex items-center pr-3 rtl:left-0 rtl:right-auto'>
             {append}
           </div>
         ) : null}
@@ -108,12 +108,12 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 intl.formatMessage(messages.showPassword)
             }
           >
-            <div className='absolute inset-y-0 right-0 rtl:left-0 rtl:right-auto flex items-center'>
+            <div className='absolute inset-y-0 right-0 flex items-center rtl:left-0 rtl:right-auto'>
               <button
                 type='button'
                 onClick={togglePassword}
                 tabIndex={-1}
-                className='text-gray-700 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 h-full px-2 focus:ring-primary-500 focus:ring-2'
+                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'
               >
                 <SvgIcon
                   src={revealed ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
diff --git a/app/soapbox/components/ui/layout/layout.tsx b/app/soapbox/components/ui/layout/layout.tsx
index c2e808c9c2..bf7b210222 100644
--- a/app/soapbox/components/ui/layout/layout.tsx
+++ b/app/soapbox/components/ui/layout/layout.tsx
@@ -21,8 +21,8 @@ interface LayoutComponent extends React.FC<ILayout> {
 
 /** Layout container, to hold Sidebar, Main, and Aside. */
 const Layout: LayoutComponent = ({ children }) => (
-  <div className='sm:pt-4 relative'>
-    <div className='max-w-3xl mx-auto sm:px-6 md:max-w-7xl md:px-8 md:grid md:grid-cols-12 md:gap-8'>
+  <div className='relative sm:pt-4'>
+    <div className='mx-auto max-w-3xl sm:px-6 md:grid md:max-w-7xl md:grid-cols-12 md:gap-8 md:px-8'>
       {children}
     </div>
   </div>
@@ -30,7 +30,7 @@ const Layout: LayoutComponent = ({ children }) => (
 
 /** Left sidebar container in the UI. */
 const Sidebar: React.FC<ISidebar> = ({ children }) => (
-  <div className='hidden lg:block lg:col-span-3'>
+  <div className='hidden lg:col-span-3 lg:block'>
     <StickyBox offsetTop={80} className='pb-4'>
       {children}
     </StickyBox>
@@ -50,7 +50,7 @@ const Main: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, classN
 
 /** Right sidebar container in the UI. */
 const Aside: React.FC<IAside> = ({ children }) => (
-  <aside className='hidden xl:block xl:col-span-3'>
+  <aside className='hidden xl:col-span-3 xl:block'>
     <StickyBox offsetTop={80} className='space-y-6 pb-12'>
       {children}
     </StickyBox>
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index e7aae8d78b..cfb5f11e35 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -88,7 +88,7 @@ const Modal: React.FC<IModal> = ({
 
   return (
     <div data-testid='modal' className={classNames('block w-full p-6 mx-auto text-start align-middle transition-all transform bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
-      <div className='sm:flex sm:items-start w-full justify-between'>
+      <div className='w-full justify-between sm:flex sm:items-start'>
         <div className='w-full'>
           {title && (
             <div
@@ -96,7 +96,7 @@ const Modal: React.FC<IModal> = ({
                 'flex-row-reverse': closePosition === 'left',
               })}
             >
-              <h3 className='flex-grow text-lg leading-6 font-bold text-gray-900 dark:text-white'>
+              <h3 className='grow text-lg font-bold leading-6 text-gray-900 dark:text-white'>
                 {title}
               </h3>
 
@@ -105,14 +105,14 @@ const Modal: React.FC<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>
           )}
 
           {title ? (
-            <div className='w-full mt-2'>
+            <div className='mt-2 w-full'>
               {children}
             </div>
           ) : children}
diff --git a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx b/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
index aaf2b4ac53..e420b733fc 100644
--- a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
+++ b/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
@@ -12,7 +12,7 @@ const CountryCodeDropdown: React.FC<ICountryCodeDropdown> = ({ countryCode, onCh
   return (
     <select
       value={countryCode}
-      className='h-full py-0 pl-3 pr-7 text-base bg-transparent border-transparent focus:outline-none focus:ring-primary-500 dark:text-white sm:text-sm rounded-md'
+      className='h-full rounded-md border-transparent bg-transparent py-0 pl-3 pr-7 text-base focus:outline-none focus:ring-primary-500 dark:text-white sm:text-sm'
       onChange={(event) => onChange(event.target.value as any)}
     >
       {COUNTRY_CODES.map((code) => (
diff --git a/app/soapbox/components/ui/progress-bar/progress-bar.tsx b/app/soapbox/components/ui/progress-bar/progress-bar.tsx
index 5feadf0a33..c0161ae348 100644
--- a/app/soapbox/components/ui/progress-bar/progress-bar.tsx
+++ b/app/soapbox/components/ui/progress-bar/progress-bar.tsx
@@ -6,7 +6,7 @@ interface IProgressBar {
 
 /** A horizontal meter filled to the given percentage. */
 const ProgressBar: React.FC<IProgressBar> = ({ progress }) => (
-  <div className='h-2.5 w-full rounded-full bg-gray-300 dark:bg-primary-800 overflow-hidden'>
+  <div className='h-2.5 w-full overflow-hidden rounded-full bg-gray-300 dark:bg-primary-800'>
     <div className='h-full bg-secondary-500' style={{ width: `${Math.floor(progress * 100)}%` }} />
   </div>
 );
diff --git a/app/soapbox/components/ui/select/select.tsx b/app/soapbox/components/ui/select/select.tsx
index e405fa2405..4c88ae5bd1 100644
--- a/app/soapbox/components/ui/select/select.tsx
+++ b/app/soapbox/components/ui/select/select.tsx
@@ -11,7 +11,7 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
   return (
     <select
       ref={ref}
-      className={`w-full pl-3 pr-10 py-2 text-base truncate border-gray-300 dark:border-gray-800 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:ring-primary-500 dark:focus:border-primary-500 sm:text-sm rounded-md disabled:opacity-50 ${className}`}
+      className={`w-full 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 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 ${className}`}
       {...filteredProps}
     >
       {children}
diff --git a/app/soapbox/components/ui/slider/slider.tsx b/app/soapbox/components/ui/slider/slider.tsx
index 009e7db5ef..4449f7f5bf 100644
--- a/app/soapbox/components/ui/slider/slider.tsx
+++ b/app/soapbox/components/ui/slider/slider.tsx
@@ -53,14 +53,14 @@ const Slider: React.FC<ISlider> = ({ value, onChange }) => {
 
   return (
     <div
-      className='inline-flex cursor-pointer h-6 relative transition'
+      className='relative inline-flex h-6 cursor-pointer transition'
       onMouseDown={handleMouseDown}
       ref={node}
     >
-      <div className='w-full h-1 bg-primary-200 dark:bg-primary-700 absolute top-1/2 -translate-y-1/2 rounded-full' />
-      <div className='h-1 bg-accent-500 absolute top-1/2 -translate-y-1/2 rounded-full' style={{ width: `${value * 100}%` }} />
+      <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='absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500' style={{ width: `${value * 100}%` }} />
       <span
-        className='bg-accent-500 absolute rounded-full w-3 h-3 -ml-1.5 top-1/2 -translate-y-1/2 z-10 shadow'
+        className='absolute top-1/2 z-10 -ml-1.5 h-3 w-3 -translate-y-1/2 rounded-full bg-accent-500 shadow'
         tabIndex={0}
         style={{ left: `${value * 100}%` }}
       />
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index 5d8151be66..60e89d25f3 100644
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/app/soapbox/components/ui/tabs/tabs.tsx
@@ -46,7 +46,7 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
         ref={ref}
       >
         <div
-          className='w-full h-[3px] bg-primary-200 dark:bg-primary-700 absolute'
+          className='absolute h-[3px] w-full bg-primary-200 dark:bg-primary-700'
           style={{ top }}
         />
         <div
diff --git a/app/soapbox/components/ui/tag-input/tag-input.tsx b/app/soapbox/components/ui/tag-input/tag-input.tsx
index e4f8548ab1..fe09bf0ee4 100644
--- a/app/soapbox/components/ui/tag-input/tag-input.tsx
+++ b/app/soapbox/components/ui/tag-input/tag-input.tsx
@@ -43,9 +43,9 @@ const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
   };
 
   return (
-    <div className='mt-1 relative shadow-sm flex-grow'>
+    <div className='relative mt-1 grow shadow-sm'>
       <HStack
-        className='p-2 pb-0 text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 block w-full sm:text-sm 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 rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800'
+        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'
         space={2}
         wrap
       >
@@ -56,7 +56,7 @@ const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
         ))}
 
         <input
-          className='p-1 mb-2 w-32 h-8 flex-grow bg-transparent outline-none'
+          className='mb-2 h-8 w-32 grow bg-transparent p-1 outline-none'
           value={input}
           placeholder={placeholder}
           onChange={e => setInput(e.target.value)}
diff --git a/app/soapbox/components/ui/tag-input/tag.tsx b/app/soapbox/components/ui/tag-input/tag.tsx
index d47b1d73bf..94ce5bbfb3 100644
--- a/app/soapbox/components/ui/tag-input/tag.tsx
+++ b/app/soapbox/components/ui/tag-input/tag.tsx
@@ -13,7 +13,7 @@ interface ITag {
 /** A single editable Tag (used by TagInput). */
 const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
   return (
-    <div className='inline-flex p-1 rounded bg-primary-500 items-center whitespace-nowrap'>
+    <div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
       <Text theme='white'>{tag}</Text>
 
       <IconButton
diff --git a/app/soapbox/components/ui/toast/toast.tsx b/app/soapbox/components/ui/toast/toast.tsx
index 1aec2a2b64..981df1132f 100644
--- a/app/soapbox/components/ui/toast/toast.tsx
+++ b/app/soapbox/components/ui/toast/toast.tsx
@@ -40,7 +40,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/circle-check.svg')}
-            className='w-6 h-6 text-success-500 dark:text-success-400'
+            className='h-6 w-6 text-success-500 dark:text-success-400'
             aria-hidden
           />
         );
@@ -48,7 +48,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/info-circle.svg')}
-            className='w-6 h-6 text-primary-600 dark:text-accent-blue'
+            className='h-6 w-6 text-primary-600 dark:text-accent-blue'
             aria-hidden
           />
         );
@@ -56,7 +56,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/alert-circle.svg')}
-            className='w-6 h-6 text-danger-600'
+            className='h-6 w-6 text-danger-600'
             aria-hidden
           />
         );
@@ -112,7 +112,7 @@ const Toast = (props: IToast) => {
       <HStack space={4} alignItems='start'>
         <HStack space={3} justifyContent='between' alignItems='start' className='w-0 flex-1'>
           <HStack space={3} alignItems='start' className='w-0 flex-1'>
-            <div className='flex-shrink-0'>
+            <div className='shrink-0'>
               {renderIcon()}
             </div>
 
@@ -126,15 +126,15 @@ const Toast = (props: IToast) => {
         </HStack>
 
         {/* Dismiss Button */}
-        <div className='flex flex-shrink-0 pt-0.5'>
+        <div className='flex shrink-0 pt-0.5'>
           <button
             type='button'
-            className='inline-flex rounded-md text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
+            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'
             onClick={dismissToast}
             data-testid='toast-dismiss'
           >
             <span className='sr-only'>Close</span>
-            <Icon src={require('@tabler/icons/x.svg')} className='w-5 h-5' />
+            <Icon src={require('@tabler/icons/x.svg')} className='h-5 w-5' />
           </button>
         </div>
       </HStack>
diff --git a/app/soapbox/components/ui/widget/widget.tsx b/app/soapbox/components/ui/widget/widget.tsx
index 39e4c2beba..e5441c57eb 100644
--- a/app/soapbox/components/ui/widget/widget.tsx
+++ b/app/soapbox/components/ui/widget/widget.tsx
@@ -49,7 +49,7 @@ const Widget: React.FC<IWidget> = ({
         <WidgetTitle title={title} />
         {action || (onActionClick && (
           <IconButton
-            className='w-6 h-6 ml-2 text-black dark:text-white rtl:rotate-180'
+            className='ml-2 h-6 w-6 text-black rtl:rotate-180 dark:text-white'
             src={actionIcon}
             onClick={onActionClick}
             title={actionTitle}
diff --git a/app/soapbox/components/upload-progress.tsx b/app/soapbox/components/upload-progress.tsx
index fe9b84797b..5cbb4e1b36 100644
--- a/app/soapbox/components/upload-progress.tsx
+++ b/app/soapbox/components/upload-progress.tsx
@@ -16,7 +16,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
     <HStack alignItems='center' space={2}>
       <Icon
         src={require('@tabler/icons/cloud-upload.svg')}
-        className='w-7 h-7 text-gray-500'
+        className='h-7 w-7 text-gray-500'
       />
 
       <Stack space={1}>
@@ -24,11 +24,11 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
           <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />
         </Text>
 
-        <div className='w-full h-1.5 rounded-lg bg-gray-200 relative'>
+        <div className='relative h-1.5 w-full rounded-lg bg-gray-200'>
           <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
             {({ width }) =>
               (<div
-                className='absolute left-0 top-0 h-1.5 bg-primary-600 rounded-lg'
+                className='absolute left-0 top-0 h-1.5 rounded-lg bg-primary-600'
                 style={{ width: `${width}%` }}
               />)
             }
diff --git a/app/soapbox/components/upload.tsx b/app/soapbox/components/upload.tsx
index 85f136378f..eaa5bf019d 100644
--- a/app/soapbox/components/upload.tsx
+++ b/app/soapbox/components/upload.tsx
@@ -141,7 +141,7 @@ const Upload: React.FC<IUpload> = ({
 
   const uploadIcon = mediaType === 'unknown' && (
     <Icon
-      className='h-16 w-16 mx-auto my-12 text-gray-800 dark:text-gray-200'
+      className='mx-auto my-12 h-16 w-16 text-gray-800 dark:text-gray-200'
       src={MIMETYPE_ICONS[mimeType || ''] || defaultIcon}
     />
   );
diff --git a/app/soapbox/features/about/index.tsx b/app/soapbox/features/about/index.tsx
index 9cc1e92955..8d1be5c2e0 100644
--- a/app/soapbox/features/about/index.tsx
+++ b/app/soapbox/features/about/index.tsx
@@ -38,7 +38,7 @@ const AboutPage: React.FC = () => {
     <div>
       <FormattedMessage id='about.also_available' defaultMessage='Available in:' />
       {' '}
-      <ul className='p-0 inline list-none'>
+      <ul className='inline list-none p-0'>
         <li className="inline after:content-['_·_']">
           <a href='#' onClick={() => setLocale(defaultLocale)}>
             {/* @ts-ignore */}
@@ -60,7 +60,7 @@ const AboutPage: React.FC = () => {
   );
 
   return (
-    <div className='prose dark:prose-invert mx-auto py-20'>
+    <div className='prose mx-auto py-20 dark:prose-invert'>
       <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
 
       {alsoAvailable}
diff --git a/app/soapbox/features/account-gallery/components/media-item.tsx b/app/soapbox/features/account-gallery/components/media-item.tsx
index f980c02175..4a664a03f5 100644
--- a/app/soapbox/features/account-gallery/components/media-item.tsx
+++ b/app/soapbox/features/account-gallery/components/media-item.tsx
@@ -71,7 +71,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
         src={attachment.preview_url}
         alt={attachment.description}
         style={{ objectPosition: `${x}% ${y}%` }}
-        className='w-full h-full rounded-lg overflow-hidden'
+        className='h-full w-full overflow-hidden rounded-lg'
       />
     );
   } else if (['gifv', 'video'].indexOf(attachment.type) !== -1) {
diff --git a/app/soapbox/features/account-timeline/components/moved-note.tsx b/app/soapbox/features/account-timeline/components/moved-note.tsx
index 7cc64f5ca3..a41e241d1b 100644
--- a/app/soapbox/features/account-timeline/components/moved-note.tsx
+++ b/app/soapbox/features/account-timeline/components/moved-note.tsx
@@ -17,7 +17,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
     <HStack className='mb-2' alignItems='center' space={1.5}>
       <Icon
         src={require('@tabler/icons/briefcase.svg')}
-        className='text-primary-600 dark:text-primary-400 flex-none'
+        className='flex-none text-primary-600 dark:text-primary-400'
       />
 
       <div className='truncate'>
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index 3f11f49817..368dce1b15 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -102,16 +102,16 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
   if (!account) {
     return (
-      <div className='-mt-4 -mx-4'>
+      <div className='-mx-4 -mt-4'>
         <div>
-          <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50' />
+          <div className='relative h-32 w-full bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
         </div>
 
         <div className='px-4 sm:px-6'>
           <HStack alignItems='bottom' space={5} className='-mt-12'>
-            <div className='flex relative'>
+            <div className='relative flex'>
               <div
-                className='h-24 w-24 bg-gray-400 rounded-full ring-4 ring-white dark:ring-gray-800'
+                className='h-24 w-24 rounded-full bg-gray-400 ring-4 ring-white dark:ring-gray-800'
               />
             </div>
           </HStack>
@@ -586,13 +586,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
   const menu = makeMenu();
 
   return (
-    <div className='-mt-4 -mx-4'>
+    <div className='-mx-4 -mt-4'>
       {(account.moved && typeof account.moved === 'object') && (
         <MovedNote from={account} to={account.moved} />
       )}
 
       <div>
-        <div className='relative flex flex-col justify-center h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50 overflow-hidden isolate'>
+        <div className='relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48'>
           {renderHeader()}
 
           <div className='absolute top-2 left-2'>
@@ -610,12 +610,12 @@ const Header: React.FC<IHeader> = ({ account }) => {
               <Avatar
                 src={account.avatar}
                 size={96}
-                className='relative h-24 w-24 rounded-full ring-4 ring-white dark:ring-primary-900 bg-white dark:bg-primary-900'
+                className='relative h-24 w-24 rounded-full bg-white ring-4 ring-white dark:bg-primary-900 dark:ring-primary-900'
               />
             </a>
           </div>
 
-          <div className='mt-6 flex justify-end w-full sm:pb-1'>
+          <div className='mt-6 flex w-full justify-end sm:pb-1'>
             <HStack space={2} className='mt-10'>
               <SubscriptionButton account={account} />
               {renderMessageButton()}
@@ -644,7 +644,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
                           <Comp key={idx} {...itemProps} className='group'>
                             <HStack space={3} alignItems='center'>
                               {menuItem.icon && (
-                                <SvgIcon src={menuItem.icon} className='h-5 w-5 text-gray-400 flex-none group-hover:text-gray-500' />
+                                <SvgIcon src={menuItem.icon} className='h-5 w-5 flex-none text-gray-400 group-hover:text-gray-500' />
                               )}
 
                               <div className='truncate'>{menuItem.text}</div>
diff --git a/app/soapbox/features/admin/components/dashcounter.tsx b/app/soapbox/features/admin/components/dashcounter.tsx
index a429865359..64abd36d8d 100644
--- a/app/soapbox/features/admin/components/dashcounter.tsx
+++ b/app/soapbox/features/admin/components/dashcounter.tsx
@@ -21,7 +21,7 @@ const DashCounter: React.FC<IDashCounter> = ({ count, label, to = '#', percent =
 
   return (
     <Link
-      className='bg-gray-200 dark:bg-gray-800 p-4 rounded flex flex-col items-center space-y-2 hover:-translate-y-1 transition-transform cursor-pointer'
+      className='flex cursor-pointer flex-col items-center space-y-2 rounded bg-gray-200 p-4 transition-transform hover:-translate-y-1 dark:bg-gray-800'
       to={to}
     >
       <Text align='center' size='2xl' weight='medium'>
@@ -45,7 +45,7 @@ interface IDashCounters {
 /** Wrapper container for dash counters. */
 const DashCounters: React.FC<IDashCounters> = ({ children }) => {
   return (
-    <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
+    <div className='grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3'>
       {children}
     </div>
   );
diff --git a/app/soapbox/features/admin/components/report.tsx b/app/soapbox/features/admin/components/report.tsx
index 210288fdc4..2d961d0955 100644
--- a/app/soapbox/features/admin/components/report.tsx
+++ b/app/soapbox/features/admin/components/report.tsx
@@ -135,7 +135,7 @@ const Report: React.FC<IReport> = ({ id }) => {
               <Link
                 to={`/@${reporterAcct}`}
                 title={reporterAcct}
-                className='text-primary-600 dark:text-accent-blue hover:underline'
+                className='text-primary-600 hover:underline dark:text-accent-blue'
               >
                 @{reporterAcct}
               </Link>
diff --git a/app/soapbox/features/admin/tabs/dashboard.tsx b/app/soapbox/features/admin/tabs/dashboard.tsx
index aa127f5a12..035feb3c8c 100644
--- a/app/soapbox/features/admin/tabs/dashboard.tsx
+++ b/app/soapbox/features/admin/tabs/dashboard.tsx
@@ -115,13 +115,13 @@ const Dashboard: React.FC = () => {
         <ListItem label={<FormattedMessage id='admin.software.frontend' defaultMessage='Frontend' />}>
           <a
             href={sourceCode.ref ? `${sourceCode.url}/tree/${sourceCode.ref}` : sourceCode.url}
-            className='flex space-x-1 items-center truncate'
+            className='flex items-center space-x-1 truncate'
             target='_blank'
           >
             <span>{sourceCode.displayName} {sourceCode.version}</span>
 
             <Icon
-              className='w-4 h-4'
+              className='h-4 w-4'
               src={require('@tabler/icons/external-link.svg')}
             />
           </a>
diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx
index 75e6497846..fffd594a5f 100644
--- a/app/soapbox/features/ads/components/ad.tsx
+++ b/app/soapbox/features/ads/components/ad.tsx
@@ -85,7 +85,7 @@ const Ad: React.FC<IAd> = ({ ad }) => {
                 </Text>
 
                 <Icon
-                  className='w-5 h-5 stroke-accent-500'
+                  className='h-5 w-5 stroke-accent-500'
                   src={require('@tabler/icons/timeline.svg')}
                 />
               </HStack>
diff --git a/app/soapbox/features/aliases/components/search.tsx b/app/soapbox/features/aliases/components/search.tsx
index 4a2ca3c760..6b60be5b23 100644
--- a/app/soapbox/features/aliases/components/search.tsx
+++ b/app/soapbox/features/aliases/components/search.tsx
@@ -40,11 +40,11 @@ const Search: React.FC = () => {
 
   return (
     <div className='flex items-center gap-1'>
-      <label className='flex-grow relative'>
+      <label className='relative grow'>
         <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
 
         <input
-          className='block w-full sm:text-sm dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 focus:ring-primary-500 focus:border-primary-500 rounded-full'
+          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'
           type='text'
           value={value}
           onChange={handleChange}
diff --git a/app/soapbox/features/auth-layout/index.tsx b/app/soapbox/features/auth-layout/index.tsx
index b792bc006f..2b32d25807 100644
--- a/app/soapbox/features/auth-layout/index.tsx
+++ b/app/soapbox/features/auth-layout/index.tsx
@@ -36,9 +36,9 @@ const AuthLayout = () => {
       <LandingGradient />
 
       <main className='relative h-full sm:flex sm:justify-center'>
-        <div className='w-full h-full flex flex-col sm:max-w-lg md:max-w-2xl lg:max-w-6xl'>
-          <header className='flex justify-between relative py-12 px-2 mb-auto'>
-            <div className='relative z-0 flex-1 px-2 lg:flex lg:items-center lg:justify-center lg:absolute lg:inset-0'>
+        <div className='flex h-full w-full flex-col sm:max-w-lg md:max-w-2xl lg:max-w-6xl'>
+          <header className='relative mb-auto flex justify-between py-12 px-2'>
+            <div className='relative z-0 flex-1 px-2 lg:absolute lg:inset-0 lg:flex lg:items-center lg:justify-center'>
               <Link to='/' className='cursor-pointer'>
                 <SiteLogo alt={instance.title} className='h-7' />
               </Link>
@@ -57,8 +57,8 @@ const AuthLayout = () => {
             )}
           </header>
 
-          <div className='flex flex-col justify-center items-center'>
-            <div className='pb-10 sm:mx-auto w-full sm:max-w-lg md:max-w-2xl'>
+          <div className='flex flex-col items-center justify-center'>
+            <div className='w-full pb-10 sm:mx-auto sm:max-w-lg md:max-w-2xl'>
               <Card variant='rounded' size='xl'>
                 <CardBody>
                   <Switch>
diff --git a/app/soapbox/features/auth-login/components/captcha.tsx b/app/soapbox/features/auth-login/components/captcha.tsx
index d967c76a2a..dde5710f88 100644
--- a/app/soapbox/features/auth-login/components/captcha.tsx
+++ b/app/soapbox/features/auth-login/components/captcha.tsx
@@ -109,7 +109,7 @@ const NativeCaptchaField: React.FC<INativeCaptchaField> = ({ captcha, onChange,
 
   return (
     <Stack space={2}>
-      <div className='flex items-center justify-center bg-white w-full border border-solid border-gray-300 dark:border-gray-600 rounded-md'>
+      <div className='flex w-full items-center justify-center rounded-md border border-solid border-gray-300 bg-white dark:border-gray-600'>
         <img alt='captcha' src={captcha.get('url')} onClick={onClick} />
       </div>
 
diff --git a/app/soapbox/features/auth-login/components/consumers-list.tsx b/app/soapbox/features/auth-login/components/consumers-list.tsx
index 95f9e6b3ee..784077af94 100644
--- a/app/soapbox/features/auth-login/components/consumers-list.tsx
+++ b/app/soapbox/features/auth-login/components/consumers-list.tsx
@@ -17,7 +17,7 @@ const ConsumersList: React.FC<IConsumersList> = () => {
 
   if (providers.size > 0) {
     return (
-      <Card className='p-4 sm:rounded-xl bg-gray-50 dark:bg-primary-800'>
+      <Card className='bg-gray-50 p-4 dark:bg-primary-800 sm:rounded-xl'>
         <Text size='xs' theme='muted'>
           <FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
         </Text>
diff --git a/app/soapbox/features/auth-login/components/login-form.tsx b/app/soapbox/features/auth-login/components/login-form.tsx
index 5b1f6f7334..6df7341011 100644
--- a/app/soapbox/features/auth-login/components/login-form.tsx
+++ b/app/soapbox/features/auth-login/components/login-form.tsx
@@ -27,11 +27,11 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
-        <h1 className='text-center font-bold text-2xl'><FormattedMessage id='login_form.header' defaultMessage='Sign In' /></h1>
+      <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'>
+        <h1 className='text-center text-2xl font-bold'><FormattedMessage id='login_form.header' defaultMessage='Sign In' /></h1>
       </div>
 
-      <Stack className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto' space={5}>
+      <Stack className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2' space={5}>
         <Form onSubmit={handleSubmit}>
           <FormGroup labelText={intl.formatMessage(messages.username)}>
             <Input
diff --git a/app/soapbox/features/auth-login/components/otp-auth-form.tsx b/app/soapbox/features/auth-login/components/otp-auth-form.tsx
index 9a51051120..1622e24824 100644
--- a/app/soapbox/features/auth-login/components/otp-auth-form.tsx
+++ b/app/soapbox/features/auth-login/components/otp-auth-form.tsx
@@ -48,13 +48,13 @@ const OtpAuthForm: React.FC<IOtpAuthForm> = ({ mfa_token }) => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
-        <h1 className='text-center font-bold text-2xl'>
+      <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-600 sm:-mx-10 sm:pb-10'>
+        <h1 className='text-center text-2xl font-bold'>
           <FormattedMessage id='login.otp_log_in' defaultMessage='OTP Login' />
         </h1>
       </div>
 
-      <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
         <Form onSubmit={handleSubmit}>
           <FormGroup
             labelText={intl.formatMessage(messages.otpCodeLabel)}
diff --git a/app/soapbox/features/auth-login/components/password-reset-confirm.tsx b/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
index 620090a452..c931ac788f 100644
--- a/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
+++ b/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
@@ -59,13 +59,13 @@ const PasswordResetConfirm = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
-        <h1 className='text-center font-bold text-2xl'>
+      <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-600 sm:-mx-10 sm:pb-10'>
+        <h1 className='text-center text-2xl font-bold'>
           <FormattedMessage id='reset_password.header' defaultMessage='Set New Password' />
         </h1>
       </div>
 
-      <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
         <Form onSubmit={handleSubmit}>
           <FormGroup labelText={<FormattedMessage id='reset_password.password.label' defaultMessage='Password' />} errors={renderErrors()}>
             <Input
diff --git a/app/soapbox/features/auth-login/components/password-reset.tsx b/app/soapbox/features/auth-login/components/password-reset.tsx
index ee4eadb2e3..85cedb03d2 100644
--- a/app/soapbox/features/auth-login/components/password-reset.tsx
+++ b/app/soapbox/features/auth-login/components/password-reset.tsx
@@ -35,13 +35,13 @@ const PasswordReset = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
-        <h1 className='text-center font-bold text-2xl'>
+      <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-600 sm:-mx-10 sm:pb-10'>
+        <h1 className='text-center text-2xl font-bold'>
           <FormattedMessage id='password_reset.header' defaultMessage='Reset Password' />
         </h1>
       </div>
 
-      <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
         <Form onSubmit={handleSubmit}>
           <FormGroup labelText={intl.formatMessage(messages.nicknameOrEmail)}>
             <Input
diff --git a/app/soapbox/features/auth-token-list/index.tsx b/app/soapbox/features/auth-token-list/index.tsx
index db242ebe22..9548144492 100644
--- a/app/soapbox/features/auth-token-list/index.tsx
+++ b/app/soapbox/features/auth-token-list/index.tsx
@@ -41,7 +41,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
   };
 
   return (
-    <div className='p-4 rounded-lg bg-gray-100 dark:bg-primary-800'>
+    <div className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
       <Stack space={2}>
         <Stack>
           <Text size='md' weight='medium'>{token.app_name}</Text>
@@ -85,7 +85,7 @@ const AuthTokenList: React.FC = () => {
   }, []);
 
   const body = tokens ? (
-    <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
+    <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
       {tokens.map((token) => (
         <AuthToken key={token.id} token={token} isCurrent={token.id === currentTokenId} />
       ))}
diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx
index 358fbb6f3b..a703d772f3 100644
--- a/app/soapbox/features/chats/components/chat-composer.tsx
+++ b/app/soapbox/features/chats/components/chat-composer.tsx
@@ -156,7 +156,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
 
       <HStack alignItems='stretch' justifyContent='between' space={4}>
         {features.chatsMedia && (
-          <Stack justifyContent='end' alignItems='center' className='w-10 mb-1.5'>
+          <Stack justifyContent='end' alignItems='center' className='mb-1.5 w-10'>
             <UploadButton
               onSelectFile={onSelectFile}
               resetFileKey={resetFileKey}
@@ -205,7 +205,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
           </Combobox>
         </Stack>
 
-        <Stack space={2} justifyContent='end' alignItems='center' className='w-10 mb-1.5'>
+        <Stack space={2} justifyContent='end' alignItems='center' className='mb-1.5 w-10'>
           {isOverCharacterLimit ? (
             <Text size='sm' theme='danger'>{overLimitText}</Text>
           ) : null}
diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index 6099955e72..795a29a742 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/app/soapbox/features/chats/components/chat-list-item.tsx
@@ -68,7 +68,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
       role='button'
       key={chat.id}
       onClick={() => onClick(chat)}
-      className='group px-2 py-3 w-full flex flex-col rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 focus:shadow-inset-ring'
+      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'
       data-testid='chat-list-item'
     >
       <HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
@@ -76,7 +76,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
           <Avatar src={chat.account?.avatar} size={40} className='flex-none' />
 
           <Stack alignItems='start' className='overflow-hidden'>
-            <div className='flex items-center space-x-1 flex-grow w-full'>
+            <div className='flex w-full grow items-center space-x-1'>
               <Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
               {chat.account?.verified && <VerificationBadge />}
             </div>
@@ -88,7 +88,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
                 weight='medium'
                 theme='muted'
                 truncate
-                className='w-full h-5 pointer-events-none italic'
+                className='pointer-events-none h-5 w-full italic'
                 data-testid='chat-last-message'
               >
                 {intl.formatMessage(isBlocked ? messages.blockedYou : messages.blocking)}
@@ -102,7 +102,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
                     weight='medium'
                     theme={chat.last_message.unread ? 'default' : 'muted'}
                     truncate
-                    className='w-full h-5 truncate-child pointer-events-none'
+                    className='truncate-child pointer-events-none h-5 w-full'
                     data-testid='chat-last-message'
                     dangerouslySetInnerHTML={{ __html: chat.last_message?.content }}
                   />
@@ -114,12 +114,12 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
 
         <HStack alignItems='center' space={2}>
           {features.chatsDelete && (
-            <div className='text-gray-600 hidden group-hover:block hover:text-gray-100'>
+            <div className='hidden text-gray-600 hover:text-gray-100 group-hover:block'>
               <DropdownMenuContainer items={menu}>
                 <IconButton
                   src={require('@tabler/icons/dots.svg')}
                   title='Settings'
-                  className='text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
+                  className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
                   iconClassName='w-4 h-4'
                 />
               </DropdownMenuContainer>
@@ -130,7 +130,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
             <>
               {chat.last_message.unread && (
                 <div
-                  className='w-2 h-2 rounded-full bg-secondary-500'
+                  className='h-2 w-2 rounded-full bg-secondary-500'
                   data-testid='chat-unread-indicator'
                 />
               )}
diff --git a/app/soapbox/features/chats/components/chat-message-list-intro.tsx b/app/soapbox/features/chats/components/chat-message-list-intro.tsx
index 760afc200c..a827114c8f 100644
--- a/app/soapbox/features/chats/components/chat-message-list-intro.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list-intro.tsx
@@ -106,8 +106,8 @@ const ChatMessageListIntro = () => {
           </Button>
         </HStack>
       ) : (
-        <HStack justifyContent='center' alignItems='center' space={1} className='flex-shrink-0'>
-          <Icon src={require('@tabler/icons/clock.svg')} className='text-gray-600 w-4 h-4' />
+        <HStack justifyContent='center' alignItems='center' space={1} className='shrink-0'>
+          <Icon src={require('@tabler/icons/clock.svg')} className='h-4 w-4 text-gray-600' />
           {chat.message_expiration && (
             <Text size='sm' theme='muted'>
               {intl.formatMessage(messages.messageLifespan, { day: secondsToDays(chat.message_expiration) })}
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 613a5eed0a..c66418aae2 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -305,7 +305,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                   <IconButton
                     src={require('@tabler/icons/dots.svg')}
                     title={intl.formatMessage(messages.more)}
-                    className='text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
+                    className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
                     iconClassName='w-4 h-4'
                   />
                 </DropdownMenuContainer>
@@ -379,12 +379,12 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                 {(isMyMessage && features.chatsReadReceipts) ? (
                   <>
                     {isRead ? (
-                      <span className='rounded-full flex flex-col items-center justify-center p-0.5 bg-primary-500 text-white dark:bg-primary-400 dark:text-primary-900 border border-solid border-primary-500 dark:border-primary-400'>
-                        <Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='w-2.5 h-2.5' />
+                      <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-primary-500 p-0.5 text-white dark:border-primary-400 dark:bg-primary-400 dark:text-primary-900'>
+                        <Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='h-2.5 w-2.5' />
                       </span>
                     ) : (
-                      <span className='rounded-full flex flex-col items-center justify-center p-0.5 bg-transparent text-primary-500 dark:text-primary-400 border border-solid border-primary-500 dark:border-primary-400'>
-                        <Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='w-2.5 h-2.5' />
+                      <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-transparent p-0.5 text-primary-500 dark:border-primary-400 dark:text-primary-400'>
+                        <Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='h-2.5 w-2.5' />
                       </span>
                     )}
                   </>
@@ -419,7 +419,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
 
   if (isBlocked) {
     return (
-      <Stack alignItems='center' justifyContent='center' className='h-full flex-grow'>
+      <Stack alignItems='center' justifyContent='center' className='h-full grow'>
         <Stack alignItems='center' space={2}>
           <Avatar src={chat.account.avatar} size={75} />
           <Text align='center'>
@@ -436,7 +436,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
 
   if (isError) {
     return (
-      <Stack alignItems='center' justifyContent='center' className='h-full flex-grow'>
+      <Stack alignItems='center' justifyContent='center' className='h-full grow'>
         <Stack space={4}>
           <Stack space={1}>
             <Text size='lg' weight='bold' align='center'>
@@ -459,7 +459,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
 
   if (isLoading) {
     return (
-      <div className='flex-grow flex flex-col justify-end pb-4'>
+      <div className='flex grow flex-col justify-end pb-4'>
         <div className='px-4'>
           <PlaceholderChatMessage isMyMessage />
           <PlaceholderChatMessage />
@@ -472,8 +472,8 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
   }
 
   return (
-    <div className='h-full flex flex-col flex-grow space-y-6'>
-      <div className='flex-grow flex flex-col justify-end'>
+    <div className='flex h-full grow flex-col space-y-6'>
+      <div className='flex grow flex-col justify-end'>
         <Virtuoso
           ref={node}
           alignToBottom
diff --git a/app/soapbox/features/chats/components/chat-page/chat-page.tsx b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
index dbe50d3855..20ddafd3e1 100644
--- a/app/soapbox/features/chats/components/chat-page/chat-page.tsx
+++ b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
@@ -60,11 +60,11 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
     <div
       ref={containerRef}
       style={{ height }}
-      className='h-screen bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden sm:rounded-t-xl'
+      className='h-screen overflow-hidden bg-white text-gray-900 shadow-lg dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:rounded-t-xl'
     >
       {isOnboarded ? (
         <div
-          className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'
+          className='grid h-full grid-cols-9 overflow-hidden dark:divide-x-2 dark:divide-solid dark:divide-gray-800'
           data-testid='chat-page'
         >
           <Stack
diff --git a/app/soapbox/features/chats/components/chat-page/components/blankslate-empty.tsx b/app/soapbox/features/chats/components/chat-page/components/blankslate-empty.tsx
index f2d8a38f51..18f177f24f 100644
--- a/app/soapbox/features/chats/components/chat-page/components/blankslate-empty.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/blankslate-empty.tsx
@@ -16,7 +16,7 @@ const BlankslateEmpty: React.FC<IBlankslate> = () => {
   };
 
   return (
-    <Stack space={6} alignItems='center' justifyContent='center' className='p-6 h-full'>
+    <Stack space={6} alignItems='center' justifyContent='center' className='h-full p-6'>
       <Stack space={2} className='max-w-sm'>
         <Text size='2xl' weight='bold' tag='h2' align='center'>
           <FormattedMessage
diff --git a/app/soapbox/features/chats/components/chat-page/components/blankslate-with-chats.tsx b/app/soapbox/features/chats/components/chat-page/components/blankslate-with-chats.tsx
index 4285df0b9d..956672a192 100644
--- a/app/soapbox/features/chats/components/chat-page/components/blankslate-with-chats.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/blankslate-with-chats.tsx
@@ -13,7 +13,7 @@ const BlankslateWithChats = () => {
   };
 
   return (
-    <Stack space={6} alignItems='center' justifyContent='center' className='p-6 h-full'>
+    <Stack space={6} alignItems='center' justifyContent='center' className='h-full p-6'>
       <Stack space={2} className='max-w-sm'>
         <Text size='2xl' weight='bold' tag='h2' align='center'>
           <FormattedMessage
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
index da838f0cb4..e365c49cc7 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -116,12 +116,12 @@ const ChatPageMain = () => {
 
   return (
     <Stack className='h-full overflow-hidden'>
-      <HStack alignItems='center' justifyContent='between' space={2} className='px-4 py-4 w-full'>
+      <HStack alignItems='center' justifyContent='between' space={2} className='w-full p-4'>
         <HStack alignItems='center' space={2} className='overflow-hidden'>
           <HStack alignItems='center'>
             <IconButton
               src={require('@tabler/icons/arrow-left.svg')}
-              className='sm:hidden h-7 w-7 mr-2 sm:mr-0'
+              className='mr-2 h-7 w-7 sm:mr-0 sm:hidden'
               onClick={() => history.push('/chats')}
             />
 
@@ -130,8 +130,8 @@ const ChatPageMain = () => {
             </Link>
           </HStack>
 
-          <Stack alignItems='start' className='overflow-hidden h-11'>
-            <div className='flex items-center space-x-1 flex-grow w-full'>
+          <Stack alignItems='start' className='h-11 overflow-hidden'>
+            <div className='flex w-full grow items-center space-x-1'>
               <Link to={`/@${chat.account.acct}`}>
                 <Text weight='bold' size='sm' align='left' truncate>
                   {chat.account.display_name || `@${chat.account.username}`}
@@ -212,8 +212,8 @@ const ChatPageMain = () => {
                   onSelect={isBlocking ? handleUnblockUser : handleBlockUser}
                   className='!px-0 hover:!bg-transparent'
                 >
-                  <div className='w-full flex items-center space-x-2 font-bold text-sm text-primary-500 dark:text-accent-blue'>
-                    <Icon src={require('@tabler/icons/ban.svg')} className='w-5 h-5' />
+                  <div className='flex w-full items-center space-x-2 text-sm font-bold text-primary-500 dark:text-accent-blue'>
+                    <Icon src={require('@tabler/icons/ban.svg')} className='h-5 w-5' />
                     <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
                   </div>
                 </MenuItem>
@@ -224,8 +224,8 @@ const ChatPageMain = () => {
                     onSelect={handleLeaveChat}
                     className='!px-0 hover:!bg-transparent'
                   >
-                    <div className='w-full flex items-center space-x-2 font-bold text-sm text-danger-600 dark:text-danger-500'>
-                      <Icon src={require('@tabler/icons/logout.svg')} className='w-5 h-5' />
+                    <div className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600 dark:text-danger-500'>
+                      <Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' />
                       <span>{intl.formatMessage(messages.leaveChat)}</span>
                     </div>
                   </MenuItem>
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx
index db2f46a221..0b1e0de8d0 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-new.tsx
@@ -20,11 +20,11 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
 
   return (
     <Stack className='h-full space-y-4'>
-      <Stack className='flex-grow pt-6 px-4 sm:px-6'>
+      <Stack className='grow px-4 pt-6 sm:px-6'>
         <HStack alignItems='center'>
           <IconButton
             src={require('@tabler/icons/arrow-left.svg')}
-            className='sm:hidden h-7 w-7 mr-2 sm:mr-0'
+            className='mr-2 h-7 w-7 sm:mr-0 sm:hidden'
             onClick={() => history.push('/chats')}
           />
 
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-settings.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-settings.tsx
index 7a9a813fed..04566f7ca1 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-settings.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-settings.tsx
@@ -47,11 +47,11 @@ const ChatPageSettings = () => {
   };
 
   return (
-    <Stack className='h-full py-6 px-4 sm:p-6 space-y-8'>
+    <Stack className='h-full space-y-8 py-6 px-4 sm:p-6'>
       <HStack alignItems='center'>
         <IconButton
           src={require('@tabler/icons/arrow-left.svg')}
-          className='sm:hidden h-7 w-7 mr-2 sm:mr-0'
+          className='mr-2 h-7 w-7 sm:mr-0 sm:hidden'
           onClick={() => history.push('/chats')}
         />
 
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index 6f19948dee..89e586968e 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -64,7 +64,7 @@ const ChatPageSidebar = () => {
         )}
       </Stack>
 
-      <Stack className='flex-grow h-full'>
+      <Stack className='h-full grow'>
         <ChatList
           onClickChat={handleClickChat}
           searchValue={debouncedSearch}
diff --git a/app/soapbox/features/chats/components/chat-page/components/welcome.tsx b/app/soapbox/features/chats/components/chat-page/components/welcome.tsx
index 376d206272..090d3326d2 100644
--- a/app/soapbox/features/chats/components/chat-page/components/welcome.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/welcome.tsx
@@ -36,9 +36,9 @@ const Welcome = () => {
   };
 
   return (
-    <Stack className='py-20 px-4 sm:px-0 h-full overflow-y-auto' data-testid='chats-welcome'>
-      <div className='w-full sm:w-3/5 xl:w-2/5 mx-auto mb-2.5'>
-        <Text align='center' weight='bold' className='mb-6 text-2xl md:text-3xl leading-8'>
+    <Stack className='h-full overflow-y-auto py-20 px-4 sm:px-0' data-testid='chats-welcome'>
+      <div className='mx-auto mb-2.5 w-full sm:w-3/5 xl:w-2/5'>
+        <Text align='center' weight='bold' className='mb-6 text-2xl leading-8 md:text-3xl'>
           {intl.formatMessage(messages.title, { br: <br /> })}
         </Text>
 
@@ -47,7 +47,7 @@ const Welcome = () => {
         </Text>
       </div>
 
-      <Form onSubmit={handleSubmit} className='space-y-8 w-full sm:w-2/3 lg:w-3/5 sm:mx-auto'>
+      <Form onSubmit={handleSubmit} className='w-full space-y-8 sm:mx-auto sm:w-2/3 lg:w-3/5'>
         <Stack space={2}>
           <CardTitle title={<FormattedMessage id='chat.page_settings.privacy' defaultMessage='Privacy' />} />
 
diff --git a/app/soapbox/features/chats/components/chat-pane/blankslate.tsx b/app/soapbox/features/chats/components/chat-pane/blankslate.tsx
index d817a8f488..abef2d1941 100644
--- a/app/soapbox/features/chats/components/chat-pane/blankslate.tsx
+++ b/app/soapbox/features/chats/components/chat-pane/blankslate.tsx
@@ -20,11 +20,11 @@ const Blankslate = ({ onSearch }: IBlankslate) => {
     <Stack
       alignItems='center'
       justifyContent='center'
-      className='h-full flex-grow'
+      className='h-full grow'
       data-testid='chat-pane-blankslate'
     >
       <Stack space={4}>
-        <Stack space={1} className='max-w-[80%] mx-auto'>
+        <Stack space={1} className='mx-auto max-w-[80%]'>
           <Text size='lg' weight='bold' align='center'>
             {intl.formatMessage(messages.title)}
           </Text>
diff --git a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
index 59953b54c2..026eb08e4f 100644
--- a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
+++ b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
@@ -45,7 +45,7 @@ const ChatPane = () => {
   const renderBody = () => {
     if (hasSearchValue || Number(chats?.length) > 0 || isLoading) {
       return (
-        <Stack space={4} className='flex-grow h-full'>
+        <Stack space={4} className='h-full grow'>
           {features.chatsSearch && (
             <div className='px-4'>
               <ChatSearchInput
diff --git a/app/soapbox/features/chats/components/chat-search/blankslate.tsx b/app/soapbox/features/chats/components/chat-search/blankslate.tsx
index ed2583e9f6..f4ffd748ba 100644
--- a/app/soapbox/features/chats/components/chat-search/blankslate.tsx
+++ b/app/soapbox/features/chats/components/chat-search/blankslate.tsx
@@ -12,7 +12,7 @@ const Blankslate = () => {
   const intl = useIntl();
 
   return (
-    <Stack justifyContent='center' alignItems='center' space={2} className='h-full w-2/3 mx-auto'>
+    <Stack justifyContent='center' alignItems='center' space={2} className='mx-auto h-full w-2/3'>
       <Text weight='bold' size='lg' align='center'>
         {intl.formatMessage(messages.title)}
       </Text>
diff --git a/app/soapbox/features/chats/components/chat-search/chat-search.tsx b/app/soapbox/features/chats/components/chat-search/chat-search.tsx
index c10dc61c53..8197ac5f54 100644
--- a/app/soapbox/features/chats/components/chat-search/chat-search.tsx
+++ b/app/soapbox/features/chats/components/chat-search/chat-search.tsx
@@ -88,7 +88,7 @@ const ChatSearch = (props: IChatSearch) => {
   };
 
   return (
-    <Stack space={4} className='flex-grow h-full'>
+    <Stack space={4} className='h-full grow'>
       <div className='px-4'>
         <Input
           data-testid='search'
@@ -111,7 +111,7 @@ const ChatSearch = (props: IChatSearch) => {
         />
       </div>
 
-      <Stack className='flex-grow'>
+      <Stack className='grow'>
         {renderBody()}
       </Stack>
     </Stack>
diff --git a/app/soapbox/features/chats/components/chat-search/empty-results-blankslate.tsx b/app/soapbox/features/chats/components/chat-search/empty-results-blankslate.tsx
index 3e360347ee..4a890f699a 100644
--- a/app/soapbox/features/chats/components/chat-search/empty-results-blankslate.tsx
+++ b/app/soapbox/features/chats/components/chat-search/empty-results-blankslate.tsx
@@ -12,7 +12,7 @@ const EmptyResultsBlankslate = () => {
   const intl = useIntl();
 
   return (
-    <Stack justifyContent='center' alignItems='center' space={2} className='h-full w-2/3 mx-auto'>
+    <Stack justifyContent='center' alignItems='center' space={2} className='mx-auto h-full w-2/3'>
       <Text weight='bold' size='lg' align='center' data-testid='no-results'>
         {intl.formatMessage(messages.title)}
       </Text>
diff --git a/app/soapbox/features/chats/components/chat-search/results.tsx b/app/soapbox/features/chats/components/chat-search/results.tsx
index ae1caa4e14..7bd7ac0e05 100644
--- a/app/soapbox/features/chats/components/chat-search/results.tsx
+++ b/app/soapbox/features/chats/components/chat-search/results.tsx
@@ -29,7 +29,7 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
     <button
       key={account.id}
       type='button'
-      className='px-2 py-3 w-full rounded-lg flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800'
+      className='flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 dark:hover:bg-gray-800'
       onClick={() => onSelect(account.id)}
       data-testid='account'
     >
@@ -37,7 +37,7 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
         <Avatar src={account.avatar} size={40} />
 
         <Stack alignItems='start'>
-          <div className='flex items-center space-x-1 flex-grow'>
+          <div className='flex grow items-center space-x-1'>
             <Text weight='bold' size='sm' truncate>{account.display_name}</Text>
             {account.verified && <VerificationBadge />}
           </div>
@@ -48,7 +48,7 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
   ), []);
 
   return (
-    <div className='relative flex-grow'>
+    <div className='relative grow'>
       <Virtuoso
         data={accounts}
         itemContent={(index, chat) => (
diff --git a/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx b/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
index 20967d1715..36c4a4f808 100644
--- a/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -31,9 +31,9 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
   }
 
   return (
-    <HStack {...rest} alignItems='center' justifyContent='between' className='rounded-t-xl h-16 py-3 px-4'>
+    <HStack {...rest} alignItems='center' justifyContent='between' className='h-16 rounded-t-xl py-3 px-4'>
       <ButtonComp
-        className='flex-grow flex items-center flex-row space-x-1 h-16'
+        className='flex h-16 grow flex-row items-center space-x-1'
         data-testid='title'
         {...buttonProps}
       >
@@ -47,7 +47,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
               ({unreadCount})
             </Text>
 
-            <div className='bg-accent-300 w-2.5 h-2.5 rounded-full' />
+            <div className='h-2.5 w-2.5 rounded-full bg-accent-300' />
           </HStack>
         )}
       </ButtonComp>
diff --git a/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx b/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx
index bc63b2830f..5a38778e05 100644
--- a/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx
+++ b/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx
@@ -107,7 +107,7 @@ const ChatSettings = () => {
         }
       />
 
-      <Stack space={4} className='w-5/6 mx-auto'>
+      <Stack space={4} className='mx-auto w-5/6'>
         <HStack alignItems='center' space={3}>
           <Avatar src={chat.account.avatar_static} size={50} />
           <Stack>
@@ -135,14 +135,14 @@ const ChatSettings = () => {
         )}
 
         <Stack space={5}>
-          <button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='w-full flex items-center space-x-2 font-bold text-sm text-primary-600 dark:text-accent-blue'>
-            <Icon src={require('@tabler/icons/ban.svg')} className='w-5 h-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'>
+            <Icon src={require('@tabler/icons/ban.svg')} className='h-5 w-5' />
             <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
           </button>
 
           {features.chatsDelete && (
-            <button onClick={handleLeaveChat} className='w-full flex items-center space-x-2 font-bold text-sm text-danger-600'>
-              <Icon src={require('@tabler/icons/logout.svg')} className='w-5 h-5' />
+            <button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
+              <Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' />
               <span>{intl.formatMessage(messages.leaveChat)}</span>
             </button>
           )}
diff --git a/app/soapbox/features/chats/components/chat-widget/chat-window.tsx b/app/soapbox/features/chats/components/chat-widget/chat-window.tsx
index 22ae66a7aa..e2476eb93d 100644
--- a/app/soapbox/features/chats/components/chat-widget/chat-window.tsx
+++ b/app/soapbox/features/chats/components/chat-widget/chat-window.tsx
@@ -87,7 +87,7 @@ const ChatWindow = () => {
 
               <Stack alignItems='start'>
                 <LinkWrapper enabled={isOpen} to={`/@${chat.account.acct}`}>
-                  <div className='flex items-center space-x-1 flex-grow'>
+                  <div className='flex grow items-center space-x-1'>
                     <Text size='sm' weight='bold' truncate>{chat.account.display_name || `@${chat.account.acct}`}</Text>
                     {chat.account.verified && <VerificationBadge />}
                   </div>
@@ -113,7 +113,7 @@ const ChatWindow = () => {
         onToggle={toggleChatPane}
       />
 
-      <Stack className='overflow-hidden flex-grow h-full' space={2}>
+      <Stack className='h-full grow overflow-hidden' space={2}>
         <Chat chat={chat} inputRef={inputRef} />
       </Stack>
     </>
diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index 73f735e861..fc159ae671 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -160,7 +160,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
 
   return (
     <Stack className={classNames('overflow-hidden flex flex-grow', className)} onMouseOver={handleMouseOver}>
-      <div className='flex-grow h-full overflow-hidden flex justify-center'>
+      <div className='flex h-full grow justify-center overflow-hidden'>
         <ChatMessageList chat={chat} />
       </div>
 
diff --git a/app/soapbox/features/compose/components/polls/duration-selector.tsx b/app/soapbox/features/compose/components/polls/duration-selector.tsx
index 10027824ef..16c54d3e10 100644
--- a/app/soapbox/features/compose/components/polls/duration-selector.tsx
+++ b/app/soapbox/features/compose/components/polls/duration-selector.tsx
@@ -42,7 +42,7 @@ const DurationSelector = ({ onDurationChange }: IDurationSelector) => {
   }, [value]);
 
   return (
-    <div className='grid grid-cols-1 gap-y-2 gap-x-2 sm:grid-cols-3'>
+    <div className='grid grid-cols-1 gap-2 sm:grid-cols-3'>
       <div className='sm:col-span-1'>
         <Select
           value={days}
diff --git a/app/soapbox/features/compose/components/polls/poll-form.tsx b/app/soapbox/features/compose/components/polls/poll-form.tsx
index 5780cab1bd..2d3233f8da 100644
--- a/app/soapbox/features/compose/components/polls/poll-form.tsx
+++ b/app/soapbox/features/compose/components/polls/poll-form.tsx
@@ -79,7 +79,7 @@ const Option: React.FC<IOption> = ({
         </div>
 
         <AutosuggestInput
-          className='rounded-md dark:!bg-transparent !bg-transparent'
+          className='rounded-md !bg-transparent dark:!bg-transparent'
           placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
           maxLength={maxChars}
           value={title}
diff --git a/app/soapbox/features/compose/components/reply-indicator.tsx b/app/soapbox/features/compose/components/reply-indicator.tsx
index 86fd3a376f..5c11a1ff8c 100644
--- a/app/soapbox/features/compose/components/reply-indicator.tsx
+++ b/app/soapbox/features/compose/components/reply-indicator.tsx
@@ -33,7 +33,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
   }
 
   return (
-    <Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-gray-800'>
+    <Stack space={2} className='rounded-lg bg-gray-100 p-4 dark:bg-gray-800'>
       <AccountContainer
         {...actions}
         id={status.getIn(['account', 'id']) as string}
@@ -44,7 +44,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
       />
 
       <Text
-        className='break-words status__content'
+        className='status__content break-words'
         size='sm'
         dangerouslySetInnerHTML={{ __html: status.contentHtml }}
         direction={isRtl(status.search_index) ? 'rtl' : 'ltr'}
diff --git a/app/soapbox/features/compose/components/search-results.tsx b/app/soapbox/features/compose/components/search-results.tsx
index 225308d6b1..0e5db15c91 100644
--- a/app/soapbox/features/compose/components/search-results.tsx
+++ b/app/soapbox/features/compose/components/search-results.tsx
@@ -236,7 +236,7 @@ const SearchResults = () => {
   return (
     <>
       {filterByAccount ? (
-        <HStack className='mb-4 pb-4 px-2 border-solid border-b border-gray-200 dark:border-gray-800' space={2}>
+        <HStack className='mb-4 border-b border-solid border-gray-200 px-2 pb-4 dark:border-gray-800' space={2}>
           <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleUnsetAccount} />
           <Text>
             <FormattedMessage
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index 5c7db5f05b..9e1c21a44c 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -149,7 +149,7 @@ const Search = (props: ISearch) => {
         <div
           role='button'
           tabIndex={0}
-          className='absolute inset-y-0 right-0 rtl:left-0 rtl:right-auto px-3 flex items-center cursor-pointer'
+          className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto'
           onClick={handleClear}
         >
           <SvgIcon
diff --git a/app/soapbox/features/compose/components/spoiler-input.tsx b/app/soapbox/features/compose/components/spoiler-input.tsx
index 139960b68a..5aeb6caa76 100644
--- a/app/soapbox/features/compose/components/spoiler-input.tsx
+++ b/app/soapbox/features/compose/components/spoiler-input.tsx
@@ -62,7 +62,7 @@ const SpoilerInput = React.forwardRef<AutosuggestInput, ISpoilerInput>(({
           onSuggestionSelected={onSuggestionSelected}
           searchTokens={[':']}
           id='cw-spoiler-input'
-          className='rounded-md dark:!bg-transparent !bg-transparent'
+          className='rounded-md !bg-transparent dark:!bg-transparent'
           ref={ref}
           autoFocus
         />
diff --git a/app/soapbox/features/crypto-donate/components/crypto-address.tsx b/app/soapbox/features/crypto-donate/components/crypto-address.tsx
index 31add76723..444d306c78 100644
--- a/app/soapbox/features/crypto-donate/components/crypto-address.tsx
+++ b/app/soapbox/features/crypto-donate/components/crypto-address.tsx
@@ -33,7 +33,7 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
     <Stack>
       <HStack alignItems='center' className='mb-1'>
         <CryptoIcon
-          className='flex items-start justify-center w-6 mr-2.5 rtl:ml-2.5 rtl:mr-0'
+          className='mr-2.5 flex w-6 items-start justify-center rtl:ml-2.5 rtl:mr-0'
           ticker={ticker}
           title={title}
         />
@@ -41,12 +41,12 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
         <Text weight='bold'>{title || ticker.toUpperCase()}</Text>
 
         <HStack alignItems='center' className='ml-auto'>
-          <a className='text-gray-500 ml-1 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
+          <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
             <Icon src={require('@tabler/icons/qrcode.svg')} size={20} />
           </a>
 
           {explorerUrl && (
-            <a className='text-gray-500 ml-1 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
+            <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
               <Icon src={require('@tabler/icons/external-link.svg')} size={20} />
             </a>
           )}
diff --git a/app/soapbox/features/developers/developers-menu.tsx b/app/soapbox/features/developers/developers-menu.tsx
index 61e8c1de6c..455ff75b69 100644
--- a/app/soapbox/features/developers/developers-menu.tsx
+++ b/app/soapbox/features/developers/developers-menu.tsx
@@ -55,7 +55,7 @@ const Developers: React.FC = () => {
   return (
     <>
       <Column label={intl.formatMessage(messages.heading)}>
-        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
+        <div className='grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3'>
           <DashWidget to='/developers/apps/create'>
             <SvgIcon src={require('@tabler/icons/apps.svg')} className='text-gray-700 dark:text-gray-600' />
 
diff --git a/app/soapbox/features/developers/service-worker-info.tsx b/app/soapbox/features/developers/service-worker-info.tsx
index 9b77515876..4f33b12ab6 100644
--- a/app/soapbox/features/developers/service-worker-info.tsx
+++ b/app/soapbox/features/developers/service-worker-info.tsx
@@ -116,10 +116,10 @@ const ServiceWorkerInfo: React.FC<IServiceWorkerInfo> = () => {
 
           {url && (
             <ListItem label={intl.formatMessage(messages.url)}>
-              <a href={url} target='_blank' className='flex space-x-1 items-center truncate'>
+              <a href={url} target='_blank' className='flex items-center space-x-1 truncate'>
                 <span className='truncate'>{url}</span>
                 <Icon
-                  className='w-4 h-4'
+                  className='h-4 w-4'
                   src={require('@tabler/icons/external-link.svg')}
                 />
               </a>
diff --git a/app/soapbox/features/directory/components/account-card.tsx b/app/soapbox/features/directory/components/account-card.tsx
index b5cb6fc175..b0d3e5e6eb 100644
--- a/app/soapbox/features/directory/components/account-card.tsx
+++ b/app/soapbox/features/directory/components/account-card.tsx
@@ -28,7 +28,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 dark:divide-primary-700 rounded-lg bg-white dark:bg-primary-800 text-center shadow'>
+    <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='relative'>
         {followedBy && (
           <div className='absolute top-2.5 left-2.5'>
@@ -46,7 +46,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
         <img
           src={autoPlayGif ? account.header : account.header_static}
           alt=''
-          className='object-cover h-32 w-full rounded-t-lg'
+          className='h-32 w-full rounded-t-lg object-cover'
         />
       </div>
 
diff --git a/app/soapbox/features/edit-profile/components/profile-preview.tsx b/app/soapbox/features/edit-profile/components/profile-preview.tsx
index c8df16dd1a..55e26dcfd0 100644
--- a/app/soapbox/features/edit-profile/components/profile-preview.tsx
+++ b/app/soapbox/features/edit-profile/components/profile-preview.tsx
@@ -16,8 +16,8 @@ const ProfilePreview: React.FC<IProfilePreview> = ({ account }) => {
   const { displayFqn } = useSoapboxConfig();
 
   return (
-    <div className='bg-white dark:bg-gray-800 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden'>
-      <div className='relative overflow-hidden isolate w-full h-32 md:rounded-t-lg bg-gray-200 dark:bg-gray-900/50'>
+    <div className='dark:sm:shadow-inset overflow-hidden rounded-lg bg-white text-black dark:bg-gray-800 dark:text-white sm:shadow'>
+      <div className='relative isolate h-32 w-full overflow-hidden bg-gray-200 dark:bg-gray-900/50 md:rounded-t-lg'>
         <StillImage src={account.header} />
       </div>
 
diff --git a/app/soapbox/features/edit-profile/index.tsx b/app/soapbox/features/edit-profile/index.tsx
index 6f14c63545..99c06544f1 100644
--- a/app/soapbox/features/edit-profile/index.tsx
+++ b/app/soapbox/features/edit-profile/index.tsx
@@ -310,7 +310,7 @@ const EditProfile: React.FC = () => {
   return (
     <Column label={intl.formatMessage(messages.header)}>
       <Form onSubmit={handleSubmit}>
-        <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
           <ProfilePreview account={previewAccount} />
 
           <div className='space-y-4'>
diff --git a/app/soapbox/features/embedded-status/index.tsx b/app/soapbox/features/embedded-status/index.tsx
index 56d836d1b8..d8c172643c 100644
--- a/app/soapbox/features/embedded-status/index.tsx
+++ b/app/soapbox/features/embedded-status/index.tsx
@@ -45,7 +45,7 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
   }, [status, loading]);
 
   const logo = (
-    <div className='flex align-middle justify-center ml-4'>
+    <div className='ml-4 flex justify-center align-middle'>
       <SiteLogo className='max-h-[20px] max-w-[112px]' />
     </div>
   );
@@ -67,7 +67,7 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
       onClick={e => e.stopPropagation()}
       target='_blank'
     >
-      <div className='p-4 sm:p-6 max-w-3xl pointer-events-none'>
+      <div className='pointer-events-none max-w-3xl p-4 sm:p-6'>
         {renderInner()}
       </div>
     </a>
diff --git a/app/soapbox/features/event/components/event-header.tsx b/app/soapbox/features/event/components/event-header.tsx
index 50802dcb6b..6844acb2d1 100644
--- a/app/soapbox/features/event/components/event-header.tsx
+++ b/app/soapbox/features/event/components/event-header.tsx
@@ -80,8 +80,8 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   if (!status || !status.event) {
     return (
       <>
-        <div className='-mt-4 -mx-4'>
-          <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50' />
+        <div className='-mx-4 -mt-4'>
+          <div className='relative h-32 w-full bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
         </div>
 
         <PlaceholderEventHeader />
@@ -364,14 +364,14 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   return (
     <>
-      <div className='-mt-4 -mx-4'>
-        <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50'>
+      <div className='-mx-4 -mt-4'>
+        <div className='relative h-32 w-full bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48'>
           {banner && (
             <a href={banner.url} onClick={handleHeaderClick} target='_blank'>
               <StillImage
                 src={banner.url}
                 alt={intl.formatMessage(messages.bannerHeader)}
-                className='absolute inset-0 object-cover md:rounded-t-xl h-full'
+                className='absolute inset-0 h-full object-cover md:rounded-t-xl'
               />
             </a>
           )}
@@ -379,13 +379,13 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       </div>
       <Stack space={2}>
         <HStack className='w-full' alignItems='start' space={2}>
-          <Text className='flex-grow' size='lg' weight='bold'>{event.name}</Text>
+          <Text className='grow' size='lg' weight='bold'>{event.name}</Text>
           <Menu>
             <MenuButton
               as={IconButton}
               src={require('@tabler/icons/dots.svg')}
               theme='outlined'
-              className='px-2 h-[30px]'
+              className='h-[30px] px-2'
               iconClassName='w-4 h-4'
               children={null}
             />
@@ -402,7 +402,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
                     <Comp key={idx} {...itemProps} className='group'>
                       <div className='flex items-center'>
                         {menuItem.icon && (
-                          <SvgIcon src={menuItem.icon} className='mr-3 h-5 w-5 text-gray-400 flex-none group-hover:text-gray-500' />
+                          <SvgIcon src={menuItem.icon} className='mr-3 h-5 w-5 flex-none text-gray-400 group-hover:text-gray-500' />
                         )}
 
                         <div className='truncate'>{menuItem.text}</div>
diff --git a/app/soapbox/features/event/event-discussion.tsx b/app/soapbox/features/event/event-discussion.tsx
index 127bb6cc2f..4593ebebc3 100644
--- a/app/soapbox/features/event/event-discussion.tsx
+++ b/app/soapbox/features/event/event-discussion.tsx
@@ -175,10 +175,10 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
 
   return (
     <Stack space={2}>
-      {me && <div className='p-2 pt-0 border-b border-solid border-gray-200 dark:border-gray-800'>
+      {me && <div className='border-b border-solid border-gray-200 p-2 pt-0 dark:border-gray-800'>
         <ComposeForm id={`reply:${status.id}`} autoFocus={false} event={status.id} />
       </div>}
-      <div ref={node} className='thread p-0 sm:p-2 shadow-none'>
+      <div ref={node} className='thread p-0 shadow-none sm:p-2'>
         <ScrollableList
           id='thread'
           ref={scroller}
diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index 4ef7ae0b8c..cec8829ae5 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -76,7 +76,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
             {[event.location.get('postalCode'), event.location.get('locality'), event.location.get('country')].filter(text => text).join(', ')}
             {tileServer && event.location.get('latitude') && (<>
               <br />
-              <a href='#' className='text-primary-600 dark:text-accent-blue hover:underline' onClick={handleShowMap}>
+              <a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}>
                 <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
               </a>
             </>)}
@@ -143,7 +143,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
         {status.event.links.map(link => (
           <HStack space={2} alignItems='center'>
             <Icon src={require('@tabler/icons/link.svg')} />
-            <a href={link.remote_url || link.url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'>
+            <a href={link.remote_url || link.url} className='text-primary-600 hover:underline dark:text-accent-blue' target='_blank'>
               {(link.remote_url || link.url).replace(/^https?:\/\//, '')}
             </a>
           </HStack>
diff --git a/app/soapbox/features/events/components/event-carousel.tsx b/app/soapbox/features/events/components/event-carousel.tsx
index 3f2f255653..e2ecce2655 100644
--- a/app/soapbox/features/events/components/event-carousel.tsx
+++ b/app/soapbox/features/events/components/event-carousel.tsx
@@ -54,12 +54,12 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
   return (
     <div className='relative -mx-1'>
       {index !== 0 && (
-        <div className='z-10 absolute left-3 top-1/2 -mt-4'>
+        <div className='absolute left-3 top-1/2 z-10 -mt-4'>
           <button
             onClick={() => handleChangeIndex(index - 1)}
-            className='bg-white/50 dark:bg-gray-900/50 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
+            className='flex h-8 w-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/chevron-left.svg')} className='text-black dark:text-white h-6 w-6' />
+            <Icon src={require('@tabler/icons/chevron-left.svg')} className='h-6 w-6 text-black dark:text-white' />
           </button>
         </div>
       )}
@@ -67,12 +67,12 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
         {statusIds.map(statusId => <Event key={statusId} id={statusId} />)}
       </ReactSwipeableViews>
       {index !== statusIds.size - 1 && (
-        <div className='z-10 absolute right-3 top-1/2 -mt-4'>
+        <div className='absolute right-3 top-1/2 z-10 -mt-4'>
           <button
             onClick={() => handleChangeIndex(index + 1)}
-            className='bg-white/50 dark:bg-gray-900/50 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
+            className='flex h-8 w-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/chevron-right.svg')} className='text-black dark:text-white h-6 w-6' />
+            <Icon src={require('@tabler/icons/chevron-right.svg')} className='h-6 w-6 text-black dark:text-white' />
           </button>
         </div>
       )}
diff --git a/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx b/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
index b8c29b8823..3940c54c75 100644
--- a/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
@@ -24,7 +24,7 @@ interface IRestriction {
 const Restriction: React.FC<IRestriction> = ({ icon, children }) => {
   return (
     <HStack space={3}>
-      <Icon className='flex-none w-5 h-5' src={icon} />
+      <Icon className='h-5 w-5 flex-none' src={icon} />
 
       <Text theme='muted'>
         {children}
diff --git a/app/soapbox/features/feed-filtering/feed-carousel.tsx b/app/soapbox/features/feed-filtering/feed-carousel.tsx
index 6a4edf2e6c..0c42741e2f 100644
--- a/app/soapbox/features/feed-filtering/feed-carousel.tsx
+++ b/app/soapbox/features/feed-filtering/feed-carousel.tsx
@@ -58,11 +58,11 @@ const CarouselItem = React.forwardRef((
       role='filter-feed-by-user'
       data-testid='carousel-item'
     >
-      <Stack className='w-14 h-auto' space={3}>
-        <div className='block mx-auto relative w-12 h-12 rounded-full'>
+      <Stack className='h-auto w-14' space={3}>
+        <div className='relative mx-auto block h-12 w-12 rounded-full'>
           {isSelected && (
-            <div className='absolute inset-0 bg-primary-600 bg-opacity-50 rounded-full flex items-center justify-center'>
-              <Icon src={require('@tabler/icons/check.svg')} className='text-white h-6 w-6' />
+            <div className='absolute inset-0 flex items-center justify-center rounded-full bg-primary-600/50'>
+              <Icon src={require('@tabler/icons/check.svg')} className='h-6 w-6 text-white' />
             </div>
           )}
 
@@ -79,7 +79,7 @@ const CarouselItem = React.forwardRef((
           />
         </div>
 
-        <Text theme='muted' size='sm' truncate align='center' className='leading-3 pb-0.5'>{avatar.acct}</Text>
+        <Text theme='muted' size='sm' truncate align='center' className='pb-0.5 leading-3'>{avatar.acct}</Text>
       </Stack>
     </div>
   );
@@ -159,25 +159,25 @@ const FeedCarousel = () => {
 
   return (
     <div
-      className='rounded-xl bg-white dark:bg-primary-900 shadow-lg dark:shadow-none overflow-hidden'
+      className='overflow-hidden rounded-xl bg-white shadow-lg dark:bg-primary-900 dark:shadow-none'
       data-testid='feed-carousel'
     >
       <HStack alignItems='stretch'>
-        <div className='z-10 rounded-l-xl bg-white dark:bg-primary-900 w-8 flex self-stretch items-center justify-center'>
+        <div className='z-10 flex w-8 items-center justify-center self-stretch rounded-l-xl bg-white dark:bg-primary-900'>
           <button
             data-testid='prev-page'
             onClick={handlePrevPage}
-            className='h-full w-7 flex items-center justify-center disabled:opacity-25 transition-opacity duration-500'
+            className='flex h-full w-7 items-center justify-center transition-opacity duration-500 disabled:opacity-25'
             disabled={!hasPrevPage}
           >
-            <Icon src={require('@tabler/icons/chevron-left.svg')} className='text-black dark:text-white h-5 w-5' />
+            <Icon src={require('@tabler/icons/chevron-left.svg')} className='h-5 w-5 text-black dark:text-white' />
           </button>
         </div>
 
-        <div className='overflow-hidden relative w-full'>
+        <div className='relative w-full overflow-hidden'>
           {pinnedAvatar ? (
             <div
-              className='z-10 flex items-center justify-center absolute left-0 top-0 bottom-0 bg-white dark:bg-primary-900'
+              className='absolute inset-y-0 left-0 z-10 flex items-center justify-center bg-white dark:bg-primary-900'
               style={{
                 width: widthPerAvatar || 'auto',
               }}
@@ -197,13 +197,13 @@ const FeedCarousel = () => {
             style={{
               transform: `translateX(-${(currentPage - 1) * 100}%)`,
             }}
-            className='transition-all ease-out duration-500'
+            className='transition-all duration-500 ease-out'
             ref={setContainerRef}
           >
             {isFetching ? (
               new Array(20).fill(0).map((_, idx) => (
                 <div
-                  className='flex flex-shrink-0 justify-center'
+                  className='flex shrink-0 justify-center'
                   style={{ width: widthPerAvatar || 'auto' }}
                   key={idx}
                 >
@@ -214,19 +214,19 @@ const FeedCarousel = () => {
               avatarsToList.map((avatar: any, index) => (
                 <div
                   key={avatar?.account_id || index}
-                  className='flex flex-shrink-0 justify-center'
+                  className='flex shrink-0 justify-center'
                   style={{
                     width: widthPerAvatar || 'auto',
                   }}
                 >
                   {avatar === null ? (
                     <Stack
-                      className='w-14 py-4 h-auto'
+                      className='h-auto w-14 py-4'
                       space={3}
                       style={{ height: carouselItemRef.current?.clientHeight }}
                     >
-                      <div className='block mx-auto relative w-16 h-16 rounded-full'>
-                        <div className='w-16 h-16' />
+                      <div className='relative mx-auto block h-16 w-16 rounded-full'>
+                        <div className='h-16 w-16' />
                       </div>
                     </Stack>
                   ) : (
@@ -248,14 +248,14 @@ const FeedCarousel = () => {
           </HStack>
         </div>
 
-        <div className='z-10 rounded-r-xl bg-white dark:bg-primary-900 w-8 self-stretch flex items-center justify-center'>
+        <div className='z-10 flex w-8 items-center justify-center self-stretch rounded-r-xl bg-white dark:bg-primary-900'>
           <button
             data-testid='next-page'
             onClick={handleNextPage}
-            className='h-full w-7 flex items-center justify-center disabled:opacity-25 transition-opacity duration-500'
+            className='flex h-full w-7 items-center justify-center transition-opacity duration-500 disabled:opacity-25'
             disabled={!hasNextPage}
           >
-            <Icon src={require('@tabler/icons/chevron-right.svg')} className='text-black dark:text-white h-5 w-5' />
+            <Icon src={require('@tabler/icons/chevron-right.svg')} className='h-5 w-5 text-black dark:text-white' />
           </button>
         </div>
       </HStack>
diff --git a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
index dc2b334c18..ce86d1432d 100644
--- a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
+++ b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
@@ -19,15 +19,15 @@ const SuggestionItem = ({ accountId }: { accountId: string }) => {
   const account = useAccount(accountId) as Account;
 
   return (
-    <Stack space={3} className='p-4 md:p-0 rounded-md border border-solid border-gray-300 dark:border-gray-800 dark:md:border-transparent md:border-transparent w-52 shrink-0 md:shrink md:w-full'>
+    <Stack space={3} className='w-52 shrink-0 rounded-md border border-solid border-gray-300 p-4 dark:border-gray-800 md:w-full md:shrink md:border-transparent md:p-0 dark:md:border-transparent'>
       <Link
         to={`/@${account.acct}`}
         title={account.acct}
       >
-        <Stack space={3} className='w-40 md:w-24 mx-auto'>
+        <Stack space={3} className='mx-auto w-40 md:w-24'>
           <img
             src={account.avatar}
-            className='mx-auto block w-16 h-16 min-w-[56px] rounded-full object-cover'
+            className='mx-auto block h-16 w-16 min-w-[56px] rounded-full object-cover'
             alt={account.acct}
           />
 
@@ -71,14 +71,14 @@ const FeedSuggestions = () => {
 
         <Link
           to='/suggestions'
-          className='text-primary-600 dark:text-accent-blue hover:underline'
+          className='text-primary-600 hover:underline dark:text-accent-blue'
         >
           {intl.formatMessage(messages.viewAll)}
         </Link>
       </HStack>
 
       <CardBody>
-        <HStack space={4} alignItems='center' className='overflow-x-auto lg:overflow-x-hidden md:space-x-0'>
+        <HStack space={4} alignItems='center' className='overflow-x-auto md:space-x-0 lg:overflow-x-hidden'>
           {suggestedProfiles.slice(0, 4).map((suggestedProfile) => (
             <SuggestionItem key={suggestedProfile.account} accountId={suggestedProfile.account} />
           ))}
diff --git a/app/soapbox/features/group/components/group-header.tsx b/app/soapbox/features/group/components/group-header.tsx
index fb9389c20f..dbb3770621 100644
--- a/app/soapbox/features/group/components/group-header.tsx
+++ b/app/soapbox/features/group/components/group-header.tsx
@@ -29,16 +29,16 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
 
   if (!group) {
     return (
-      <div className='-mt-4 -mx-4'>
+      <div className='-mx-4 -mt-4'>
         <div>
-          <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50' />
+          <div className='relative h-32 w-full bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
         </div>
 
         <div className='px-4 sm:px-6'>
           <HStack alignItems='bottom' space={5} className='-mt-12'>
-            <div className='flex relative'>
+            <div className='relative flex'>
               <div
-                className='h-24 w-24 bg-gray-400 rounded-full ring-4 ring-white dark:ring-gray-800'
+                className='h-24 w-24 rounded-full bg-gray-400 ring-4 ring-white dark:ring-gray-800'
               />
             </div>
           </HStack>
@@ -157,9 +157,9 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
   const actionButton = makeActionButton();
 
   return (
-    <div className='-mt-4 -mx-4'>
+    <div className='-mx-4 -mt-4'>
       <div className='relative'>
-        <div className='relative flex flex-col justify-center h-32 w-full lg:h-[200px] md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50 overflow-hidden isolate'>
+        <div className='relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-[200px]'>
           {renderHeader()}
         </div>
         <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
diff --git a/app/soapbox/features/group/group-members.tsx b/app/soapbox/features/group/group-members.tsx
index 3039dc14c5..f27946f7f0 100644
--- a/app/soapbox/features/group/group-members.tsx
+++ b/app/soapbox/features/group/group-members.tsx
@@ -186,7 +186,7 @@ const GroupMember: React.FC<IGroupMember> = ({ accountId, accountRole, groupId,
                   <Comp key={idx} {...itemProps} className='group'>
                     <HStack space={3} alignItems='center'>
                       {menuItem.icon && (
-                        <SvgIcon src={menuItem.icon} className='h-5 w-5 text-gray-400 flex-none group-hover:text-gray-500' />
+                        <SvgIcon src={menuItem.icon} className='h-5 w-5 flex-none text-gray-400 group-hover:text-gray-500' />
                       )}
 
                       <div className='truncate'>{menuItem.text}</div>
diff --git a/app/soapbox/features/group/group-timeline.tsx b/app/soapbox/features/group/group-timeline.tsx
index 44ea68a2f7..51d7d2cc92 100644
--- a/app/soapbox/features/group/group-timeline.tsx
+++ b/app/soapbox/features/group/group-timeline.tsx
@@ -46,7 +46,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
   return (
     <Stack space={2}>
       {!!account && relationship?.member && (
-        <div className='px-2 py-4 border-b border-solid border-gray-200 dark:border-gray-800'>
+        <div className='border-b border-solid border-gray-200 px-2 py-4 dark:border-gray-800'>
           <HStack alignItems='start' space={4}>
             <Link to={`/@${account.acct}`}>
               <Avatar src={account.avatar} size={46} />
diff --git a/app/soapbox/features/groups/index.tsx b/app/soapbox/features/groups/index.tsx
index 7375d89c2b..85a092e0be 100644
--- a/app/soapbox/features/groups/index.tsx
+++ b/app/soapbox/features/groups/index.tsx
@@ -52,7 +52,7 @@ const Groups: React.FC = () => {
   }
 
   const emptyMessage = (
-    <Stack space={6} alignItems='center' justifyContent='center' className='p-6 h-full'>
+    <Stack space={6} alignItems='center' justifyContent='center' className='h-full p-6'>
       <Stack space={2} className='max-w-sm'>
         <Text size='2xl' weight='bold' tag='h2' align='center'>
           <FormattedMessage
diff --git a/app/soapbox/features/home-timeline/index.tsx b/app/soapbox/features/home-timeline/index.tsx
index 83bdf6c9de..aaaec2bb37 100644
--- a/app/soapbox/features/home-timeline/index.tsx
+++ b/app/soapbox/features/home-timeline/index.tsx
@@ -115,7 +115,7 @@ const HomeTimeline: React.FC = () => {
                     defaultMessage='Or you can visit {public} to get started and meet other users.'
                     values={{
                       public: (
-                        <Link to='/timeline/local' className='text-primary-600 dark:text-primary-400 hover:underline'>
+                        <Link to='/timeline/local' className='text-primary-600 hover:underline dark:text-primary-400'>
                           <FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: instance.title }} />
                         </Link>
                       ),
diff --git a/app/soapbox/features/landing-page/index.tsx b/app/soapbox/features/landing-page/index.tsx
index 21f644aecd..ce11800639 100644
--- a/app/soapbox/features/landing-page/index.tsx
+++ b/app/soapbox/features/landing-page/index.tsx
@@ -69,7 +69,7 @@ const LandingPage = () => {
   const renderPepe = () => {
     return (
       <Stack space={3} data-testid='registrations-pepe'>
-        <VerificationBadge className='h-16 w-16 mx-auto' />
+        <VerificationBadge className='mx-auto h-16 w-16' />
 
         <Stack>
           <Text size='2xl' weight='bold' align='center'>
@@ -103,11 +103,11 @@ const LandingPage = () => {
   return (
     <main className='mt-16 sm:mt-24' data-testid='homepage'>
       <div className='mx-auto max-w-7xl'>
-        <div className='grid grid-cols-1 lg:grid-cols-12 gap-8 py-12'>
-          <div className='px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-start lg:flex'>
+        <div className='grid grid-cols-1 gap-8 py-12 lg:grid-cols-12'>
+          <div className='px-4 sm:px-6 sm:text-center md:mx-auto md:max-w-2xl lg:col-span-6 lg:flex lg:text-start'>
             <div className='w-full'>
               <Stack space={3}>
-                <h1 className='text-5xl font-extrabold text-transparent text-ellipsis overflow-hidden bg-clip-text bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
+                <h1 className='overflow-hidden text-ellipsis bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end bg-clip-text text-5xl font-extrabold text-transparent sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
                   {instance.title}
                 </h1>
 
@@ -118,8 +118,8 @@ const LandingPage = () => {
               </Stack>
             </div>
           </div>
-          <div className='sm:mt-24 lg:mt-0 lg:col-span-6 self-center'>
-            <Card size='xl' variant='rounded' className='sm:max-w-md sm:w-full sm:mx-auto'>
+          <div className='self-center sm:mt-24 lg:col-span-6 lg:mt-0'>
+            <Card size='xl' variant='rounded' className='sm:mx-auto sm:w-full sm:max-w-md'>
               <CardBody>
                 {renderBody()}
               </CardBody>
diff --git a/app/soapbox/features/list-adder/components/list.tsx b/app/soapbox/features/list-adder/components/list.tsx
index b02800c921..834c92c779 100644
--- a/app/soapbox/features/list-adder/components/list.tsx
+++ b/app/soapbox/features/list-adder/components/list.tsx
@@ -38,7 +38,7 @@ const List: React.FC<IList> = ({ listId }) => {
   return (
     <div className='flex items-center gap-1.5 px-2 py-4 text-black dark:text-white'>
       <Icon src={require('@tabler/icons/list.svg')} />
-      <span className='flex-grow'>
+      <span className='grow'>
         {list.title}
       </span>
       {button}
diff --git a/app/soapbox/features/list-editor/components/search.tsx b/app/soapbox/features/list-editor/components/search.tsx
index d386f40f06..58b2e6311a 100644
--- a/app/soapbox/features/list-editor/components/search.tsx
+++ b/app/soapbox/features/list-editor/components/search.tsx
@@ -35,7 +35,7 @@ const Search = () => {
   return (
     <Form onSubmit={handleSubmit}>
       <HStack space={2}>
-        <label className='flex-grow relative'>
+        <label className='relative grow'>
           <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
 
           <Input
diff --git a/app/soapbox/features/lists/components/new-list-form.tsx b/app/soapbox/features/lists/components/new-list-form.tsx
index 2f3ef50ba4..275117016d 100644
--- a/app/soapbox/features/lists/components/new-list-form.tsx
+++ b/app/soapbox/features/lists/components/new-list-form.tsx
@@ -33,7 +33,7 @@ const NewListForm: React.FC = () => {
   return (
     <Form onSubmit={handleSubmit}>
       <HStack space={2}>
-        <label className='flex-grow'>
+        <label className='grow'>
           <span style={{ display: 'none' }}>{label}</span>
 
           <Input
diff --git a/app/soapbox/features/lists/index.tsx b/app/soapbox/features/lists/index.tsx
index 5b6fed627f..d72835be61 100644
--- a/app/soapbox/features/lists/index.tsx
+++ b/app/soapbox/features/lists/index.tsx
@@ -83,9 +83,9 @@ const Lists: React.FC = () => {
           itemClassName='py-2'
         >
           {lists.map((list: any) => (
-            <Link key={list.id} to={`/list/${list.id}`} className='flex items-center gap-1.5 p-2 text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg'>
+            <Link key={list.id} to={`/list/${list.id}`} className='flex items-center gap-1.5 rounded-lg p-2 text-gray-900 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-800'>
               <Icon src={require('@tabler/icons/list.svg')} />
-              <span className='flex-grow'>
+              <span className='grow'>
                 {list.title}
               </span>
               <IconButton iconClassName='h-5 w-5 text-gray-700 dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500' src={require('@tabler/icons/pencil.svg')} onClick={handleEditClick(list.id)} title={intl.formatMessage(messages.editList)} />
diff --git a/app/soapbox/features/migration/index.tsx b/app/soapbox/features/migration/index.tsx
index ceb2dc4d02..0915e016e0 100644
--- a/app/soapbox/features/migration/index.tsx
+++ b/app/soapbox/features/migration/index.tsx
@@ -68,7 +68,7 @@ const Migration = () => {
             values={{
               link: (
                 <Link
-                  className='hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-500'
+                  className='text-primary-600 hover:text-primary-800 hover:underline dark:text-primary-400 dark:hover:text-primary-500'
                   to='/settings/aliases'
                 >
                   <FormattedMessage
diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index 0ac907ada3..ccb15c1430 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/app/soapbox/features/notifications/components/notification.tsx
@@ -30,7 +30,7 @@ const notificationForScreenReader = (intl: IntlShape, message: string, timestamp
 const buildLink = (account: AccountEntity): JSX.Element => (
   <bdi>
     <Link
-      className='text-gray-800 dark:text-gray-200 font-bold hover:underline'
+      className='font-bold text-gray-800 hover:underline dark:text-gray-200'
       title={account.acct}
       to={`/@${account.acct}`}
       dangerouslySetInnerHTML={{ __html: account.display_name_html }}
@@ -269,14 +269,14 @@ const Notification: React.FC<INotificaton> = (props) => {
       return (
         <Emoji
           emoji={notification.emoji}
-          className='w-4 h-4 flex-none'
+          className='h-4 w-4 flex-none'
         />
       );
     } else if (validType(type)) {
       return (
         <Icon
           src={icons[type]}
-          className='text-primary-600 dark:text-primary-400 flex-none'
+          className='flex-none text-primary-600 dark:text-primary-400'
         />
       );
     } else {
@@ -358,7 +358,7 @@ const Notification: React.FC<INotificaton> = (props) => {
         tabIndex={0}
         aria-label={ariaLabel}
       >
-        <div className='p-4 focusable'>
+        <div className='focusable p-4'>
           <div className='mb-2'>
             <HStack alignItems='center' space={3}>
               <div
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index 25e4ad1283..96522d2ec1 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -78,11 +78,11 @@ const OnboardingWizard = () => {
     <div data-testid='onboarding-wizard'>
       <LandingGradient />
 
-      <main className='h-screen flex flex-col overflow-x-hidden'>
-        <div className='flex flex-col justify-center items-center h-full'>
+      <main className='flex h-screen flex-col overflow-x-hidden'>
+        <div className='flex h-full flex-col items-center justify-center'>
           <ReactSwipeableViews animateHeight index={currentStep} onChangeIndex={handleSwipe}>
             {steps.map((step, i) => (
-              <div key={i} className='py-6 sm:mx-auto w-full max-w-[100vw] sm:max-w-lg md:max-w-2xl'>
+              <div key={i} className='w-full max-w-[100vw] py-6 sm:mx-auto sm:max-w-lg md:max-w-2xl'>
                 <div
                   className={classNames({
                     'transition-opacity ease-linear': true,
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index ab9956dac5..dca78dcd7c 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -67,7 +67,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-900/50 border-solid -mx-4 sm:-mx-10'>
+          <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-900/50 sm:-mx-10 sm:pb-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />
@@ -79,15 +79,15 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
             </Stack>
           </div>
 
-          <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+          <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
             <Stack space={10}>
-              <div className='bg-gray-200 rounded-full relative mx-auto'>
+              <div className='relative mx-auto rounded-full bg-gray-200'>
                 {account && (
                   <Avatar src={selectedFile || account.avatar} size={175} />
                 )}
 
                 {isSubmitting && (
-                  <div className='absolute inset-0 rounded-full flex justify-center items-center bg-white/80 dark:bg-primary-900/80'>
+                  <div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'>
                     <Spinner withText={false} />
                   </div>
                 )}
@@ -101,7 +101,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
                   })}
                   disabled={isSubmitting}
                 >
-                  <Icon src={require('@tabler/icons/plus.svg')} className='text-white w-5 h-5' />
+                  <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
                 </button>
 
                 <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
diff --git a/app/soapbox/features/onboarding/steps/bio-step.tsx b/app/soapbox/features/onboarding/steps/bio-step.tsx
index d0a5e37a96..aaf27a1314 100644
--- a/app/soapbox/features/onboarding/steps/bio-step.tsx
+++ b/app/soapbox/features/onboarding/steps/bio-step.tsx
@@ -46,7 +46,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
+          <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'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />
@@ -59,7 +59,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
           </div>
 
           <Stack space={5}>
-            <div className='sm:pt-10 sm:w-2/3 mx-auto'>
+            <div className='mx-auto sm:w-2/3 sm:pt-10'>
               <FormGroup
                 hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
                 labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
@@ -74,7 +74,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
               </FormGroup>
             </div>
 
-            <div className='sm:w-2/3 md:w-1/2 mx-auto'>
+            <div className='mx-auto sm:w-2/3 md:w-1/2'>
               <Stack justifyContent='center' space={2}>
                 <Button
                   block
diff --git a/app/soapbox/features/onboarding/steps/completed-step.tsx b/app/soapbox/features/onboarding/steps/completed-step.tsx
index a1059cb91f..082defb4d1 100644
--- a/app/soapbox/features/onboarding/steps/completed-step.tsx
+++ b/app/soapbox/features/onboarding/steps/completed-step.tsx
@@ -7,7 +7,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
   <Card variant='rounded' size='xl'>
     <CardBody>
       <Stack space={2}>
-        <Icon strokeWidth={1} src={require('@tabler/icons/confetti.svg')} className='w-16 h-16 mx-auto text-primary-600 dark:text-primary-400' />
+        <Icon strokeWidth={1} src={require('@tabler/icons/confetti.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
 
         <Text size='2xl' align='center' weight='bold'>
           <FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
@@ -21,7 +21,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
         </Text>
       </Stack>
 
-      <div className='pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+      <div className='mx-auto pt-10 sm:w-2/3 md:w-1/2'>
         <Stack justifyContent='center' space={2}>
           <Button
             block
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index d7b2132474..ba70e21a17 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -70,7 +70,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
+          <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'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
@@ -82,24 +82,24 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
             </Stack>
           </div>
 
-          <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+          <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
             <Stack space={10}>
-              <div className='border border-solid border-gray-200 dark:border-gray-800 rounded-lg'>
+              <div className='rounded-lg border border-solid border-gray-200 dark:border-gray-800'>
                 <div
                   role='button'
-                  className='relative h-24 bg-gray-200 dark:bg-gray-800 rounded-t-md flex items-center justify-center'
+                  className='relative flex h-24 items-center justify-center rounded-t-md bg-gray-200 dark:bg-gray-800'
                 >
                   {selectedFile || account?.header && (
                     <StillImage
                       src={selectedFile || account.header}
                       alt={intl.formatMessage(messages.header)}
-                      className='absolute inset-0 object-cover rounded-t-md'
+                      className='absolute inset-0 rounded-t-md object-cover'
                     />
                   )}
 
                   {isSubmitting && (
                     <div
-                      className='absolute inset-0 rounded-t-md flex justify-center items-center bg-white/80 dark:bg-primary-900/80'
+                      className='absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80 dark:bg-primary-900/80'
                     >
                       <Spinner withText={false} />
                     </div>
@@ -114,7 +114,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
                     })}
                     disabled={isSubmitting}
                   >
-                    <Icon src={require('@tabler/icons/plus.svg')} className='text-white w-5 h-5' />
+                    <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
                   </button>
 
                   <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
@@ -122,7 +122,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
 
                 <div className='flex flex-col px-4 pb-4'>
                   {account && (
-                    <Avatar src={account.avatar} size={64} className='ring-2 dark:ring-primary-800 ring-white -mt-8 mb-2' />
+                    <Avatar src={account.avatar} size={64} className='-mt-8 mb-2 ring-2 ring-white dark:ring-primary-800' />
                   )}
 
                   <Text weight='bold' size='sm'>{account?.display_name}</Text>
diff --git a/app/soapbox/features/onboarding/steps/display-name-step.tsx b/app/soapbox/features/onboarding/steps/display-name-step.tsx
index 246ed3b93e..a94e4f7c92 100644
--- a/app/soapbox/features/onboarding/steps/display-name-step.tsx
+++ b/app/soapbox/features/onboarding/steps/display-name-step.tsx
@@ -57,7 +57,7 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
+          <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'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />
@@ -69,7 +69,7 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
             </Stack>
           </div>
 
-          <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+          <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
             <Stack space={5}>
               <FormGroup
                 hintText={hintText}
diff --git a/app/soapbox/features/onboarding/steps/fediverse-step.tsx b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
index 83a5795ebf..ba5de74e42 100644
--- a/app/soapbox/features/onboarding/steps/fediverse-step.tsx
+++ b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
@@ -15,7 +15,7 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <Stack space={2}>
-          <Icon strokeWidth={1} src={require('@tabler/icons/affiliate.svg')} className='w-16 h-16 mx-auto text-primary-600 dark:text-primary-400' />
+          <Icon strokeWidth={1} src={require('@tabler/icons/affiliate.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
 
           <Text size='2xl' weight='bold'>
             <FormattedMessage
@@ -28,7 +28,7 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
           </Text>
 
           <Stack space={4}>
-            <div className='border-b border-gray-200 dark:border-gray-800 border-solid pb-2 sm:pb-5'>
+            <div className='border-b border-solid border-gray-200 pb-2 dark:border-gray-800 sm:pb-5'>
               <Stack space={4}>
                 <Text theme='muted'>
                   <FormattedMessage
@@ -49,7 +49,7 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
               </Stack>
             </div>
 
-            <div className='bg-primary-50 dark:bg-gray-800 rounded-lg text-center p-4'>
+            <div className='rounded-lg bg-primary-50 p-4 text-center dark:bg-gray-800'>
               <Account account={account} />
             </div>
 
@@ -69,7 +69,7 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
           </Stack>
         </Stack>
 
-        <div className='pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+        <div className='mx-auto pt-10 sm:w-2/3 md:w-1/2'>
           <Stack justifyContent='center' space={2}>
             <Button
               block
diff --git a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
index d913668997..8dfb2485b2 100644
--- a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
@@ -24,7 +24,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
     }
 
     return (
-      <div className='sm:pt-4 sm:pb-10 flex flex-col'>
+      <div className='flex flex-col sm:pt-4 sm:pb-10'>
         <ScrollableList
           isLoading={isFetching}
           scrollKey='suggestions'
@@ -49,7 +49,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
 
   const renderEmpty = () => {
     return (
-      <div className='bg-primary-50 dark:bg-gray-800 my-2 rounded-lg text-center p-8'>
+      <div className='my-2 rounded-lg bg-primary-50 p-8 text-center dark:bg-gray-800'>
         <Text>
           <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
         </Text>
@@ -69,7 +69,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
+          <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'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
@@ -83,7 +83,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
 
           {renderBody()}
 
-          <div className='sm:w-2/3 md:w-1/2 mx-auto'>
+          <div className='mx-auto sm:w-2/3 md:w-1/2'>
             <Stack>
               <Stack justifyContent='center' space={2}>
                 <Button
diff --git a/app/soapbox/features/placeholder/components/placeholder-account.tsx b/app/soapbox/features/placeholder/components/placeholder-account.tsx
index 22a50b3a15..28f04adb40 100644
--- a/app/soapbox/features/placeholder/components/placeholder-account.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-account.tsx
@@ -8,7 +8,7 @@ import PlaceholderDisplayName from './placeholder-display-name';
 /** Fake account to display while data is loading. */
 const PlaceholderAccount: React.FC = () => (
   <HStack space={3} alignItems='center'>
-    <div className='flex-shrink-0'>
+    <div className='shrink-0'>
       <PlaceholderAvatar size={42} />
     </div>
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-avatar.tsx b/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
index 9d2e1a3ecf..6eb479f139 100644
--- a/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
@@ -21,9 +21,9 @@ const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = fals
   }, [size]);
 
   return (
-    <Stack space={2} className='animate-pulse text-center py-3'>
+    <Stack space={2} className='animate-pulse py-3 text-center'>
       <div
-        className='block mx-auto rounded-full bg-primary-50 dark:bg-primary-800'
+        className='mx-auto block rounded-full bg-primary-50 dark:bg-primary-800'
         style={style}
       />
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-card.tsx b/app/soapbox/features/placeholder/components/placeholder-card.tsx
index f0ef9bc728..81246ef131 100644
--- a/app/soapbox/features/placeholder/components/placeholder-card.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-card.tsx
@@ -9,9 +9,9 @@ const PlaceholderCard: React.FC = () => (
     'animate-pulse': true,
   })}
   >
-    <div className='w-2/5 primary-500 rounded-l'>&nbsp;</div>
+    <div className='primary-500 w-2/5 rounded-l'>&nbsp;</div>
 
-    <div className='w-3/5 p-4 flex flex-col justify-between text-primary-50 break-words'>
+    <div className='flex w-3/5 flex-col justify-between break-words p-4 text-primary-50'>
       <p>{generateText(randomIntFromInterval(5, 25))}</p>
       <p>{generateText(randomIntFromInterval(5, 75))}</p>
       <p>{generateText(randomIntFromInterval(5, 15))}</p>
diff --git a/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx b/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
index 8d0faf2ec5..d74e459ccc 100644
--- a/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
@@ -56,11 +56,11 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
             'order-2': !isMyMessage,
           })}
         >
-          <span style={{ width: 50, height: 12 }} className='rounded-full bg-primary-50 dark:bg-primary-800 block' />
+          <span style={{ width: 50, height: 12 }} className='block rounded-full bg-primary-50 dark:bg-primary-800' />
         </Text>
 
         <div className={classNames({ 'order-1': !isMyMessage })}>
-          <div className='w-[34px] ml-2' />
+          <div className='ml-2 w-[34px]' />
         </div>
       </HStack>
     </Stack>
diff --git a/app/soapbox/features/placeholder/components/placeholder-chat.tsx b/app/soapbox/features/placeholder/components/placeholder-chat.tsx
index 477539c205..67149b9daa 100644
--- a/app/soapbox/features/placeholder/components/placeholder-chat.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-chat.tsx
@@ -8,7 +8,7 @@ import PlaceholderDisplayName from './placeholder-display-name';
 /** Fake chat to display while data is loading. */
 const PlaceholderChat = () => {
   return (
-    <div className='px-4 py-2 w-full flex flex-col animate-pulse'>
+    <div className='flex w-full animate-pulse flex-col px-4 py-2'>
       <HStack alignItems='center' space={2}>
         <PlaceholderAvatar size={40} />
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx b/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
index 486b0af0cc..f29f46c6e6 100644
--- a/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
@@ -9,12 +9,12 @@ const PlaceholderEventPreview = () => {
   const nameLength = randomIntFromInterval(5, 15);
 
   return (
-    <div className='w-full rounded-lg bg-gray-100 dark:bg-primary-800 relative overflow-hidden animate-pulse text-primary-50 dark:text-primary-800'>
-      <div className='bg-primary-200 dark:bg-gray-600 h-40' />
+    <div className='relative w-full animate-pulse overflow-hidden rounded-lg bg-gray-100 text-primary-50 dark:bg-primary-800 dark:text-primary-800'>
+      <div className='h-40 bg-primary-200 dark:bg-gray-600' />
       <Stack className='p-2.5' space={2}>
         <Text weight='semibold'>{generateText(eventNameLength)}</Text>
 
-        <div className='flex gap-y-1 gap-x-2 flex-wrap text-gray-700 dark:text-gray-600'>
+        <div className='flex flex-wrap gap-y-1 gap-x-2 text-gray-700 dark:text-gray-600'>
           <span>{generateText(nameLength)}</span>
           <span>{generateText(nameLength)}</span>
           <span>{generateText(nameLength)}</span>
diff --git a/app/soapbox/features/placeholder/components/placeholder-group-card.tsx b/app/soapbox/features/placeholder/components/placeholder-group-card.tsx
index fe611a7d4d..9f6507f19b 100644
--- a/app/soapbox/features/placeholder/components/placeholder-group-card.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-group-card.tsx
@@ -10,9 +10,9 @@ const PlaceholderGroupCard = () => {
   const privacyLength = randomIntFromInterval(5, 15);
 
   return (
-    <div className='overflow-hidden animate-pulse'>
-      <Stack className='bg-white dark:bg-primary-900 border border-solid border-gray-300 dark:border-primary-800 rounded-lg sm:rounded-xl'>
-        <div className='bg-primary-100 dark:bg-gray-800 h-[120px] relative -m-[1px] mb-0 rounded-t-lg sm:rounded-t-xl'>
+    <div className='animate-pulse overflow-hidden'>
+      <Stack className='rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900 sm:rounded-xl'>
+        <div className='relative -m-[1px] mb-0 h-[120px] rounded-t-lg bg-primary-100 dark:bg-gray-800 sm:rounded-t-xl'>
           <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
             <div className='h-16 w-16 rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900' />
           </div>
diff --git a/app/soapbox/features/placeholder/components/placeholder-notification.tsx b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
index fbeec6a423..d8c301a4ef 100644
--- a/app/soapbox/features/placeholder/components/placeholder-notification.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
@@ -8,7 +8,7 @@ import PlaceholderStatusContent from './placeholder-status-content';
 
 /** Fake notification to display while data is loading. */
 const PlaceholderNotification = () => (
-  <div className='bg-white dark:bg-primary-900 px-4 py-6 sm:p-6'>
+  <div className='bg-white px-4 py-6 dark:bg-primary-900 sm:p-6'>
     <div className='w-full animate-pulse'>
       <div className='mb-2'>
         <PlaceholderStatusContent minLength={20} maxLength={20} />
@@ -16,7 +16,7 @@ const PlaceholderNotification = () => (
 
       <div>
         <HStack space={3} alignItems='center'>
-          <div className='flex-shrink-0'>
+          <div className='shrink-0'>
             <PlaceholderAvatar size={48} />
           </div>
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx b/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
index e96268cb27..9cc1c4448d 100644
--- a/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
@@ -14,7 +14,7 @@ export default ({ limit }: { limit: number }) => {
         <HStack key={idx} alignItems='center' space={2} className='animate-pulse'>
           <Stack space={3} className='text-center'>
             <div
-              className='w-9 h-9 block mx-auto rounded-full bg-primary-200 dark:bg-primary-700'
+              className='mx-auto block h-9 w-9 rounded-full bg-primary-200 dark:bg-primary-700'
             />
           </Stack>
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-status.tsx b/app/soapbox/features/placeholder/components/placeholder-status.tsx
index 51cb4a5cea..7dc83f5716 100644
--- a/app/soapbox/features/placeholder/components/placeholder-status.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-status.tsx
@@ -22,7 +22,7 @@ const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) =>
     <div className='w-full animate-pulse overflow-hidden'>
       <div>
         <HStack space={3} alignItems='center'>
-          <div className='flex-shrink-0'>
+          <div className='shrink-0'>
             <PlaceholderAvatar size={42} />
           </div>
 
@@ -32,7 +32,7 @@ const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) =>
         </HStack>
       </div>
 
-      <div className='mt-4 status__content-wrapper'>
+      <div className='status__content-wrapper mt-4'>
         <PlaceholderStatusContent minLength={5} maxLength={120} />
       </div>
     </div>
diff --git a/app/soapbox/features/public-layout/components/footer.tsx b/app/soapbox/features/public-layout/components/footer.tsx
index 188a20edab..0f6435f0ab 100644
--- a/app/soapbox/features/public-layout/components/footer.tsx
+++ b/app/soapbox/features/public-layout/components/footer.tsx
@@ -21,7 +21,7 @@ const Footer = () => {
   });
 
   return (
-    <footer className='relative max-w-7xl mt-auto mx-auto py-12 px-4 sm:px-6 xl:flex xl:items-center xl:justify-between lg:px-8'>
+    <footer className='relative mx-auto mt-auto max-w-7xl py-12 px-4 sm:px-6 lg:px-8 xl:flex xl:items-center xl:justify-between'>
       <div className='flex flex-wrap justify-center'>
         {navlinks.map((link, idx) => {
           const url = link.get('url');
@@ -31,7 +31,7 @@ const Footer = () => {
 
           return (
             <div key={idx} className='px-5 py-2'>
-              <Comp {...compProps} className='text-primary-600 dark:text-primary-400 hover:underline'>
+              <Comp {...compProps} className='text-primary-600 hover:underline dark:text-primary-400'>
                 <Text tag='span' theme='inherit' size='sm'>
                   {(link.getIn(['titleLocales', locale]) || link.get('title')) as string}
                 </Text>
diff --git a/app/soapbox/features/public-layout/components/header.tsx b/app/soapbox/features/public-layout/components/header.tsx
index e771fe5cdd..73e22ddca9 100644
--- a/app/soapbox/features/public-layout/components/header.tsx
+++ b/app/soapbox/features/public-layout/components/header.tsx
@@ -66,10 +66,10 @@ const Header = () => {
 
   return (
     <header data-testid='public-layout-header'>
-      <nav className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' aria-label='Header'>
-        <div className='w-full py-6 flex items-center justify-between border-b border-indigo-500 lg:border-none'>
-          <div className='flex items-center sm:justify-center relative w-36'>
-            <div className='hidden md:block absolute z-0 -top-24 -left-6'>
+      <nav className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8' aria-label='Header'>
+        <div className='flex w-full items-center justify-between border-b border-indigo-500 py-6 lg:border-none'>
+          <div className='relative flex w-36 items-center sm:justify-center'>
+            <div className='absolute -top-24 -left-6 z-0 hidden md:block'>
               <Sonar />
             </div>
 
@@ -77,7 +77,7 @@ const Header = () => {
               title={intl.formatMessage(messages.menu)}
               src={require('@tabler/icons/menu-2.svg')}
               onClick={open}
-              className='md:hidden mr-4 bg-transparent text-gray-700 dark:text-gray-600 hover:text-gray-600'
+              className='mr-4 bg-transparent text-gray-700 hover:text-gray-600 dark:text-gray-600 md:hidden'
             />
 
             <Link to='/' className='z-10'>
@@ -87,21 +87,21 @@ const Header = () => {
 
           </div>
 
-          <HStack space={6} alignItems='center' className='ml-10 relative z-10'>
+          <HStack space={6} alignItems='center' className='relative z-10 ml-10'>
             <HStack alignItems='center'>
-              <HStack space={6} alignItems='center' className='hidden md:flex md:mr-6'>
+              <HStack space={6} alignItems='center' className='hidden md:mr-6 md:flex'>
                 {links.get('help') && (
                   <a
                     href={links.get('help')}
                     target='_blank'
-                    className='text-sm font-medium text-gray-700 dark:text-gray-600 hover:underline'
+                    className='text-sm font-medium text-gray-700 hover:underline dark:text-gray-600'
                   >
                     <FormattedMessage id='landing_page_modal.helpCenter' defaultMessage='Help Center' />
                   </a>
                 )}
               </HStack>
 
-              <HStack space={2} className='xl:hidden shrink-0'>
+              <HStack space={2} className='shrink-0 xl:hidden'>
                 <Button to='/login' theme='tertiary'>
                   {intl.formatMessage(messages.login)}
                 </Button>
@@ -117,7 +117,7 @@ const Header = () => {
               </HStack>
             </HStack>
 
-            <Form className='hidden xl:flex space-x-2 rtl:space-x-reverse items-center' onSubmit={handleSubmit}>
+            <Form className='hidden items-center space-x-2 rtl:space-x-reverse xl:flex' onSubmit={handleSubmit}>
               <Input
                 required
                 value={username}
@@ -145,7 +145,7 @@ const Header = () => {
                 <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
                   <IconButton
                     src={require('@tabler/icons/help.svg')}
-                    className='bg-transparent text-gray-700 dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500 cursor-pointer'
+                    className='cursor-pointer bg-transparent text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500'
                     iconClassName='w-5 h-5'
                     transparent
                   />
diff --git a/app/soapbox/features/public-layout/components/sonar.tsx b/app/soapbox/features/public-layout/components/sonar.tsx
index e07ff4b8e9..cefcf97d04 100644
--- a/app/soapbox/features/public-layout/components/sonar.tsx
+++ b/app/soapbox/features/public-layout/components/sonar.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 
 const Sonar = () => (
   <div className='relative'>
-    <div className='relative w-48 h-48'>
-      <div className='animate-sonar-scale-4 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-600/25 opacity-0 pointer-events-none' />
-      <div className='animate-sonar-scale-3 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-600/25 opacity-0 pointer-events-none' />
-      <div className='animate-sonar-scale-2 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-600/25 opacity-0 pointer-events-none' />
-      <div className='animate-sonar-scale-1 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-600/25 opacity-0 pointer-events-none' />
+    <div className='relative h-48 w-48'>
+      <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-4 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
+      <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-3 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
+      <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-2 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
+      <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-1 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
 
-      <div className='absolute top-0 left-0 w-48 h-48 bg-white dark:bg-primary-900 rounded-full' />
+      <div className='absolute top-0 left-0 h-48 w-48 rounded-full bg-white dark:bg-primary-900' />
     </div>
   </div>
 );
diff --git a/app/soapbox/features/public-layout/index.tsx b/app/soapbox/features/public-layout/index.tsx
index 0fdc8b946d..4b5801eb0f 100644
--- a/app/soapbox/features/public-layout/index.tsx
+++ b/app/soapbox/features/public-layout/index.tsx
@@ -22,8 +22,8 @@ const PublicLayout = () => {
     <div className='h-full'>
       <LandingGradient />
 
-      <div className='flex flex-col h-screen'>
-        <div className='flex-shrink-0'>
+      <div className='flex h-screen flex-col'>
+        <div className='shrink-0'>
           <Header />
 
           <div className='relative'>
diff --git a/app/soapbox/features/security/mfa/enable-otp-form.tsx b/app/soapbox/features/security/mfa/enable-otp-form.tsx
index 7bc6e1377b..1d9be87497 100644
--- a/app/soapbox/features/security/mfa/enable-otp-form.tsx
+++ b/app/soapbox/features/security/mfa/enable-otp-form.tsx
@@ -41,14 +41,14 @@ const EnableOtpForm: React.FC<IEnableOtpForm> = ({ displayOtpForm, handleSetupPr
           <FormattedMessage id='mfa.setup_warning' defaultMessage="Write these codes down or save them somewhere secure - otherwise you won't see them again. If you lose access to your 2FA app and recovery codes you'll be locked out of your account." />
         </Text>
 
-        <div className='border-2 border-solid border-gray-200 dark:border-gray-800 rounded-lg p-4'>
+        <div className='rounded-lg border-2 border-solid border-gray-200 p-4 dark:border-gray-800'>
           <Stack space={3}>
             <Text weight='medium' align='center'>
               <FormattedMessage id='mfa.setup_recoverycodes' defaultMessage='Recovery codes' />
             </Text>
 
             {backupCodes.length > 0 ? (
-              <div className='grid gap-3 grid-cols-2 rounded-lg text-center'>
+              <div className='grid grid-cols-2 gap-3 rounded-lg text-center'>
                 {backupCodes.map((code, i) => (
                   <Text key={i} theme='muted' size='sm'>
                     {code}
diff --git a/app/soapbox/features/settings/media-display.tsx b/app/soapbox/features/settings/media-display.tsx
index ee522347fd..d89aae6fc5 100644
--- a/app/soapbox/features/settings/media-display.tsx
+++ b/app/soapbox/features/settings/media-display.tsx
@@ -39,7 +39,7 @@ const MediaDisplay = () => {
       </CardHeader>
 
       <CardBody>
-        <SimpleForm className='p-0 space-y-3'>
+        <SimpleForm className='space-y-3 p-0'>
           <List>
             <ListItem label={intl.formatMessage(messages.mediaDisplay)}>
               <SelectDropdown
diff --git a/app/soapbox/features/soapbox-config/components/color-with-picker.tsx b/app/soapbox/features/soapbox-config/components/color-with-picker.tsx
index be166cb9f9..408c912839 100644
--- a/app/soapbox/features/soapbox-config/components/color-with-picker.tsx
+++ b/app/soapbox/features/soapbox-config/components/color-with-picker.tsx
@@ -42,7 +42,7 @@ const ColorWithPicker: React.FC<IColorWithPicker> = ({ value, onChange, classNam
     <div className={className}>
       <div
         ref={node}
-        className='w-full h-full'
+        className='h-full w-full'
         role='presentation'
         style={{ background: value }}
         title={value}
diff --git a/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx b/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx
index 9a5f903992..03d6e194b3 100644
--- a/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx
+++ b/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx
@@ -59,7 +59,7 @@ const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickEmoji
     <div onKeyDown={handleKeyDown}>
       <div
         ref={target}
-        className='h-[38px] w-[38px] text-lg flex items-center justify-center cursor-pointer'
+        className='flex h-[38px] w-[38px] cursor-pointer items-center justify-center text-lg'
         title={title}
         aria-label={title}
         aria-expanded={active}
diff --git a/app/soapbox/features/soapbox-config/components/icon-picker.tsx b/app/soapbox/features/soapbox-config/components/icon-picker.tsx
index f1e3de6707..1f0e820601 100644
--- a/app/soapbox/features/soapbox-config/components/icon-picker.tsx
+++ b/app/soapbox/features/soapbox-config/components/icon-picker.tsx
@@ -9,7 +9,7 @@ interface IIconPicker {
 
 const IconPicker: React.FC<IIconPicker> = ({ value, onChange }) => {
   return (
-    <div className='mt-1 relative rounded-md shadow-sm dark:bg-gray-800 border border-solid border-gray-300 dark:border-gray-600'>
+    <div className='relative mt-1 rounded-md border border-solid border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-800'>
       <IconPickerDropdown value={value} onPickEmoji={onChange} />
     </div>
   );
diff --git a/app/soapbox/features/soapbox-config/components/site-preview.tsx b/app/soapbox/features/soapbox-config/components/site-preview.tsx
index b9f795d4a4..08095f3323 100644
--- a/app/soapbox/features/soapbox-config/components/site-preview.tsx
+++ b/app/soapbox/features/soapbox-config/components/site-preview.tsx
@@ -39,7 +39,7 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
       <style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style>
       <BackgroundShapes position='absolute' />
 
-      <div className='absolute p-2 rounded-lg overflow-hidden bg-accent-500 text-white self-center z-20'>
+      <div className='absolute z-20 self-center overflow-hidden rounded-lg bg-accent-500 p-2 text-white'>
         <FormattedMessage id='site_preview.preview' defaultMessage='Preview' />
       </div>
 
@@ -48,7 +48,7 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
         'bg-gray-800': dark,
       })}
       >
-        <SiteLogo alt='Logo' className='h-5 lg:h-6 w-auto self-center px-2' theme={dark ? 'dark' : 'light'} />
+        <SiteLogo alt='Logo' className='h-5 w-auto self-center px-2 lg:h-6' theme={dark ? 'dark' : 'light'} />
       </div>
     </div>
   );
diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx
index 6fdad7cd74..7e659d075f 100644
--- a/app/soapbox/features/status/components/card.tsx
+++ b/app/soapbox/features/status/components/card.tsx
@@ -153,7 +153,7 @@ const Card: React.FC<ICard> = ({
 
   const canvas = (
     <Blurhash
-      className='absolute w-full h-full inset-0 -z-10'
+      className='absolute inset-0 -z-10 h-full w-full'
       hash={card.blurhash}
     />
   );
@@ -185,12 +185,12 @@ const Card: React.FC<ICard> = ({
           {thumbnail}
 
           <div className='absolute inset-0 flex items-center justify-center'>
-            <div className='bg-gray-500/90 dark:bg-gray-700/90 shadow-md rounded-full px-4 py-3 flex items-center justify-center'>
+            <div className='flex items-center justify-center rounded-full bg-gray-500/90 px-4 py-3 shadow-md dark:bg-gray-700/90'>
               <HStack space={3} alignItems='center'>
-                <button onClick={handleEmbedClick} className='appearance-none text-gray-700 dark:text-gray-500 hover:text-gray-900 dark:hover:text-gray-100'>
+                <button onClick={handleEmbedClick} className='appearance-none text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100'>
                   <Icon
                     src={iconVariant}
-                    className='w-6 h-6 text-inherit'
+                    className='h-6 w-6 text-inherit'
                   />
                 </button>
 
@@ -200,11 +200,11 @@ const Card: React.FC<ICard> = ({
                     href={card.url}
                     target='_blank'
                     rel='noopener'
-                    className='text-gray-700 dark:text-gray-500 hover:text-gray-900 dark:hover:text-gray-100'
+                    className='text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100'
                   >
                     <Icon
                       src={require('@tabler/icons/external-link.svg')}
-                      className='w-6 h-6 text-inherit'
+                      className='h-6 w-6 text-inherit'
                     />
                   </a>
                 )}
@@ -225,7 +225,7 @@ const Card: React.FC<ICard> = ({
     embed = (
       <div className={classnames(
         'status-card__image',
-        'w-full rounded-l md:w-auto md:h-auto flex-none md:flex-auto',
+        'w-full flex-none rounded-l md:h-auto md:w-auto md:flex-auto',
         {
           'h-auto': horizontal,
           'h-[200px]': !horizontal,
diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx
index 42ce3e691b..b69fa3ecfc 100644
--- a/app/soapbox/features/status/components/status-interaction-bar.tsx
+++ b/app/soapbox/features/status/components/status-interaction-bar.tsx
@@ -152,7 +152,7 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
               return (
                 <Emoji
                   key={i}
-                  className='w-4.5 h-4.5 flex-none'
+                  className='h-4.5 w-4.5 flex-none'
                   emoji={e.get('name')}
                 />
               );
diff --git a/app/soapbox/features/status/components/thread-login-cta.tsx b/app/soapbox/features/status/components/thread-login-cta.tsx
index 26462cd201..34fcf83664 100644
--- a/app/soapbox/features/status/components/thread-login-cta.tsx
+++ b/app/soapbox/features/status/components/thread-login-cta.tsx
@@ -12,7 +12,7 @@ const ThreadLoginCta: React.FC = () => {
   if (!displayCta) return null;
 
   return (
-    <Card className='px-6 py-12 space-y-6 text-center' variant='rounded'>
+    <Card className='space-y-6 px-6 py-12 text-center' variant='rounded'>
       <Stack>
         <CardTitle title={<FormattedMessage id='thread_login.title' defaultMessage='Continue the conversation' />} />
         <Text>
@@ -24,7 +24,7 @@ const ThreadLoginCta: React.FC = () => {
         </Text>
       </Stack>
 
-      <Stack space={4} className='max-w-xs mx-auto'>
+      <Stack space={4} className='mx-auto max-w-xs'>
         <Button theme='tertiary' to='/login' block>
           <FormattedMessage id='thread_login.login' defaultMessage='Log in' />
         </Button>
diff --git a/app/soapbox/features/theme-editor/components/color.tsx b/app/soapbox/features/theme-editor/components/color.tsx
index 79d1c9eb1a..fd1e7d8f7a 100644
--- a/app/soapbox/features/theme-editor/components/color.tsx
+++ b/app/soapbox/features/theme-editor/components/color.tsx
@@ -18,7 +18,7 @@ const Color: React.FC<IColor> = ({ color, onChange }) => {
 
   return (
     <ColorWithPicker
-      className='w-full h-full'
+      className='h-full w-full'
       value={color}
       onChange={handleChange}
     />
diff --git a/app/soapbox/features/theme-editor/components/palette.tsx b/app/soapbox/features/theme-editor/components/palette.tsx
index 95eb20e50e..748f2c17f0 100644
--- a/app/soapbox/features/theme-editor/components/palette.tsx
+++ b/app/soapbox/features/theme-editor/components/palette.tsx
@@ -50,7 +50,7 @@ const Palette: React.FC<IPalette> = ({ palette, onChange, resetKey }) => {
 
   return (
     <Stack className='w-full'>
-      <HStack className='h-8 rounded-md overflow-hidden'>
+      <HStack className='h-8 overflow-hidden rounded-md'>
         {tints.map(tint => (
           <Color color={palette[tint]} onChange={handleChange(tint)} />
         ))}
diff --git a/app/soapbox/features/theme-editor/index.tsx b/app/soapbox/features/theme-editor/index.tsx
index 43a4742539..1cd1c7ce1c 100644
--- a/app/soapbox/features/theme-editor/index.tsx
+++ b/app/soapbox/features/theme-editor/index.tsx
@@ -264,7 +264,7 @@ const ColorListItem: React.FC<IColorListItem> = ({ label, value, onChange }) =>
       <ColorWithPicker
         value={value}
         onChange={handleChange}
-        className='w-10 h-8 rounded-md overflow-hidden'
+        className='h-8 w-10 overflow-hidden rounded-md'
       />
     </ListItem>
   );
diff --git a/app/soapbox/features/ui/components/background-shapes.tsx b/app/soapbox/features/ui/components/background-shapes.tsx
index 658d73f4ad..1244fa1abd 100644
--- a/app/soapbox/features/ui/components/background-shapes.tsx
+++ b/app/soapbox/features/ui/components/background-shapes.tsx
@@ -9,7 +9,7 @@ interface IBackgroundShapes {
 /** Gradient that appears in the background of the UI. */
 const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
   <div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
-    <div className='w-screen h-screen bg-gradient-sm lg:bg-gradient-light lg:dark:bg-gradient-dark' />
+    <div className='bg-gradient-sm lg:bg-gradient-light lg:dark:bg-gradient-dark h-screen w-screen' />
   </div>
 );
 
diff --git a/app/soapbox/features/ui/components/bundle-column-error.tsx b/app/soapbox/features/ui/components/bundle-column-error.tsx
index c3e8396233..4ec1af231d 100644
--- a/app/soapbox/features/ui/components/bundle-column-error.tsx
+++ b/app/soapbox/features/ui/components/bundle-column-error.tsx
@@ -22,7 +22,7 @@ const BundleColumnError: React.FC<IBundleColumnError> = ({ onRetry }) => {
 
   return (
     <Column label={intl.formatMessage(messages.title)}>
-      <Stack space={4} alignItems='center' justifyContent='center' className='p-10 min-h-[160px] rounded-lg'>
+      <Stack space={4} alignItems='center' justifyContent='center' className='min-h-[160px] rounded-lg p-10'>
         <IconButton
           iconClassName='w-10 h-10'
           title={intl.formatMessage(messages.retry)}
diff --git a/app/soapbox/features/ui/components/floating-action-button.tsx b/app/soapbox/features/ui/components/floating-action-button.tsx
index de00b55a72..9bfb628486 100644
--- a/app/soapbox/features/ui/components/floating-action-button.tsx
+++ b/app/soapbox/features/ui/components/floating-action-button.tsx
@@ -26,14 +26,14 @@ const FloatingActionButton: React.FC<IFloatingActionButton> = () => {
     <button
       onClick={handleOpenComposeModal}
       className={clsx(
-        'p-4 inline-flex items-center border font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 appearance-none transition-all',
-        'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
+        'inline-flex appearance-none items-center rounded-full border p-4 font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2',
+        'border-transparent bg-secondary-500 text-gray-100 hover:bg-secondary-400 focus:bg-secondary-500 focus:ring-secondary-300',
       )}
       aria-label={intl.formatMessage(messages.publish)}
     >
       <Icon
         src={require('@tabler/icons/pencil-plus.svg')}
-        className='w-6 h-6'
+        className='h-6 w-6'
       />
     </button>
   );
diff --git a/app/soapbox/features/ui/components/link-footer.tsx b/app/soapbox/features/ui/components/link-footer.tsx
index 62c88cf95d..5b76996185 100644
--- a/app/soapbox/features/ui/components/link-footer.tsx
+++ b/app/soapbox/features/ui/components/link-footer.tsx
@@ -38,7 +38,7 @@ const LinkFooter: React.FC = (): JSX.Element => {
 
   return (
     <div className='space-y-2'>
-      <div className='flex flex-wrap items-center divide-x-dot text-gray-600'>
+      <div className='divide-x-dot flex flex-wrap items-center text-gray-600'>
         {account && <>
           {features.profileDirectory && (
             <FooterLink to='/directory'><FormattedMessage id='navigation_bar.profile_directory' defaultMessage='Profile directory' /></FooterLink>
diff --git a/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx b/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
index bd075cd543..9dfafed5bc 100644
--- a/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
@@ -145,7 +145,7 @@ const AccountModerationModal: React.FC<IAccountModerationModal> = ({ onClose, ac
           )}
 
           <ListItem label={<FormattedMessage id='account_moderation_modal.fields.badges' defaultMessage='Custom badges' />}>
-            <div className='flex-grow'>
+            <div className='grow'>
               <HStack className='w-full' alignItems='center' space={2}>
                 <BadgeInput badges={badges} onChange={setBadges} />
                 <Button onClick={handleSaveBadges}>
diff --git a/app/soapbox/features/ui/components/modals/actions-modal.tsx b/app/soapbox/features/ui/components/modals/actions-modal.tsx
index ab2ca6402c..4bdbb2ee6f 100644
--- a/app/soapbox/features/ui/components/modals/actions-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/actions-modal.tsx
@@ -56,7 +56,7 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
       {({ top }) => (
         <div className='modal-root__modal actions-modal' style={{ top: `${top}%` }}>
           {status && (
-            <Stack space={2} className='p-4 bg-gray-50 dark:bg-gray-800 border-b border-solid border-gray-200 dark:border-gray-700'>
+            <Stack space={2} className='border-b border-solid border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800'>
               <AccountContainer
                 key={status.account as string}
                 id={status.account as string}
diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index eba0353010..0bd8d34d45 100644
--- a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -183,7 +183,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
   const renderLocation = () => location && (
     <HStack className='h-[38px] text-gray-700 dark:text-gray-500' alignItems='center' space={2}>
       <Icon src={ADDRESS_ICONS[location.type] || require('@tabler/icons/map-pin.svg')} />
-      <Stack className='flex-grow'>
+      <Stack className='grow'>
         <Text>{location.description}</Text>
         <Text theme='muted' size='xs'>{[location.street, location.locality, location.country].filter(val => val.trim()).join(' · ')}</Text>
       </Stack>
@@ -214,7 +214,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
       <FormGroup
         labelText={<FormattedMessage id='compose_event.fields.banner_label' defaultMessage='Event banner' />}
       >
-        <div className='flex items-center justify-center bg-primary-100 dark:bg-gray-800 rounded-lg text-primary-500 dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden h-24 sm:h-32 relative'>
+        <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'>
           {banner ? (
             <>
               <img className='h-full w-full object-cover' src={banner.url} alt='' />
diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
index e9b5aa27ab..057794b6c8 100644
--- a/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -27,7 +27,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
   };
 
   return (
-    <HStack className='h-full w-full text-primary-500 dark:text-accent-blue cursor-pointer' space={3} alignItems='center' justifyContent='center' element='label'>
+    <HStack className='h-full w-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
       <Icon
         src={require('@tabler/icons/photo-plus.svg')}
         className='h-7 w-7'
diff --git a/app/soapbox/features/ui/components/modals/embed-modal.tsx b/app/soapbox/features/ui/components/modals/embed-modal.tsx
index ae149e1380..fca111006c 100644
--- a/app/soapbox/features/ui/components/modals/embed-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/embed-modal.tsx
@@ -45,7 +45,7 @@ const EmbedModal: React.FC<IEmbedModal> = ({ url, onError }) => {
       </div>
 
       <SafeEmbed
-        className='rounded-xl overflow-hidden w-full'
+        className='w-full overflow-hidden rounded-xl'
         sandbox='allow-same-origin allow-scripts'
         title='embedded-status'
         html={embed?.html}
diff --git a/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx b/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx
index 870ed87369..5e3836cdc1 100644
--- a/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx
@@ -9,13 +9,13 @@ interface IHotkeysModal {
 }
 
 const Hotkey: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <kbd className='px-1.5 py-1 bg-primary-50 dark:bg-gray-800 border border-solid border-primary-200 rounded-md dark:border-gray-700 text-xs font-sans'>
+  <kbd className='rounded-md border border-solid border-primary-200 bg-primary-50 px-1.5 py-1 font-sans text-xs dark:border-gray-700 dark:bg-gray-800'>
     {children}
   </kbd>
 );
 
 const TableCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <td className='pb-3 px-2'>
+  <td className='px-2 pb-3'>
     {children}
   </td>
 );
@@ -29,7 +29,7 @@ const HotkeysModal: React.FC<IHotkeysModal> = ({ onClose }) => {
       onClose={onClose}
       width='4xl'
     >
-      <div className='flex flex-col lg:flex-row text-xs'>
+      <div className='flex flex-col text-xs lg:flex-row'>
         <table>
           <thead>
             <tr>
diff --git a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
index addf1f14b5..44ae03a6b9 100644
--- a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
@@ -32,13 +32,13 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
     >
       <div className='mt-4 divide-y divide-solid divide-gray-200 dark:divide-gray-800'>
         {links.get('help') && (
-          <nav className='grid gap-y-8 mb-6'>
+          <nav className='mb-6 grid gap-y-8'>
             <a
               href={links.get('help')}
               target='_blank'
-              className='p-3 space-x-3 flex items-center rounded-md dark:hover:bg-gray-900/50 hover:bg-gray-50'
+              className='flex items-center space-x-3 rounded-md p-3 hover:bg-gray-50 dark:hover:bg-gray-900/50'
             >
-              <Icon src={require('@tabler/icons/lifebuoy.svg')} className='flex-shrink-0 h-6 w-6 text-gray-600 dark:text-gray-700' />
+              <Icon src={require('@tabler/icons/lifebuoy.svg')} className='h-6 w-6 shrink-0 text-gray-600 dark:text-gray-700' />
 
               <Text weight='medium'>
                 {intl.formatMessage(messages.helpCenter)}
diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
index 76cc8b161d..39cb788c61 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
@@ -30,7 +30,7 @@ const messages = defineMessages({
 const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
   return (
     <label
-      className='h-24 sm:h-36 w-full text-primary-500 dark:text-accent-blue bg-primary-100 dark:bg-gray-800 cursor-pointer relative rounded-lg sm:shadow dark:sm:shadow-inset overflow-hidden'
+      className='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'
     >
       {src && <img className='h-full w-full object-cover' src={src} alt='' />}
       <HStack
@@ -65,7 +65,7 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
 
 const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
   return (
-    <label className='h-[72px] w-[72px] bg-primary-500 cursor-pointer rounded-full absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2 ring-2 ring-white dark:ring-primary-900'>
+    <label className='absolute left-1/2 bottom-0 h-[72px] w-[72px] -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
       {src && <Avatar src={src} size={72} />}
       <HStack
         alignItems='center'
@@ -149,7 +149,7 @@ const DetailsStep = () => {
 
   return (
     <Form>
-      <div className='flex mb-12 relative'>
+      <div className='relative mb-12 flex'>
         <HeaderPicker src={headerSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
         <AvatarPicker src={avatarSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
       </div>
diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
index e473f36f06..4e6622c3ce 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
@@ -17,7 +17,7 @@ const PrivacyStep = () => {
 
   return (
     <>
-      <Stack className='max-w-sm mx-auto' space={2}>
+      <Stack className='mx-auto max-w-sm' space={2}>
         <Text size='3xl' weight='bold' align='center'>
           <FormattedMessage id='manage_group.get_started' defaultMessage="Let's get started!" />
         </Text>
diff --git a/app/soapbox/features/ui/components/modals/policy-modal.tsx b/app/soapbox/features/ui/components/modals/policy-modal.tsx
index b5048e7973..7a1d263e59 100644
--- a/app/soapbox/features/ui/components/modals/policy-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/policy-modal.tsx
@@ -15,7 +15,7 @@ const DirectMessageUpdates = () => {
 
   return (
     <Stack space={3}>
-      <Stack space={4} className='border-2 border-solid border-primary-200 dark:border-primary-800 rounded-lg p-4'>
+      <Stack space={4} className='rounded-lg border-2 border-solid border-primary-200 p-4 dark:border-primary-800'>
         <HStack alignItems='center' space={3}>
           <svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'>
             <path d='M0 22.5306C0 10.0873 10.0873 0 22.5306 0H26.4828C38.3664 0 48 9.6336 48 21.5172V21.5172C48 36.1433 36.1433 48 21.5172 48H18.4615C8.26551 48 0 39.7345 0 29.5385V22.5306Z' fill='url(#paint0_linear_2190_131524)' fillOpacity='0.2' />
@@ -43,7 +43,7 @@ const DirectMessageUpdates = () => {
         </Text>
       </Stack>
 
-      <Stack space={4} className='border-2 border-solid border-primary-200 dark:border-primary-800 rounded-lg p-4'>
+      <Stack space={4} className='rounded-lg border-2 border-solid border-primary-200 p-4 dark:border-primary-800'>
         <HStack alignItems='center' space={3}>
           <svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'>
             <path d='M0 25.7561C0 22.2672 0 20.5228 0.197492 19.0588C1.52172 9.24259 9.24259 1.52172 19.0588 0.197492C20.5228 0 22.2672 0 25.7561 0H30.1176C39.9938 0 48 8.0062 48 17.8824C48 34.5159 34.5159 48 17.8824 48H15.3192C15.0228 48 14.8747 48 14.7494 47.9979C6.66132 47.8627 0.137263 41.3387 0.0020943 33.2506C0 33.1253 0 32.9772 0 32.6808V25.7561Z' fill='url(#paint0_linear_2190_131532)' fillOpacity='0.2' />
@@ -61,21 +61,21 @@ const DirectMessageUpdates = () => {
 
         <ul className='space-y-2'>
           <li className='flex items-center space-x-2'>
-            <span className='text-primary-500 dark:text-primary-300 h-8 w-8 flex items-center justify-center text-sm font-bold rounded-full border-2 border-solid border-gray-200 dark:border-gray-800'>
+            <span className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold text-primary-500 dark:border-gray-800 dark:text-primary-300'>
               1
             </span>
 
             <Text theme='muted'>Consolidates previously-separate policies</Text>
           </li>
           <li className='flex items-center space-x-2'>
-            <span className='text-primary-500 dark:text-primary-300 h-8 w-8 flex items-center justify-center text-sm font-bold rounded-full border-2 border-solid border-gray-200 dark:border-gray-800'>
+            <span className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold text-primary-500 dark:border-gray-800 dark:text-primary-300'>
               2
             </span>
 
             <Text theme='muted'>Reaffirms jurisdiction-specific requirements</Text>
           </li>
           <li className='flex items-center space-x-2'>
-            <span className='text-primary-500 dark:text-primary-300 h-8 w-8 flex items-center justify-center text-sm font-bold rounded-full border-2 border-solid border-gray-200 dark:border-gray-800'>
+            <span className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold text-primary-500 dark:border-gray-800 dark:text-primary-300'>
               3
             </span>
 
@@ -85,7 +85,7 @@ const DirectMessageUpdates = () => {
 
         {links.get('privacyPolicy') ? (
           <a
-            className='text-primary-600 dark:text-accent-blue text-center font-bold hover:underline'
+            className='text-center font-bold text-primary-600 hover:underline dark:text-accent-blue'
             href={links.get('privacyPolicy')}
             target='_blank'
           >
diff --git a/app/soapbox/features/ui/components/modals/reactions-modal.tsx b/app/soapbox/features/ui/components/modals/reactions-modal.tsx
index 7afe96f866..1a01dd080f 100644
--- a/app/soapbox/features/ui/components/modals/reactions-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/reactions-modal.tsx
@@ -54,7 +54,7 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
     reactions!.forEach(reaction => items.push(
       {
         text: <div className='flex items-center gap-1'>
-          <Emoji className='w-4 h-4' emoji={reaction.name} />
+          <Emoji className='h-4 w-4' emoji={reaction.name} />
           {reaction.count}
         </div>,
         action: () => setReaction(reaction.name),
diff --git a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
index 7686c16173..ed9c5c4115 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
@@ -48,7 +48,7 @@ const SelectedStatus = ({ statusId }: { statusId: string }) => {
   }
 
   return (
-    <Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-gray-800'>
+    <Stack space={2} className='rounded-lg bg-gray-100 p-4 dark:bg-gray-800'>
       <AccountContainer
         id={status.account as any}
         showProfileHoverCard={false}
@@ -127,7 +127,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
     switch (selectedStatusIds.size) {
       case 0:
         return (
-          <div className='bg-gray-100 dark:bg-gray-800 p-4 rounded-lg flex items-center justify-center w-full'>
+          <div className='flex w-full items-center justify-center rounded-lg bg-gray-100 p-4 dark:bg-gray-800'>
             <Text theme='muted'>{intl.formatMessage(messages.blankslate)}</Text>
           </div>
         );
@@ -190,12 +190,12 @@ const ReportModal = ({ onClose }: IReportModal) => {
     if (account) {
       return (
         <Stack space={4}>
-          <HStack alignItems='center' space={4} className='rounded-md border dark:border-2 border-solid border-gray-400 dark:border-gray-800 p-4'>
+          <HStack alignItems='center' space={4} className='rounded-md border border-solid border-gray-400 p-4 dark:border-2 dark:border-gray-800'>
             <div>
-              <Avatar src={account.avatar} className='w-8 h-8' />
+              <Avatar src={account.avatar} className='h-8 w-8' />
             </div>
 
-            <div className='bg-gray-200 dark:bg-primary-800 rounded-md p-4 flex-grow'>
+            <div className='grow rounded-md bg-gray-200 p-4 dark:bg-primary-800'>
               <Text dangerouslySetInnerHTML={{ __html: selectedChatMessage?.content as string }} />
             </div>
           </HStack>
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/confirmation-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
index 8a7e7581e3..eebb3d717a 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
@@ -25,7 +25,7 @@ const renderTermsOfServiceLink = (href: string) => (
   <a
     href={href}
     target='_blank'
-    className='hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue'
+    className='text-primary-600 hover:text-primary-800 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'
   >
     {termsOfServiceText}
   </a>
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
index 8c4def9682..8f58c4b35f 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
@@ -60,7 +60,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
           <FormGroup labelText={intl.formatMessage(messages.addAdditionalStatuses)}>
             {showAdditionalStatuses ? (
               <Stack space={2}>
-                <div className='divide-y divide-gray-200 dark:divide-gray-800 divide-solid'>
+                <div className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'>
                   {statusIds.map((statusId) => <StatusCheckBox id={statusId} key={statusId} />)}
                 </div>
 
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index 6cf653c6b0..9cfc44aaa4 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -94,7 +94,7 @@ const ReasonStep = (_props: IReasonStep) => {
           <div className='relative'>
             <div
               style={{ maxHeight: RULES_HEIGHT }}
-              className='rounded-lg -space-y-px overflow-y-auto'
+              className='-space-y-px overflow-y-auto rounded-lg'
               onScroll={handleRulesScrolling}
               ref={rulesListRef}
             >
@@ -131,7 +131,7 @@ const ReasonStep = (_props: IReasonStep) => {
                       value={rule.id}
                       checked={isSelected}
                       readOnly
-                      className='border-2 dark:bg-gray-900 dark:border-gray-800 checked:bg-primary-500 dark:checked:bg-primary-500 focus:ring-primary-500 dark:focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded'
+                      className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 checked:bg-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:checked:bg-primary-500 dark:focus:ring-primary-500'
                     />
                   </button>
                 );
diff --git a/app/soapbox/features/ui/components/modals/video-modal.tsx b/app/soapbox/features/ui/components/modals/video-modal.tsx
index 13bef96388..baa94f17ea 100644
--- a/app/soapbox/features/ui/components/modals/video-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/video-modal.tsx
@@ -31,7 +31,7 @@ const VideoModal: React.FC<IVideoModal> = ({ status, account, media, time, onClo
   );
 
   return (
-    <div className='block w-full max-w-xl mx-auto overflow-hidden text-left align-middle transition-all transform shadow-xl rounded-2xl pointer-events-auto'>
+    <div className='pointer-events-auto mx-auto block w-full max-w-xl overflow-hidden rounded-2xl text-left align-middle shadow-xl transition-all'>
       <Video
         preview={media.preview_url}
         blurhash={media.blurhash}
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index dc8896e339..eb73496fa3 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -63,11 +63,11 @@ const Navbar = () => {
   if (mfaToken) return <Redirect to={`/login?token=${encodeURIComponent(mfaToken)}`} />;
 
   return (
-    <nav className='bg-white dark:bg-primary-900 shadow z-50 sticky top-0' ref={node} data-testid='navbar'>
-      <div className='max-w-7xl mx-auto px-2 sm:px-6 lg:px-8'>
-        <div className='relative flex justify-between h-12 lg:h-16'>
+    <nav className='sticky top-0 z-50 bg-white shadow dark:bg-primary-900' ref={node} data-testid='navbar'>
+      <div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'>
+        <div className='relative flex h-12 justify-between lg:h-16'>
           {account && (
-            <div className='absolute inset-y-0 left-0 flex items-center lg:hidden rtl:right-0 rtl:left-auto'>
+            <div className='absolute inset-y-0 left-0 flex items-center rtl:right-0 rtl:left-auto lg:hidden'>
               <button onClick={onOpenSidebar}>
                 <Avatar src={account.avatar} size={34} />
               </button>
@@ -82,14 +82,14 @@ const Navbar = () => {
               'justify-start': !account,
             })}
           >
-            <Link key='logo' to='/' data-preview-title-id='column.home' className='flex-shrink-0 flex items-center'>
+            <Link key='logo' to='/' data-preview-title-id='column.home' className='flex shrink-0 items-center'>
               <SiteLogo alt='Logo' className='h-5 w-auto cursor-pointer' />
               <span className='hidden'><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
             </Link>
 
             {account && (
-              <div className='flex-1 hidden lg:flex justify-center px-2 lg:ml-6 lg:justify-start items-center'>
-                <div className='max-w-xl w-full lg:max-w-xs hidden lg:block'>
+              <div className='hidden flex-1 items-center justify-center px-2 lg:ml-6 lg:flex lg:justify-start'>
+                <div className='hidden w-full max-w-xl lg:block lg:max-w-xs'>
                   <Search openInRoute autosuggest />
                 </div>
               </div>
@@ -98,14 +98,14 @@ const Navbar = () => {
 
           <HStack space={3} alignItems='center' className='absolute inset-y-0 right-0 pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0'>
             {account ? (
-              <div className='hidden relative lg:flex items-center'>
+              <div className='relative hidden items-center lg:flex'>
                 <ProfileDropdown account={account}>
                   <Avatar src={account.avatar} size={34} />
                 </ProfileDropdown>
               </div>
             ) : (
               <>
-                <Form className='hidden lg:flex space-x-2 rtl:space-x-reverse items-center' onSubmit={handleSubmit}>
+                <Form className='hidden items-center space-x-2 rtl:space-x-reverse lg:flex' onSubmit={handleSubmit}>
                   <Input
                     required
                     value={username}
@@ -128,7 +128,7 @@ const Navbar = () => {
                     <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
                       <IconButton
                         src={require('@tabler/icons/help.svg')}
-                        className='bg-transparent text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer'
+                        className='cursor-pointer bg-transparent text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200'
                         iconClassName='w-5 h-5'
                       />
                     </Tooltip>
diff --git a/app/soapbox/features/ui/components/profile-familiar-followers.tsx b/app/soapbox/features/ui/components/profile-familiar-followers.tsx
index dd96cca837..d7bc1a10aa 100644
--- a/app/soapbox/features/ui/components/profile-familiar-followers.tsx
+++ b/app/soapbox/features/ui/components/profile-familiar-followers.tsx
@@ -54,7 +54,7 @@ const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account
 
   if (familiarFollowerIds.size > 2) {
     accounts.push(
-      <span className='hover:underline cursor-pointer' role='presentation' onClick={openFamiliarFollowersModal}>
+      <span className='cursor-pointer hover:underline' role='presentation' onClick={openFamiliarFollowersModal}>
         <FormattedMessage
           id='account.familiar_followers.more'
           defaultMessage='{count, plural, one {# other} other {# others}} you follow'
diff --git a/app/soapbox/features/ui/components/profile-field.tsx b/app/soapbox/features/ui/components/profile-field.tsx
index 2593c52010..fa8203d310 100644
--- a/app/soapbox/features/ui/components/profile-field.tsx
+++ b/app/soapbox/features/ui/components/profile-field.tsx
@@ -63,7 +63,7 @@ const ProfileField: React.FC<IProfileField> = ({ field }) => {
             </span>
           )}
 
-          <Markup className='break-words overflow-hidden' tag='span' dangerouslySetInnerHTML={{ __html: field.value_emojified }} />
+          <Markup className='overflow-hidden break-words' tag='span' dangerouslySetInnerHTML={{ __html: field.value_emojified }} />
         </HStack>
       </dd>
     </dl>
diff --git a/app/soapbox/features/ui/components/profile-info-panel.tsx b/app/soapbox/features/ui/components/profile-info-panel.tsx
index 4d522077a1..546b0df6df 100644
--- a/app/soapbox/features/ui/components/profile-info-panel.tsx
+++ b/app/soapbox/features/ui/components/profile-info-panel.tsx
@@ -101,7 +101,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
       <HStack alignItems='center' space={0.5}>
         <Icon
           src={require('@tabler/icons/ballon.svg')}
-          className='w-4 h-4 text-gray-800 dark:text-gray-200'
+          className='h-4 w-4 text-gray-800 dark:text-gray-200'
         />
 
         <Text size='sm'>
@@ -165,7 +165,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
               <Icon
                 src={require('@tabler/icons/lock.svg')}
                 alt={intl.formatMessage(messages.account_locked)}
-                className='w-4 h-4 text-gray-600'
+                className='h-4 w-4 text-gray-600'
               />
             )}
           </HStack>
@@ -177,12 +177,12 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           <Markup size='sm' dangerouslySetInnerHTML={content} />
         )}
 
-        <div className='flex flex-col md:flex-row items-start md:flex-wrap md:items-center gap-2'>
+        <div className='flex flex-col items-start gap-2 md:flex-row md:flex-wrap md:items-center'>
           {isLocal(account) ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
                 src={require('@tabler/icons/calendar.svg')}
-                className='w-4 h-4 text-gray-800 dark:text-gray-200'
+                className='h-4 w-4 text-gray-800 dark:text-gray-200'
               />
 
               <Text size='sm'>
@@ -199,7 +199,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
             <HStack alignItems='center' space={0.5}>
               <Icon
                 src={require('@tabler/icons/map-pin.svg')}
-                className='w-4 h-4 text-gray-800 dark:text-gray-200'
+                className='h-4 w-4 text-gray-800 dark:text-gray-200'
               />
 
               <Text size='sm'>
@@ -212,13 +212,13 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
             <HStack alignItems='center' space={0.5}>
               <Icon
                 src={require('@tabler/icons/link.svg')}
-                className='w-4 h-4 text-gray-800 dark:text-gray-200'
+                className='h-4 w-4 text-gray-800 dark:text-gray-200'
               />
 
               <div className='max-w-[300px]'>
                 <Text size='sm' truncate>
                   {isSafeUrl(account.website) ? (
-                    <a className='text-primary-600 dark:text-accent-blue hover:underline' href={account.website} target='_blank'>{account.website}</a>
+                    <a className='text-primary-600 hover:underline dark:text-accent-blue' href={account.website} target='_blank'>{account.website}</a>
                   ) : (
                     account.website
                   )}
diff --git a/app/soapbox/features/ui/components/promo-panel.tsx b/app/soapbox/features/ui/components/promo-panel.tsx
index 778302f11b..e9261d20d1 100644
--- a/app/soapbox/features/ui/components/promo-panel.tsx
+++ b/app/soapbox/features/ui/components/promo-panel.tsx
@@ -20,7 +20,7 @@ const PromoPanel: React.FC = () => {
         {promoItems.map((item, i) => (
           <Text key={i}>
             <a className='flex items-center' href={item.url} target='_blank'>
-              <ForkAwesomeIcon id={item.icon} className='flex-none text-lg mr-2 rtl:mr-0 rtl:ml-2' fixedWidth />
+              <ForkAwesomeIcon id={item.icon} className='mr-2 flex-none text-lg rtl:mr-0 rtl:ml-2' fixedWidth />
               {item.textLocales.get(locale) || item.text}
             </a>
           </Text>
diff --git a/app/soapbox/features/ui/components/theme-selector.tsx b/app/soapbox/features/ui/components/theme-selector.tsx
index 8ce8199e76..eb365aa6cd 100644
--- a/app/soapbox/features/ui/components/theme-selector.tsx
+++ b/app/soapbox/features/ui/components/theme-selector.tsx
@@ -38,7 +38,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
   return (
     <label>
       <div className='relative rounded-md shadow-sm'>
-        <div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
+        <div className='pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3'>
           <Icon src={themeIconSrc} className='h-4 w-4 text-gray-600 dark:text-gray-700' />
         </div>
 
@@ -52,7 +52,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
           <option value='dark'>{intl.formatMessage(messages.dark)}</option>
         </Select>
 
-        <div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'>
+        <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
           <Icon src={require('@tabler/icons/chevron-down.svg')} className='h-4 w-4 text-gray-600 dark:text-gray-700' />
         </div>
       </div>
diff --git a/app/soapbox/features/ui/components/upload-area.tsx b/app/soapbox/features/ui/components/upload-area.tsx
index 6d6fb395bf..ecbf1a62c8 100644
--- a/app/soapbox/features/ui/components/upload-area.tsx
+++ b/app/soapbox/features/ui/components/upload-area.tsx
@@ -50,13 +50,13 @@ const UploadArea: React.FC<IUploadArea> = ({ active, onClose }) => {
           })}
           style={{ opacity: backgroundOpacity }}
         >
-          <div className='w-80 h-40 flex relative p-2'>
+          <div className='relative flex h-40 w-80 p-2'>
             <div className='absolute inset-0' style={{ transform: `scale(${backgroundScale})` }} />
 
             <Stack space={3} justifyContent='center' alignItems='center'>
               <Icon
                 src={require('@tabler/icons/cloud-upload.svg')}
-                className='w-12 h-12 text-white text-opacity-90'
+                className='h-12 w-12 text-white text-opacity-90'
               />
 
               <Text size='xl' theme='white'>
diff --git a/app/soapbox/features/ui/components/user-panel.tsx b/app/soapbox/features/ui/components/user-panel.tsx
index cbc45047a7..c73f6c0531 100644
--- a/app/soapbox/features/ui/components/user-panel.tsx
+++ b/app/soapbox/features/ui/components/user-panel.tsx
@@ -35,7 +35,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
     <div className='relative'>
       <Stack space={2}>
         <Stack>
-          <div className='-mt-4 -mx-4 h-24 bg-gray-200 relative overflow-hidden'>
+          <div className='relative -mx-4 -mt-4 h-24 overflow-hidden bg-gray-200'>
             {header && (
               <StillImage src={account.header} />
             )}
@@ -47,7 +47,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
               title={acct}
               className='-mt-12 block'
             >
-              <Avatar src={account.avatar} size={80} className='h-20 w-20 bg-gray-50 ring-2 ring-white overflow-hidden' />
+              <Avatar src={account.avatar} size={80} className='h-20 w-20 overflow-hidden bg-gray-50 ring-2 ring-white' />
             </Link>
 
             {action && (
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 4560f80995..5fb66a302c 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -663,7 +663,7 @@ const UI: React.FC<IUI> = ({ children }) => {
           </Layout>
 
           {(me && !shouldHideFAB()) && (
-            <div className='z-40 lg:hidden transition-all fixed bottom-24 right-4 rtl:left-4 rtl:right-auto'>
+            <div className='fixed bottom-24 right-4 z-40 transition-all rtl:left-4 rtl:right-auto lg:hidden'>
               <FloatingActionButton />
             </div>
           )}
diff --git a/app/soapbox/features/verification/email-passthru.tsx b/app/soapbox/features/verification/email-passthru.tsx
index e141907af4..86152f12de 100644
--- a/app/soapbox/features/verification/email-passthru.tsx
+++ b/app/soapbox/features/verification/email-passthru.tsx
@@ -49,7 +49,7 @@ const Success = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/circle-check.svg')} className='text-primary-600 dark:text-primary-400 h-10 w-10' />
+      <Icon src={require('@tabler/icons/circle-check.svg')} className='h-10 w-10 text-primary-600 dark:text-primary-400' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.emailConfirmedHeading)}
       </Text>
@@ -65,7 +65,7 @@ const GenericFail = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
+      <Icon src={require('@tabler/icons/circle-x.svg')} className='h-10 w-10 text-danger-600' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.genericFailHeading)}
       </Text>
@@ -81,7 +81,7 @@ const TokenNotFound = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
+      <Icon src={require('@tabler/icons/circle-x.svg')} className='h-10 w-10 text-danger-600' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.tokenNotFoundHeading)}
       </Text>
@@ -98,7 +98,7 @@ const TokenExpired = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
+      <Icon src={require('@tabler/icons/circle-x.svg')} className='h-10 w-10 text-danger-600' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.tokenExpiredHeading)}
       </Text>
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index d72027bf48..bee939ec49 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -82,13 +82,13 @@ const Registration = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
-        <h1 className='text-center font-bold text-2xl'>
+      <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'>
+        <h1 className='text-center text-2xl font-bold'>
           <FormattedMessage id='registration.header' defaultMessage='Register your account' />
         </h1>
       </div>
 
-      <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto space-y-4'>
+      <div className='mx-auto space-y-4 sm:w-2/3 sm:pt-10 md:w-1/2'>
         <Form onSubmit={handleSubmit}>
           <FormGroup labelText={intl.formatMessage(messages.usernameLabel)} hintText={intl.formatMessage(messages.usernameHint)}>
             <Input
@@ -115,7 +115,7 @@ const Registration = () => {
             <PasswordIndicator password={password} onChange={setHasValidPassword} />
           </FormGroup>
 
-          <div className='text-center space-y-2'>
+          <div className='space-y-2 text-center'>
             <Button
               block
               theme='primary'
@@ -132,7 +132,7 @@ const Registration = () => {
                   defaultMessage='By registering, you agree to the {terms} and {privacy}.'
                   values={{
                     terms: (
-                      <a href={links.get('termsOfService')} target='_blank' className='text-primary-600 dark:text-primary-400 hover:underline'>
+                      <a href={links.get('termsOfService')} target='_blank' className='text-primary-600 hover:underline dark:text-primary-400'>
                         <FormattedMessage
                           id='registration.tos'
                           defaultMessage='Terms of Service'
@@ -140,7 +140,7 @@ const Registration = () => {
                       </a>
                     ),
                     privacy: (
-                      <a href={links.get('privacyPolicy')} target='_blank' className='text-primary-600 dark:text-primary-400 hover:underline'>
+                      <a href={links.get('privacyPolicy')} target='_blank' className='text-primary-600 hover:underline dark:text-primary-400'>
                         <FormattedMessage
                           id='registration.privacy'
                           defaultMessage='Privacy Policy'
diff --git a/app/soapbox/features/verification/steps/age-verification.tsx b/app/soapbox/features/verification/steps/age-verification.tsx
index faebcf9978..faf3c6c504 100644
--- a/app/soapbox/features/verification/steps/age-verification.tsx
+++ b/app/soapbox/features/verification/steps/age-verification.tsx
@@ -48,13 +48,13 @@ const AgeVerification = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
-        <h1 className='text-center font-bold text-2xl'>
+      <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'>
+        <h1 className='text-center text-2xl font-bold'>
           <FormattedMessage id='age_verification.header' defaultMessage='Enter your birth date' />
         </h1>
       </div>
 
-      <div className='sm:pt-10 md:w-2/3 mx-auto'>
+      <div className='mx-auto sm:pt-10 md:w-2/3'>
         <Form onSubmit={handleSubmit}>
           <Datepicker onChange={onChange} />
 
diff --git a/app/soapbox/features/verification/steps/email-verification.tsx b/app/soapbox/features/verification/steps/email-verification.tsx
index a43ab845bb..b2d90345d8 100644
--- a/app/soapbox/features/verification/steps/email-verification.tsx
+++ b/app/soapbox/features/verification/steps/email-verification.tsx
@@ -44,10 +44,10 @@ const EmailSent: React.FC<IEmailSent> = ({ handleSubmit }) => {
   }, []);
 
   return (
-    <div className='sm:pt-10 mx-auto flex flex-col items-center justify-center'>
-      <Icon src={require('@tabler/icons/send.svg')} className='text-primary-600 dark:text-primary-400 h-12 w-12 mb-5' />
+    <div className='mx-auto flex flex-col items-center justify-center sm:pt-10'>
+      <Icon src={require('@tabler/icons/send.svg')} className='mb-5 h-12 w-12 text-primary-600 dark:text-primary-400' />
 
-      <div className='space-y-2 text-center mb-4'>
+      <div className='mb-4 space-y-2 text-center'>
         <Text weight='bold' size='3xl'>We sent you an email</Text>
         <Text theme='muted'>Click on the link in the email to validate your email.</Text>
       </div>
@@ -113,13 +113,13 @@ const EmailVerification = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
-        <h1 className='text-center font-bold text-2xl'>
+      <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'>
+        <h1 className='text-center text-2xl font-bold'>
           <FormattedMessage id='email_verification.header' defaultMessage='Enter your email address' />
         </h1>
       </div>
 
-      <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
         <Form onSubmit={handleSubmit}>
           <FormGroup labelText={intl.formatMessage(messages.emailLabel)} errors={errors}>
             <Input
diff --git a/app/soapbox/features/verification/steps/sms-verification.tsx b/app/soapbox/features/verification/steps/sms-verification.tsx
index c0e002536e..0266b15812 100644
--- a/app/soapbox/features/verification/steps/sms-verification.tsx
+++ b/app/soapbox/features/verification/steps/sms-verification.tsx
@@ -81,13 +81,13 @@ const SmsVerification = () => {
   if (status === Statuses.REQUESTED) {
     return (
       <div>
-        <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
-          <h1 className='text-center font-bold text-2xl'>
+        <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'>
+          <h1 className='text-center text-2xl font-bold'>
             <FormattedMessage id='sms_verification.sent.header' defaultMessage='Verification code' />
           </h1>
         </div>
 
-        <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto space-y-4'>
+        <div className='mx-auto space-y-4 sm:w-2/3 sm:pt-10 md:w-1/2'>
           <Text theme='muted' size='sm' align='center'>
             <FormattedMessage id='sms_verification.sent.body' defaultMessage='We sent you a 6-digit code via SMS. Enter it below.' />
           </Text>
@@ -121,13 +121,13 @@ const SmsVerification = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
-        <h1 className='text-center font-bold text-2xl'>
+      <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'>
+        <h1 className='text-center text-2xl font-bold'>
           <FormattedMessage id='sms_verification.header' defaultMessage='Enter your phone number' />
         </h1>
       </div>
 
-      <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
         <Form onSubmit={handleSubmit}>
           <FormGroup labelText={intl.formatMessage(messages.phoneLabel)}>
             <PhoneInput
diff --git a/app/soapbox/features/verification/waitlist-page.tsx b/app/soapbox/features/verification/waitlist-page.tsx
index 67de7ac755..0eb2bb4526 100644
--- a/app/soapbox/features/verification/waitlist-page.tsx
+++ b/app/soapbox/features/verification/waitlist-page.tsx
@@ -33,10 +33,10 @@ const WaitlistPage = () => {
     <div>
       <LandingGradient />
 
-      <main className='relative flex flex-col h-screen max-w-7xl mx-auto px-2 sm:px-6 lg:px-8'>
-        <header className='relative flex justify-between h-16'>
-          <div className='flex-1 flex items-stretch justify-center relative'>
-            <Link to='/' className='cursor-pointer flex-shrink-0 flex items-center'>
+      <main className='relative mx-auto flex h-screen max-w-7xl flex-col px-2 sm:px-6 lg:px-8'>
+        <header className='relative flex h-16 justify-between'>
+          <div className='relative flex flex-1 items-stretch justify-center'>
+            <Link to='/' className='flex shrink-0 cursor-pointer items-center'>
               <SiteLogo alt='Logo' className='h-7' />
             </Link>
 
@@ -48,10 +48,10 @@ const WaitlistPage = () => {
           </div>
         </header>
 
-        <div className='-mt-16 flex flex-col justify-center items-center h-full'>
+        <div className='-mt-16 flex h-full flex-col items-center justify-center'>
           <div className='max-w-xl'>
             <Stack space={4}>
-              <img src='/instance/images/waitlist.png' className='mx-auto w-32 h-32' alt='Waitlisted' />
+              <img src='/instance/images/waitlist.png' className='mx-auto h-32 w-32' alt='Waitlisted' />
 
               <Stack space={2}>
                 <Text size='lg' theme='muted' align='center' weight='medium'>
diff --git a/app/soapbox/pages/home-page.tsx b/app/soapbox/pages/home-page.tsx
index c9fd31d1d8..1a91a0320a 100644
--- a/app/soapbox/pages/home-page.tsx
+++ b/app/soapbox/pages/home-page.tsx
@@ -41,7 +41,7 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
 
   return (
     <>
-      <Layout.Main className='pt-3 sm:pt-0 dark:divide-gray-800 space-y-3'>
+      <Layout.Main className='space-y-3 pt-3 dark:divide-gray-800 sm:pt-0'>
         {me && (
           <Card variant='rounded' ref={composeBlock}>
             <CardBody>
@@ -50,7 +50,7 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
                   <Avatar src={avatar} size={46} />
                 </Link>
 
-                <div className='translate-y-0.5 w-full'>
+                <div className='w-full translate-y-0.5'>
                   <ComposeForm
                     id='home'
                     shouldCondense
diff --git a/app/soapbox/utils/media.ts b/app/soapbox/utils/media.ts
index a9ffb88a1c..9143061ffb 100644
--- a/app/soapbox/utils/media.ts
+++ b/app/soapbox/utils/media.ts
@@ -62,11 +62,11 @@ const addAutoPlay = (html: string): string => {
   try {
     const document = domParser.parseFromString(html, 'text/html').documentElement;
     const iframe = document.querySelector('iframe');
-  
+
     if (iframe) {
       const url = new URL(iframe.src);
       const provider = new URL(iframe.src).host;
-  
+
       if (provider === VideoProviders.RUMBLE) {
         url.searchParams.append('pub', '7a20');
         url.searchParams.append('autoplay', '2');
@@ -75,9 +75,9 @@ const addAutoPlay = (html: string): string => {
         url.searchParams.append('auto_play', '1');
         iframe.allow = 'autoplay';
       }
-  
+
       iframe.src = url.toString();
-  
+
       // DOM parser creates html/body elements around original HTML fragment,
       // so we need to get innerHTML out of the body and not the entire document
       return (document.querySelector('body') as HTMLBodyElement).innerHTML;
diff --git a/package.json b/package.json
index 1158a51c63..86290ccbf5 100644
--- a/package.json
+++ b/package.json
@@ -211,6 +211,7 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-tailwindcss": "^3.8.3",
     "fake-indexeddb": "^4.0.0",
     "husky": "^8.0.0",
     "jest": "^29.0.0",
diff --git a/yarn.lock b/yarn.lock
index 34c7fb5fbf..441fa6f8d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5660,6 +5660,14 @@ eslint-plugin-react@^7.25.1:
     resolve "^2.0.0-next.3"
     string.prototype.matchall "^4.0.5"
 
+eslint-plugin-tailwindcss@^3.8.3:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.8.3.tgz#26dfa15fec45a94ddec99e44b1f25161a3477cbd"
+  integrity sha512-wfzfCmc9yONNW+TqfR+QWZ+syFPQ8zMOrIGx500lS4XITEm0HJYGyKh1sC1tQ9+Wmt58bnHzW3Yc31vy5RlJww==
+  dependencies:
+    fast-glob "^3.2.5"
+    postcss "^8.4.4"
+
 eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -5935,7 +5943,7 @@ fast-glob@^3.1.1:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-glob@^3.2.11, fast-glob@^3.2.12:
+fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.5:
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
   integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
@@ -9420,6 +9428,15 @@ postcss@^8.4.19:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.4:
+  version "8.4.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
+  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"