Repository: gradio-app/gradio

Issue:
[Custom Components] Provide some configuration for building frontend
- [x] I have searched to see if a similar issue already exists.

**Is your feature request related to a problem? Please describe.**  
Some javascript libraries need additional processing to be used correctly, could gradio provide some configuration to do this?

**Additional context**  
I found this PR before: https://github.com/gradio-app/gradio/pull/6787, will there be more updates?


Discussion:

Resolving patch:
diff --git a/gradio/cli/commands/components/_create_utils.py b/gradio/cli/commands/components/_create_utils.py
--- a/gradio/cli/commands/components/_create_utils.py
+++ b/gradio/cli/commands/components/_create_utils.py
@@ -285,6 +285,10 @@ def ignore(_src, names):
     source_package_json = _modify_js_deps(source_package_json, "dependencies", p)
     source_package_json = _modify_js_deps(source_package_json, "devDependencies", p)
     (frontend / "package.json").write_text(json.dumps(source_package_json, indent=2))
+    shutil.copy(
+        str(Path(__file__).parent / "files" / "gradio.config.js"),
+        frontend / "gradio.config.js",
+    )
 
 
 def _replace_old_class_name(old_class_name: str, new_class_name: str, content: str):


Test patch:
diff --git a/js/preview/test/test/frontend/Index.svelte b/js/preview/test/test/frontend/Index.svelte
--- a/js/preview/test/test/frontend/Index.svelte
+++ b/js/preview/test/test/frontend/Index.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import "./main.css";
 	import { JsonView } from "@zerodevx/svelte-json-view";
 
 	import type { Gradio } from "@gradio/utils";
@@ -25,12 +26,88 @@
 	}>;
 </script>
 
-<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<JsonView json={value} />
-</Block>
+<div class="relative flex min-h-screen flex-col justify-center overflow-hidden">
+	<div
+		class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10"
+	>
+		<div class="mx-auto max-w-md">
+			<h1 class="text-xl! font-bold! text-gray-900">
+				<span class="text-blue-500">Tailwind</span> in Gradio
+			</h1>
+			<h2><em>(i hope you're happy now)</em></h2>
+			<div class="divide-y divide-gray-300/50">
+				<div class="space-y-6 py-8 text-base leading-7 text-gray-600">
+					<p>
+						An advanced online playground for Tailwind CSS, including support
+						for things like:
+					</p>
+					<ul class="space-y-4 my-4!">
+						<li class="flex items-center">
+							<svg
+								class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2 mr-4"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<circle cx="12" cy="12" r="11" />
+								<path
+									d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9"
+									fill="none"
+								/>
+							</svg>
+							<p class="ml-4">
+								Customizing your
+								<code class="text-sm font-bold text-gray-900"
+									>tailwind.config.js</code
+								> file
+							</p>
+						</li>
+						<li class="flex items-center">
+							<svg
+								class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2 mr-4"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<circle cx="12" cy="12" r="11" />
+								<path
+									d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9"
+									fill="none"
+								/>
+							</svg>
+							<p class="ml-4">
+								Extracting classes with
+								<code class="text-sm font-bold text-gray-900">@apply</code>
+							</p>
+						</li>
+						<li class="flex items-center">
+							<svg
+								class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2 mr-4"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<circle cx="12" cy="12" r="11" />
+								<path
+									d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9"
+									fill="none"
+								/>
+							</svg>
+							<p class="ml-4">Code completion with instant preview</p>
+						</li>
+					</ul>
+					<p>
+						Perfect for learning how the framework works, prototyping a new
+						idea, or creating a demo to share online.
+					</p>
+				</div>
+				<div class="pt-8 text-base font-semibold leading-7">
+					<p class="text-gray-900">Want to dig deeper into Tailwind?</p>
+					<p>
+						<a
+							href="https://tailwindcss.com/docs"
+							class="text-sky-500 hover:text-sky-600">Read the docs &rarr;</a
+						>
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/js/preview/test/test/frontend/gradio.config.js b/js/preview/test/test/frontend/gradio.config.js
new file mode 100644
--- /dev/null
+++ b/js/preview/test/test/frontend/gradio.config.js
@@ -0,0 +1,8 @@
+import tailwindcss from "@tailwindcss/vite";
+
+export default {
+	plugins: [tailwindcss()],
+	svelte: {
+		preprocess: require("svelte-preprocess")()
+	}
+};
diff --git a/js/preview/test/test/frontend/main.css b/js/preview/test/test/frontend/main.css
new file mode 100644
--- /dev/null
+++ b/js/preview/test/test/frontend/main.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/js/preview/test/test/frontend/package.json b/js/preview/test/test/frontend/package.json
--- a/js/preview/test/test/frontend/package.json
+++ b/js/preview/test/test/frontend/package.json
@@ -19,6 +19,8 @@
 		"@zerodevx/svelte-json-view": "^1.0.7"
 	},
 	"devDependencies": {
-		"@gradio/preview": "workspace:^"
+		"@gradio/preview": "workspace:^",
+		"@tailwindcss/vite": "4.0.0-alpha.14",
+		"tailwindcss": "4.0.0-alpha.14"
 	}
 }