fix: add scoping to CSS

eslint.config.mjs

@@ -135,6 +135,7 @@ const config = tseslint.config([
       // enable all recommended rules to report an error
       ...eslintPluginBetterTailwindcss.configs["recommended-error"].rules,
       "better-tailwindcss/enforce-consistent-line-wrapping": "off",
+      "better-tailwindcss/no-unregistered-classes": ["error", { ignore: ["ory-elements"] }]
     },
     settings: {
       "better-tailwindcss": {

packages/elements-react/src/theme/default/components/card/index.tsx

@@ -19,10 +19,12 @@ import { DefaultCurrentIdentifierButton } from "./current-identifier-button"
  */
 export function DefaultCard({ children }: OryCardProps) {
   return (
-    <div className="flex w-full flex-1 items-start justify-center font-sans-default sm:w-[480px] sm:max-w-[480px] sm:items-center">
-      <div className="relative grid w-full grid-cols-1 gap-8 border-b border-form-border-default bg-form-background-default px-8 py-12 sm:rounded-cards sm:border sm:px-12 sm:py-14">
-        {children}
-        <Badge />
+    <div className="ory-elements">
+      <div className="flex w-full flex-1 items-start justify-center font-sans-default sm:w-[480px] sm:max-w-[480px] sm:items-center">
+        <div className="relative grid w-full grid-cols-1 gap-8 border-b border-form-border-default bg-form-background-default px-8 py-12 sm:rounded-cards sm:border sm:px-12 sm:py-14">
+          {children}
+          <Badge />
+        </div>
       </div>
     </div>
   )

packages/elements-react/src/theme/default/global.css

@@ -1,49 +1,51 @@
 /* Copyright © 2024 Ory Corp */
 /* SPDX-License-Identifier: Apache-2.0 */
 
-@import "tailwindcss/preflight";
-@import "tailwindcss/utilities";
-@import "tailwindcss/theme";
-
 @import "../../../tailwind/generated/variables.css";
 
-@theme {
-  --font-sans: initial;
-  --font-sans-default: var(--font-sans);
-  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
-  @keyframes caret-blink {
-    0%,
-    70%,
-    100% {
-      opacity: 1;
-    }
-    20%,
-    50% {
-      opacity: 0;
+.ory-elements {
+  @import "tailwindcss/preflight";
+  @import "tailwindcss/utilities";
+  @import "tailwindcss/theme";
+
+  @theme {
+    --font-sans: initial;
+    --font-sans-default: var(--font-sans);
+    --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+    @keyframes caret-blink {
+      0%,
+      70%,
+      100% {
+        opacity: 1;
+      }
+      20%,
+      50% {
+        opacity: 0;
+      }
     }
-  }
 
-  --animate-drop-down-in: drop-down-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
+    --animate-drop-down-in: drop-down-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
 
-  @keyframes drop-down-in {
-    from {
-      opacity: 0;
-      transform: scale(0.75);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-  --animate-drop-down-out: drop-down-out 400ms cubic-bezier(0.16, 1, 0.3, 1);
-  @keyframes drop-down-out {
-    from {
-      opacity: 1;
-      transform: scale(1);
+    @keyframes drop-down-in {
+      from {
+        opacity: 0;
+        transform: scale(0.75);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
     }
-    to {
-      opacity: 0;
-      transform: scale(0.96);
+    --animate-drop-down-out: drop-down-out 400ms cubic-bezier(0.16, 1, 0.3, 1);
+    @keyframes drop-down-out {
+      from {
+        opacity: 1;
+        transform: scale(1);
+      }
+      to {
+        opacity: 0;
+        transform: scale(0.96);
+      }
     }
   }
 }