chore: enable tailwind eslint rules (#311)

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

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",

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>

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>

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>

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

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>

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>

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

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

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>

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>

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

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>

packages/elements-react/src/theme/default/components/form/social.tsx

@@ -72,21 +72,21 @@ export function DefaultButtonSocial({
       {...props}
       onClick={onClick}
     >
-      <span className="w-5 h-5">
+      <span className="size-5">
         {Logo ? (
           <Logo
             size={20}
             // alt={node.meta.label?.text || attributes.value}
             // 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}

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

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>