feat(theme): add prefixed CSS

eslint.config.mjs

@@ -122,27 +122,31 @@ const config = tseslint.config([
     languageOptions: {
       parserOptions: {
         ecmaFeatures: {
-          jsx: true
-        }
-      }
+          jsx: true,
+        },
+      },
     },
     plugins: {
       "react-hooks": reactHooks,
-      'better-tailwindcss': eslintPluginBetterTailwindcss,
+      "better-tailwindcss": eslintPluginBetterTailwindcss,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
       // 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": {
         // // tailwindcss 4: the path to the entry file of the css based tailwind config (eg: `src/global.css`)
-        "entryPoint": "packages/elements-react/src/theme/default/global.css",
+        entryPoint: "packages/elements-react/src/theme/default/global.css",
         // tailwindcss 3: the path to the tailwind config file (eg: `tailwind.config.js`)
         // "tailwindConfig": "/Users/jonas.hungershausen/Repositories/cloud/elements/packages/elements-react/tailwind.config.ts"
-      }
+      },
     },
   },
   {

examples/nextjs-app-router/postcss.config.mjs

@@ -2,7 +2,7 @@
 const config = {
   plugins: {
     "@tailwindcss/postcss": {},
-  }
+  },
 }
 
 export default config

packages/elements-react/package.json

@@ -69,6 +69,7 @@
     "esbuild-plugin-svgr": "3.1.1",
     "eslint-plugin-react": "7.37.5",
     "postcss": "8.4.47",
+    "postcss-scope": "^1.7.4",
     "tailwindcss-animate": "1.0.7",
     "tsup": "8.4.0",
     "typedoc": "0.28.5"

packages/elements-react/postcss.config.ts

@@ -3,5 +3,8 @@
 
 module.exports = {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-require-imports
-  plugins: [require("@tailwindcss/postcss")()],
+  plugins: [
+    require("@tailwindcss/postcss")(),
+    require("postcss-scope")(".ory-elements"),
+  ],
 }

packages/elements-react/src/tests/jest/setup.ts

@@ -1,2 +1,5 @@
+// Copyright © 2025 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
 import "@testing-library/jest-dom"
 // import "@testing-library/jest-dom/jest-globals"

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/flows/settings.tsx

@@ -68,10 +68,10 @@ export function Settings({
       components={components}
     >
       {children ?? (
-        <>
+        <div className="ory-elements">
           <OryPageHeader />
           <OrySettingsCard />
-        </>
+        </div>
       )}
     </OryProvider>
   )

packages/elements-react/tailwind/generated/variables.css

@@ -1,3 +1,6 @@
+/* Copyright © 2025 Ory Corp */
+/* SPDX-License-Identifier: Apache-2.0 */
+
 @theme {
   --ui-100: #f1f5f9;
   --ui-200: #e2e8f0;