diff --git a/eslint.config.mjs b/eslint.config.mjs
index ed92fb90f..e8ae9e4b6 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -6,6 +6,7 @@ import pluginPromise from "eslint-plugin-promise"
 import react from "eslint-plugin-react"
 import reactHooks from "eslint-plugin-react-hooks"
 import storybook from "eslint-plugin-storybook"
+import tailwind from "eslint-plugin-tailwindcss"
 import tsdoc from "eslint-plugin-tsdoc"
 import globals from "globals"
 import tseslint from "typescript-eslint"
@@ -177,6 +178,17 @@ const config = tseslint.config([
       "@typescript-eslint/no-unsafe-call": "off",
     },
   },
+  {
+    name: "tailwind",
+    files: ["packages/elements-react/**/*.{js,jsx,ts,tsx}"],
+    ...tailwind.configs["flat/recommended"][0],
+    ...tailwind.configs["flat/recommended"][1],
+    settings: {
+      tailwindcss: {
+        config: "packages/elements-react/tailwind.config.ts",
+      },
+    },
+  },
 ])
 
 export default config
diff --git a/package-lock.json b/package-lock.json
index d23dfec06..4b781716b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -77,6 +77,7 @@
         "eslint-plugin-react": "7.37.2",
         "eslint-plugin-react-hooks": "5.0.0",
         "eslint-plugin-storybook": "0.11.1",
+        "eslint-plugin-tailwindcss": "3.17.5",
         "eslint-plugin-tsdoc": "0.4.0",
         "globals": "15.13.0",
         "jest": "29.7.0",
@@ -18814,6 +18815,23 @@
         "eslint": ">=6"
       }
     },
+    "node_modules/eslint-plugin-tailwindcss": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.5.tgz",
+      "integrity": "sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "^3.2.5",
+        "postcss": "^8.4.4"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.4.0"
+      }
+    },
     "node_modules/eslint-plugin-tsdoc": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-tsdoc/-/eslint-plugin-tsdoc-0.4.0.tgz",
@@ -18915,13 +18933,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/eslint/node_modules/acorn": {
       "version": "8.14.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
diff --git a/package.json b/package.json
index a919cf0df..3fa7ffcdc 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "eslint-plugin-react": "7.37.2",
     "eslint-plugin-react-hooks": "5.0.0",
     "eslint-plugin-storybook": "0.11.1",
+    "eslint-plugin-tailwindcss": "3.17.5",
     "eslint-plugin-tsdoc": "0.4.0",
     "globals": "15.13.0",
     "jest": "29.7.0",
diff --git a/packages/elements-react/src/theme/default/components/card/auth-methods.tsx b/packages/elements-react/src/theme/default/components/card/auth-methods.tsx
index 82c5fc36a..d15361485 100644
--- a/packages/elements-react/src/theme/default/components/card/auth-methods.tsx
+++ b/packages/elements-react/src/theme/default/components/card/auth-methods.tsx
@@ -25,23 +25,23 @@ export function DefaultAuthMethodListItem({
   const Icon = iconsMap[group] || null
 
   return (
-    <div className="w-full hover:bg-forms-bg-hover px-2 py-1 rounded">
+    <div className="w-full rounded px-2 py-1 hover:bg-forms-bg-hover">
       <button
-        className="flex text-left py-2 gap-3 cursor-pointer"
+        className="flex cursor-pointer gap-3 py-2 text-left"
         onClick={onClick}
         type={isGroupImmediateSubmit(group) ? "submit" : "button"}
         id={`auth-method-list-item-${group}`}
         data-testid="auth-method-list-item"
         aria-label={`Authenticate with ${group}`}
       >
-        <div className={"flex-none w-4 h-4 mt-[2px]"}>
+        <div className={"mt-[2px] size-4 flex-none"}>
           {Icon && <Icon size={20} className="text-forms-fg-default" />}
         </div>
         <div className={"flex-1 text-sm leading-normal"}>
-          <div className="text-forms-fg-default text-sm">
+          <div className="text-sm text-forms-fg-default">
             {intl.formatMessage({ id: `two-step.${group}.title` })}
           </div>
-          <div className="text-forms-fg-mute text-sm">
+          <div className="text-sm text-forms-fg-mute">
             {intl.formatMessage({ id: `two-step.${group}.description` })}
           </div>
         </div>
diff --git a/packages/elements-react/src/theme/default/components/card/badge.tsx b/packages/elements-react/src/theme/default/components/card/badge.tsx
index 09322edd8..b636b3c91 100644
--- a/packages/elements-react/src/theme/default/components/card/badge.tsx
+++ b/packages/elements-react/src/theme/default/components/card/badge.tsx
@@ -6,7 +6,7 @@ import OryLogoVertical from "../../assets/ory-badge-vertical.svg"
 
 export function Badge() {
   return (
-    <div className="font-bold bg-branding-bg-default absolute max-md:rounded-b-md p-2 max-md:bottom-0 max-md:translate-y-full max-md:left-8  md:right-0 md:translate-x-full md:top-8 md:rounded-r-md">
+    <div className="absolute bg-branding-bg-default p-2 font-bold max-md:bottom-0 max-md:left-8 max-md:translate-y-full max-md:rounded-b-md  md:right-0 md:top-8 md:translate-x-full md:rounded-r-md">
       <OryLogoHorizontal width={22} height={8} className="md:hidden" />
       <OryLogoVertical width={8} height={22} className="max-md:hidden" />
     </div>
diff --git a/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx b/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx
index cff2e1098..f44ffc164 100644
--- a/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx
+++ b/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx
@@ -34,16 +34,16 @@ export function DefaultCurrentIdentifierButton() {
 
   return (
     <a
-      className="cursor-pointer py-[5px] px-3 rounded-full border border-button-identifier-border-default bg-button-identifier-bg-default hover:border-button-identifier-border-hover hover:bg-button-identifier-bg-hover transition-colors inline-flex gap-1 items-center self-start max-w-full"
+      className="inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-full border border-button-identifier-border-default bg-button-identifier-bg-default px-3 py-[5px] transition-colors hover:border-button-identifier-border-hover hover:bg-button-identifier-bg-hover"
       {...attributes}
       href={initFlowUrl}
       title={`Adjust ${nodeBackButton?.attributes.value}`}
     >
       <IconArrowLeft
         size={16}
-        className="text-button-identifier-fg-subtle shrink-0"
+        className="shrink-0 text-button-identifier-fg-subtle"
       />
-      <span className="text-sm font-medium text-button-identifier-fg-default text-ellipsis overflow-hidden text-nowrap">
+      <span className="overflow-hidden text-ellipsis text-nowrap text-sm font-medium text-button-identifier-fg-default">
         {nodeBackButton?.attributes.value}
       </span>
     </a>
diff --git a/packages/elements-react/src/theme/default/components/card/footer.tsx b/packages/elements-react/src/theme/default/components/card/footer.tsx
index 436b923d7..9309d1c1b 100644
--- a/packages/elements-react/src/theme/default/components/card/footer.tsx
+++ b/packages/elements-react/src/theme/default/components/card/footer.tsx
@@ -49,13 +49,13 @@ function LoginCardFooter() {
   }
 
   return (
-    <span className="text-sm font-normal antialiased leading-normal">
+    <span className="text-sm font-normal leading-normal antialiased">
       {intl.formatMessage({
         id: "login.registration-label",
         defaultMessage: "No account?",
       })}{" "}
       <a
-        className="text-links-link-default hover:underline hover:text-link-hover transition-colors"
+        className="text-links-link-default transition-colors hover:text-links-link-hover hover:underline"
         href={registrationLink}
       >
         {intl.formatMessage({
@@ -102,7 +102,7 @@ function RegistrationCardFooter() {
   }
 
   return (
-    <span className="text-sm font-normal antialiased leading-normal">
+    <span className="text-sm font-normal leading-normal antialiased">
       {formState.current === "method_active" ? (
         <>
           {screenSelectionNode && (
@@ -125,7 +125,7 @@ function RegistrationCardFooter() {
             defaultMessage: "Already have an account?",
           })}{" "}
           <a
-            className="text-links-link-default hover:underline hover:text-link-hover transition-colors"
+            className="text-links-link-default transition-colors hover:text-links-link-hover hover:underline"
             href={loginLink}
           >
             {intl.formatMessage({
diff --git a/packages/elements-react/src/theme/default/components/card/header.tsx b/packages/elements-react/src/theme/default/components/card/header.tsx
index 1686c2ace..513f00b54 100644
--- a/packages/elements-react/src/theme/default/components/card/header.tsx
+++ b/packages/elements-react/src/theme/default/components/card/header.tsx
@@ -11,7 +11,7 @@ function InnerCardHeader({ title, text }: { title: string; text?: string }) {
     <header className="flex flex-col gap-8 antialiased">
       <Card.Logo />
       <div className="flex flex-col gap-2">
-        <h2 className="font-semibold text-lg text-dialog-fg-default leading-normal">
+        <h2 className="text-lg font-semibold leading-normal text-dialog-fg-default">
           {title}
         </h2>
         <p className="text-sm leading-normal text-dialog-fg-subtle">{text}</p>
diff --git a/packages/elements-react/src/theme/default/components/card/index.tsx b/packages/elements-react/src/theme/default/components/card/index.tsx
index 3f43a930c..c289a1bd8 100644
--- a/packages/elements-react/src/theme/default/components/card/index.tsx
+++ b/packages/elements-react/src/theme/default/components/card/index.tsx
@@ -11,8 +11,8 @@ import { DefaultCurrentIdentifierButton } from "./current-identifier-button"
 
 export function DefaultCard({ children }: OryCardProps) {
   return (
-    <div className="flex-1 flex-col flex justify-center items-center font-sans">
-      <div className="grid grid-cols-1 max-w-sm md:max-w-[480px] md:w-[480px] gap-8 bg-dialog-bg-default px-8 md:px-12 py-12 md:py-14 relative rounded-border-radius-cards border border-dialog-border-default">
+    <div className="flex flex-1 flex-col items-center justify-center font-sans">
+      <div className="relative grid max-w-sm grid-cols-1 gap-8 rounded-border-radius-cards border border-dialog-border-default bg-dialog-bg-default px-8 py-12 md:w-[480px] md:max-w-[480px] md:px-12 md:py-14">
         {children}
         <Badge />
       </div>
diff --git a/packages/elements-react/src/theme/default/components/form/button.tsx b/packages/elements-react/src/theme/default/components/form/button.tsx
index d2edb234d..92fd077d5 100644
--- a/packages/elements-react/src/theme/default/components/form/button.tsx
+++ b/packages/elements-react/src/theme/default/components/form/button.tsx
@@ -14,9 +14,9 @@ import { cva, VariantProps } from "class-variance-authority"
 
 const buttonStyles = cva(
   [
-    "ring-1 relative overflow-hidden ring-inset rounded text-sm leading-none flex gap-3 justify-center",
-    "disabled:cursor-not-allowed loading:before:pointer-events-none loading:cursor-wait",
-    "transition-colors ease-linear duration-100",
+    "relative flex justify-center gap-3 overflow-hidden rounded text-sm leading-none ring-1 ring-inset",
+    "disabled:cursor-not-allowed loading:cursor-wait loading:before:pointer-events-none",
+    "transition-colors duration-100 ease-linear",
   ],
   {
     variants: {
@@ -26,14 +26,14 @@ const buttonStyles = cva(
           "hover:bg-button-primary-bg-hover hover:text-button-primary-fg-hover hover:ring-button-primary-border-hover",
           "disabled:bg-button-primary-bg-disabled disabled:text-button-primary-fg-disabled disabled:ring-button-primary-border-disabled",
           "loading:bg-button-primary-bg-default loading:text-button-primary-fg-default loading:ring-button-primary-border-default",
-          "loading:before:absolute loading:before:content-[''] loading:before:inset-0 loading:before:bg-button-primary-bg-default loading:before:opacity-80",
+          "loading:before:absolute loading:before:inset-0 loading:before:bg-button-primary-bg-default loading:before:opacity-80 loading:before:content-['']",
         ],
         secondary: [
           "bg-button-secondary-bg-default text-button-secondary-fg-default ring-button-secondary-border-default",
           "hover:bg-button-secondary-bg-hover hover:text-button-secondary-fg-hover hover:ring-button-secondary-border-hover",
           "disabled:bg-button-secondary-bg-disabled disabled:text-button-secondary-fg-disabled disabled:ring-button-secondary-border-disabled",
           "loading:bg-button-secondary-bg-default loading:text-button-secondary-fg-default loading:ring-button-secondary-border-default",
-          "loading:before:absolute loading:before:content-[''] loading:before:inset-0 loading:before:bg-button-secondary-bg-default loading:before:opacity-80",
+          "loading:before:absolute loading:before:inset-0 loading:before:bg-button-secondary-bg-default loading:before:opacity-80 loading:before:content-['']",
         ],
       },
       size: {
diff --git a/packages/elements-react/src/theme/default/components/form/checkbox.tsx b/packages/elements-react/src/theme/default/components/form/checkbox.tsx
index b50997ebe..0bb85a77e 100644
--- a/packages/elements-react/src/theme/default/components/form/checkbox.tsx
+++ b/packages/elements-react/src/theme/default/components/form/checkbox.tsx
@@ -17,7 +17,7 @@ import { CheckboxLabel } from "../ui/checkbox-label"
 function CheckboxSVG() {
   return (
     <svg
-      className="absolute w-4 h-4 hidden peer-checked:block"
+      className="absolute hidden size-4 peer-checked:block"
       xmlns="http://www.w3.org/2000/svg"
       width="16"
       height="16"
@@ -60,7 +60,7 @@ export const DefaultCheckbox = ({
 
   return (
     <div
-      className="flex antialiased gap-3 self-stretch item-start"
+      className="flex items-start gap-3 self-stretch antialiased"
       onClick={() => {
         setChecked(!checked)
       }}
@@ -82,14 +82,14 @@ export const DefaultCheckbox = ({
         />
         <CheckboxSVG />
       </div>
-      <div className="text-sm items-center">
+      <div className="items-center text-sm">
         <label className="text-sm font-normal leading-normal text-forms-fg-default">
           <CheckboxLabel label={label} />
         </label>
         {node.messages.map((message) => (
           <span
             key={message.id}
-            className="text-sm text-red-900 mt-1"
+            className="mt-1 text-sm text-forms-fg-error"
             {...messageTestId(message)}
           >
             {uiTextToFormattedMessage(message, intl)}
diff --git a/packages/elements-react/src/theme/default/components/form/label.tsx b/packages/elements-react/src/theme/default/components/form/label.tsx
index a95850e47..1976f070b 100644
--- a/packages/elements-react/src/theme/default/components/form/label.tsx
+++ b/packages/elements-react/src/theme/default/components/form/label.tsx
@@ -51,7 +51,7 @@ export function DefaultLabel({
   const fieldError = formState.errors[attributes.name]
 
   return (
-    <div className="flex flex-col antialiased gap-1">
+    <div className="flex flex-col gap-1 antialiased">
       {label && (
         <span className="inline-flex justify-between">
           <label
@@ -68,7 +68,7 @@ export function DefaultLabel({
               // TODO: make it possible to override with a custom component
               <a
                 href={config.project.recovery_ui_url}
-                className="text-links-link-default hover:underline hover:text-link-hover transition-colors text-sm font-medium"
+                className="text-sm font-medium text-links-link-default transition-colors hover:text-links-link-hover hover:underline"
               >
                 {intl.formatMessage({
                   id: "forms.label.forgot-password",
@@ -82,7 +82,7 @@ export function DefaultLabel({
               name={resendNode.attributes.name}
               value={resendNode.attributes.value}
               onClick={handleResend}
-              className="text-links-link-default hover:underline hover:text-link-hover transition-colors text-sm font-medium cursor-pointer"
+              className="cursor-pointer text-sm font-medium text-links-link-default transition-colors hover:text-links-link-hover hover:underline"
             >
               {intl.formatMessage({ id: "identities.messages.1070008" })}
             </button>
diff --git a/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx b/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx
index e5cb8650b..44cf75155 100644
--- a/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx
+++ b/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx
@@ -24,12 +24,12 @@ export const DefaultPinCodeInput = ({ attributes }: OryNodeInputProps) => {
       name={name}
       value={value}
     >
-      <InputOTPGroup className="w-full space-x-2 justify-between">
+      <InputOTPGroup className="w-full justify-between space-x-2">
         {[...Array(elements)].map((_, index) => (
           <InputOTPSlot
             index={index}
             key={index}
-            className="text-center px-1.5 py-2.5 h-10 w-11 md:w-14 md:h-12 border border-radius border-solid rounded-border-radius-forms border-forms-border-default bg-forms-bg-default"
+            className="h-10 w-11 rounded-border-radius-forms border border-solid border-forms-border-default bg-forms-bg-default px-1.5 py-2.5 text-center md:h-12 md:w-14"
           />
         ))}
       </InputOTPGroup>
diff --git a/packages/elements-react/src/theme/default/components/form/section.tsx b/packages/elements-react/src/theme/default/components/form/section.tsx
index f59324ce1..06993f4e9 100644
--- a/packages/elements-react/src/theme/default/components/form/section.tsx
+++ b/packages/elements-react/src/theme/default/components/form/section.tsx
@@ -9,7 +9,7 @@ import {
 
 const DefaultFormSection = ({ children }: OryFormSectionProps) => {
   return (
-    <div className="flex flex-col w-80 md:w-[712px] lg:w-[802px] xl:w-[896px]">
+    <div className="flex w-80 flex-col md:w-[712px] lg:w-[802px] xl:w-[896px]">
       {children}
     </div>
   )
@@ -21,7 +21,7 @@ const DefaultFormSectionContent = ({
   children,
 }: OryFormSectionContentProps) => {
   return (
-    <div className="border rounded-t-xl border-b-0 border-dialog-border-default bg-forms-bg-default px-6 py-8 flex flex-col gap-8">
+    <div className="flex flex-col gap-8 rounded-t-xl border border-b-0 border-dialog-border-default bg-forms-bg-default px-6 py-8">
       <div className="flex flex-col gap-2">
         <h3 className="font-medium text-dialog-fg-default">{title}</h3>
         <span className="text-sm text-dialog-fg-subtle">{description}</span>
@@ -33,7 +33,7 @@ const DefaultFormSectionContent = ({
 
 const DefaultFormSectionFooter = ({ children }: OryFormSectionFooterProps) => {
   return (
-    <div className="rounded-b-xl gap-2 flex justify-end px-6 py-4 bg-dialog-bg-subtle border border-dialog-border-default text-sm text-dialog-fg-mute items-center [&>span]:mr-auto min-h-[72px]">
+    <div className="flex min-h-[72px] items-center justify-end gap-2 rounded-b-xl border border-dialog-border-default bg-dialog-bg-subtle px-6 py-4 text-sm text-dialog-fg-mute [&>span]:mr-auto">
       {children}
     </div>
   )
diff --git a/packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx b/packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx
index c916bcfa2..1f40d339d 100644
--- a/packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx
+++ b/packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx
@@ -52,7 +52,7 @@ const InputOTPSlot = React.forwardRef<
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-branding-bg-default duration-750" />
+          <div className="h-4 w-px animate-caret-blink bg-branding-bg-default duration-700" />
         </div>
       )}
     </div>
diff --git a/packages/elements-react/src/theme/default/components/form/social.tsx b/packages/elements-react/src/theme/default/components/form/social.tsx
index 1bcac25b1..8586f3af4 100644
--- a/packages/elements-react/src/theme/default/components/form/social.tsx
+++ b/packages/elements-react/src/theme/default/components/form/social.tsx
@@ -72,7 +72,7 @@ export function DefaultButtonSocial({
       {...props}
       onClick={onClick}
     >
-      <span className="w-5 h-5">
+      <span className="size-5">
         {Logo ? (
           <Logo
             size={20}
@@ -80,13 +80,13 @@ export function DefaultButtonSocial({
             // className="object-fill w-full h-full"
           />
         ) : (
-          <span className="rounded-full aspect-square border flex items-center justify-center text-xs">
+          <span className="flex aspect-square items-center justify-center rounded-full border text-xs">
             {provider.slice(0, 2)}
           </span>
         )}
       </span>
       {showLabel && node.meta.label ? (
-        <span className="text-sm text-left leading-none font-medium text-forms-fg-default flex-grow">
+        <span className="grow text-left text-sm font-medium leading-none text-forms-fg-default">
           {uiTextToFormattedMessage(node.meta.label, intl)}
         </span>
       ) : null}
diff --git a/packages/elements-react/src/theme/default/components/generic/page-header.tsx b/packages/elements-react/src/theme/default/components/generic/page-header.tsx
index 1533cced1..1bcd86d30 100644
--- a/packages/elements-react/src/theme/default/components/generic/page-header.tsx
+++ b/packages/elements-react/src/theme/default/components/generic/page-header.tsx
@@ -10,10 +10,10 @@ export const DefaultPageHeader = (_props: OryPageHeaderProps) => {
   const { session } = useSession()
 
   return (
-    <div className="flex max-w-[896px] flex-col w-full gap-3 mt-16">
+    <div className="mt-16 flex w-full max-w-[896px] flex-col gap-3">
       <div className="flex flex-col gap-12">
-        <div className="flex gap-2 max-h-10 justify-between flex-1">
-          <div className="h-10 flex-1 relative">
+        <div className="flex max-h-10 flex-1 justify-between gap-2">
+          <div className="relative h-10 flex-1">
             <Card.Logo />
           </div>
           <UserMenu session={session} />
diff --git a/packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx b/packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx
index 2be9dc778..fb5703d8b 100644
--- a/packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx
+++ b/packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx
@@ -20,7 +20,7 @@ export function DefaultSettingsOidc({
   return (
     <div className="flex flex-col gap-8">
       {hasLinkButtons && (
-        <div className="flex gap-3 items-start [&>button]:w-[79px]">
+        <div className="flex items-start gap-3 [&>button]:w-[79px]">
           {linkButtons.map((button) => {
             const attrs = button.attributes as UiNodeInputAttributes
 
@@ -47,9 +47,9 @@ export function DefaultSettingsOidc({
 
         return (
           <div key={attrs.value} className="flex justify-between">
-            <div className="flex gap-6 items-center">
+            <div className="flex items-center gap-6">
               <Logo size={32} />
-              <p className="text-dialog-fg-subtle text-sm font-medium">
+              <p className="text-sm font-medium text-dialog-fg-subtle">
                 {provider}
               </p>
             </div>
diff --git a/packages/elements-react/src/theme/default/components/settings/settings-passkey.tsx b/packages/elements-react/src/theme/default/components/settings/settings-passkey.tsx
index 81bad6155..2cf1a6bfc 100644
--- a/packages/elements-react/src/theme/default/components/settings/settings-passkey.tsx
+++ b/packages/elements-react/src/theme/default/components/settings/settings-passkey.tsx
@@ -16,7 +16,7 @@ export function DefaultSettingsPasskey({
 
   return (
     <div className="flex flex-col gap-8">
-      <div className="flex gap-3 items-end max-w-[60%]">
+      <div className="flex max-w-[60%] items-end gap-3">
         {triggerButton ? (
           <DefaultButton
             node={triggerButton}
@@ -53,7 +53,7 @@ export function DefaultSettingsPasskey({
                     <span className="text-sm text-dialog-fg-mute">{keyId}</span>
                   </div>
                   {addedAt && (
-                    <p className="text-sm self-center text-dialog-fg-mute">
+                    <p className="self-center text-sm text-dialog-fg-mute">
                       {new Date(addedAt).toLocaleDateString()}
                     </p>
                   )}
diff --git a/packages/elements-react/src/theme/default/components/settings/settings-recovery-codes.tsx b/packages/elements-react/src/theme/default/components/settings/settings-recovery-codes.tsx
index 391407650..c9ade2f23 100644
--- a/packages/elements-react/src/theme/default/components/settings/settings-recovery-codes.tsx
+++ b/packages/elements-react/src/theme/default/components/settings/settings-recovery-codes.tsx
@@ -67,8 +67,8 @@ export function DefaultSettingsRecoveryCodes({
         ) : null}
       </div>
       {hasCodes ? (
-        <div className="rounded-border-radius-cards bg-bg-default ring-1 ring-dialog-border-default p-6">
-          <div className="grid grid-cols-6 gap-4 flex-wrap text-dialog-fg-default text-sm">
+        <div className="rounded-border-radius-cards bg-bg-default p-6 ring-1 ring-dialog-border-default">
+          <div className="grid grid-cols-6 flex-wrap gap-4 text-sm text-dialog-fg-default">
             {codes.map((code) => (
               <p key={code}>{code}</p>
             ))}
diff --git a/packages/elements-react/src/theme/default/components/settings/settings-top.tsx b/packages/elements-react/src/theme/default/components/settings/settings-top.tsx
index 6d19e9e40..0894030bc 100644
--- a/packages/elements-react/src/theme/default/components/settings/settings-top.tsx
+++ b/packages/elements-react/src/theme/default/components/settings/settings-top.tsx
@@ -25,16 +25,16 @@ export function DefaultSettingsTotp(props: OrySettingsTotpProps) {
     } = props.totpUnlink?.attributes as UiNodeInputAttributes
 
     return (
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
         <div className="col-span-full">
           <DefaultHorizontalDivider />
         </div>
-        <div className="flex gap-6 items-center col-span-full">
-          <div className="size-8 aspect-square ">
+        <div className="col-span-full flex items-center gap-6">
+          <div className="aspect-square size-8 ">
             <QrCode size={32} />
           </div>
-          <div className="flex flex-col mr-auto">
-            <p className="text-dialog-fg-subtle text-sm font-medium">
+          <div className="mr-auto flex flex-col">
+            <p className="text-sm font-medium text-dialog-fg-subtle">
               Authenticator app
             </p>
           </div>
@@ -54,13 +54,13 @@ export function DefaultSettingsTotp(props: OrySettingsTotpProps) {
 
   if ("totpSecret" in props) {
     return (
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
         <div className="col-span-full">
           <DefaultHorizontalDivider />
         </div>
-        <div className="bg-dialog-bg-subtle p-8 rounded-xl flex justify-center">
-          <div className="h-44 aspect-square bg-[white] rounded">
-            <div className="mix-blend-multiply -m-3 antialiased">
+        <div className="flex justify-center rounded-xl bg-dialog-bg-subtle p-8">
+          <div className="aspect-square h-44 rounded bg-[white]">
+            <div className="-m-3 antialiased mix-blend-multiply">
               <DefaultImage
                 node={props.totpImage}
                 attributes={{
diff --git a/packages/elements-react/src/theme/default/components/settings/settings-webauthn.tsx b/packages/elements-react/src/theme/default/components/settings/settings-webauthn.tsx
index 1082dab68..65128d9a6 100644
--- a/packages/elements-react/src/theme/default/components/settings/settings-webauthn.tsx
+++ b/packages/elements-react/src/theme/default/components/settings/settings-webauthn.tsx
@@ -19,7 +19,7 @@ export function DefaultSettingsWebauthn({
 
   return (
     <div className="flex flex-col gap-8">
-      <div className="flex gap-3 items-end max-w-[60%]">
+      <div className="flex max-w-[60%] items-end gap-3">
         <div className="flex-1">
           <DefaultLabel
             node={nameInput}
@@ -67,7 +67,7 @@ export function DefaultSettingsWebauthn({
                     <span className="text-sm text-dialog-fg-mute">{keyId}</span>
                   </div>
                   {addedAt && (
-                    <p className="text-sm self-center text-dialog-fg-mute">
+                    <p className="self-center text-sm text-dialog-fg-mute">
                       {new Date(addedAt).toLocaleDateString()}
                     </p>
                   )}
diff --git a/packages/elements-react/src/theme/default/components/ui/user-avater.tsx b/packages/elements-react/src/theme/default/components/ui/user-avater.tsx
index 0387fa3bc..de7f602e7 100644
--- a/packages/elements-react/src/theme/default/components/ui/user-avater.tsx
+++ b/packages/elements-react/src/theme/default/components/ui/user-avater.tsx
@@ -14,10 +14,10 @@ export const UserAvatar = forwardRef<HTMLButtonElement, UserAvatarProps>(
     return (
       <button
         ref={ref}
-        className="size-10 relative flex overflow-hidden items-center justify-center rounded-full bg-button-primary-bg-default disabled:hover:bg-button-primary-bg-default hover:bg-button-primary-bg-hover"
+        className="relative flex size-10 items-center justify-center overflow-hidden rounded-full bg-button-primary-bg-default hover:bg-button-primary-bg-hover disabled:hover:bg-button-primary-bg-default"
         {...rest}
       >
-        <div className="relative size-full flex items-center justify-center">
+        <div className="relative flex size-full items-center justify-center">
           {initials.avatar ? (
             <img
               src={initials.avatar}
diff --git a/packages/elements-react/src/theme/default/components/ui/user-menu.tsx b/packages/elements-react/src/theme/default/components/ui/user-menu.tsx
index 6ae2f7330..bd37af8a9 100644
--- a/packages/elements-react/src/theme/default/components/ui/user-menu.tsx
+++ b/packages/elements-react/src/theme/default/components/ui/user-menu.tsx
@@ -42,9 +42,9 @@ export const UserMenu = ({ session }: UserMenuProps) => {
         <UserAvatar initials={initials} />
       </DropdownMenuTrigger>
       <DropdownMenuContent>
-        <DropdownMenuLabel className="px-5 py-4.5 flex gap-3">
+        <DropdownMenuLabel className="flex gap-3 px-5 py-4.5">
           <UserAvatar disabled initials={initials} />
-          <div className="flex flex-col text-sm leading-tight justify-center">
+          <div className="flex flex-col justify-center text-sm leading-tight">
             <div className="text-dialog-fg-default">{initials.primary}</div>
             {initials.secondary && (
               <div className="text-dialog-fg-mute">{initials.secondary}</div>