From 7542ee448d9829c44da67b9b8f86748280034e16 Mon Sep 17 00:00:00 2001
From: Naman Dhingra <1608naman@gmail.com>
Date: Thu, 6 Jun 2024 08:51:46 +0530
Subject: [PATCH 1/4] tailwind config support in the frontend

---
 frontend/src/App.tsx                       | 38 +++++++--------
 frontend/src/components/SettingsDialog.tsx | 55 ++++++++++++++++++----
 frontend/src/types.ts                      |  1 +
 3 files changed, 67 insertions(+), 27 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5156a0f0b..6e37df864 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -71,6 +71,7 @@ function App() {
       codeGenerationModel: CodeGenerationModel.GPT_4O_2024_05_13,
       // Only relevant for hosted version
       isTermOfServiceAccepted: false,
+      tailwindConfig: null,
     },
     "setting"
   );
@@ -403,7 +404,7 @@ function App() {
         />
       )}
       <div className="lg:fixed lg:inset-y-0 lg:z-40 lg:flex lg:w-96 lg:flex-col">
-        <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6 dark:bg-zinc-950 dark:text-white">
+        <div className="flex flex-col px-6 overflow-y-auto bg-white border-r border-gray-200 grow gap-y-2 dark:bg-zinc-950 dark:text-white">
           <div className="flex items-center justify-between mt-10 mb-2">
             <h1 className="text-2xl ">Screenshot to Code</h1>
             <SettingsDialog settings={settings} setSettings={setSettings} />
@@ -426,15 +427,15 @@ function App() {
           />
 
           {showReactWarning && (
-            <div className="text-sm bg-yellow-200 rounded p-2">
+            <div className="p-2 text-sm bg-yellow-200 rounded">
               Sorry - React is not currently working with GPT-4 Turbo. Please
               use GPT-4 Vision or Claude Sonnet. We are working on a fix.
             </div>
           )}
 
           {showGpt4OMessage && (
-            <div className="rounded-lg p-2 bg-fuchsia-200">
-              <p className="text-gray-800 text-sm">
+            <div className="p-2 rounded-lg bg-fuchsia-200">
+              <p className="text-sm text-gray-800">
                 Now supporting GPT-4o. Higher quality and 2x faster. Give it a
                 try!
               </p>
@@ -446,7 +447,7 @@ function App() {
           {IS_RUNNING_ON_CLOUD && !settings.openAiApiKey && <OnboardingNote />}
 
           {IS_OPENAI_DOWN && (
-            <div className="bg-black text-white dark:bg-white dark:text-black p-3 rounded">
+            <div className="p-3 text-white bg-black rounded dark:bg-white dark:text-black">
               OpenAI API is currently down. Try back in 30 minutes or later. We
               apologize for the inconvenience.
             </div>
@@ -461,8 +462,7 @@ function App() {
                   {/* Speed disclaimer for video mode */}
                   {inputMode === "video" && (
                     <div
-                      className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700
-                    p-2 text-xs mb-4 mt-1"
+                      className="p-2 mt-1 mb-4 text-xs text-yellow-700 bg-yellow-100 border-l-4 border-yellow-500"
                     >
                       Code generation from videos can take 3-4 minutes. We do
                       multiple passes to get the best result. Please be patient.
@@ -495,8 +495,8 @@ function App() {
                       onChange={(e) => setUpdateInstruction(e.target.value)}
                       value={updateInstruction}
                     />
-                    <div className="flex justify-between items-center gap-x-2">
-                      <div className="font-500 text-xs text-slate-700 dark:text-white">
+                    <div className="flex items-center justify-between gap-x-2">
+                      <div className="text-xs font-500 text-slate-700 dark:text-white">
                         Include screenshot of current version?
                       </div>
                       <Switch
@@ -512,7 +512,7 @@ function App() {
                       Update
                     </Button>
                   </div>
-                  <div className="flex items-center justify-end gap-x-2 mt-2">
+                  <div className="flex items-center justify-end mt-2 gap-x-2">
                     <Button
                       onClick={regenerate}
                       className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700 regenerate-btn"
@@ -523,14 +523,14 @@ function App() {
                       <SelectAndEditModeToggleButton />
                     )}
                   </div>
-                  <div className="flex justify-end items-center mt-2">
+                  <div className="flex items-center justify-end mt-2">
                     <TipLink />
                   </div>
                 </div>
               )}
 
               {/* Reference image display */}
-              <div className="flex gap-x-2 mt-2">
+              <div className="flex mt-2 gap-x-2">
                 {referenceImages.length > 0 && (
                   <div className="flex flex-col">
                     <div
@@ -555,21 +555,21 @@ function App() {
                         />
                       )}
                     </div>
-                    <div className="text-gray-400 uppercase text-sm text-center mt-1">
+                    <div className="mt-1 text-sm text-center text-gray-400 uppercase">
                       {inputMode === "video"
                         ? "Original Video"
                         : "Original Screenshot"}
                     </div>
                   </div>
                 )}
-                <div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
-                  <h2 className="text-lg mb-4 border-b border-gray-800">
+                <div className="hidden px-4 py-2 text-sm bg-gray-400 rounded">
+                  <h2 className="mb-4 text-lg border-b border-gray-800">
                     Console
                   </h2>
                   {executionConsole.map((line, index) => (
                     <div
                       key={index}
-                      className="border-b border-gray-400 mb-2 text-gray-600 font-mono"
+                      className="mb-2 font-mono text-gray-600 border-b border-gray-400"
                     >
                       {line}
                     </div>
@@ -600,7 +600,7 @@ function App() {
 
       <main className="py-2 lg:pl-96">
         {appState === AppState.INITIAL && (
-          <div className="flex flex-col justify-center items-center gap-y-10">
+          <div className="flex flex-col items-center justify-center gap-y-10">
             <ImageUpload setReferenceImages={doCreate} />
             <UrlInputSection
               doCreate={doCreate}
@@ -613,7 +613,7 @@ function App() {
         {(appState === AppState.CODING || appState === AppState.CODE_READY) && (
           <div className="ml-4">
             <Tabs defaultValue="desktop">
-              <div className="flex justify-between mr-8 mb-4">
+              <div className="flex justify-between mb-4 mr-8">
                 <div className="flex items-center gap-x-2">
                   {appState === AppState.CODE_READY && (
                     <>
@@ -627,7 +627,7 @@ function App() {
                       <Button
                         onClick={downloadCode}
                         variant="secondary"
-                        className="flex items-center gap-x-2 mr-4 dark:text-white dark:bg-gray-700 download-btn"
+                        className="flex items-center mr-4 gap-x-2 dark:text-white dark:bg-gray-700 download-btn"
                       >
                         <FaDownload /> Download
                       </Button>
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 97d8f3887..211191b5a 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -30,12 +30,30 @@ interface Props {
 
 function SettingsDialog({ settings, setSettings }: Props) {
   const handleThemeChange = (theme: EditorTheme) => {
-    setSettings((s) => ({
+    setSettings((s: Settings) => ({
       ...s,
       editorTheme: theme,
     }));
   };
 
+  const handleFileChange = (event: Event) => {
+    const target= event.target as HTMLInputElement;
+    const file: File = (target.files as FileList)[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const content = e!.target!.result;
+        // Here you can set the file content to the settings
+        console.log(content);
+        setSettings((s: any) => ({
+          ...s,
+          tailwindConfig: content,
+        }));
+      };
+      reader.readAsText(file);
+    }
+  };
+
   return (
     <Dialog>
       <DialogTrigger>
@@ -49,7 +67,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
         <div className="flex items-center space-x-2">
           <Label htmlFor="image-generation">
             <div>DALL-E Placeholder Image Generation</div>
-            <div className="font-light mt-2 text-xs">
+            <div className="mt-2 text-xs font-light">
               More fun with it but if you want to save money, turn it off.
             </div>
           </Label>
@@ -68,7 +86,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
           <div>
             <Label htmlFor="openai-api-key">
               <div>OpenAI API key</div>
-              <div className="font-light mt-1 mb-2 text-xs leading-relaxed">
+              <div className="mt-1 mb-2 text-xs font-light leading-relaxed">
                 Only stored in your browser. Never stored on servers. Overrides
                 your .env config.
               </div>
@@ -91,7 +109,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
             <div>
               <Label htmlFor="openai-api-key">
                 <div>OpenAI Base URL (optional)</div>
-                <div className="font-light mt-2 leading-relaxed">
+                <div className="mt-2 font-light leading-relaxed">
                   Replace with a proxy URL if you don't want to use the default.
                 </div>
               </Label>
@@ -113,7 +131,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
           <div>
             <Label htmlFor="anthropic-api-key">
               <div>Anthropic API key</div>
-              <div className="font-light mt-1 text-xs leading-relaxed">
+              <div className="mt-1 text-xs font-light leading-relaxed">
                 Only stored in your browser. Never stored on servers. Overrides
                 your .env config.
               </div>
@@ -137,7 +155,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
               <AccordionTrigger>Screenshot by URL Config</AccordionTrigger>
               <AccordionContent>
                 <Label htmlFor="screenshot-one-api-key">
-                  <div className="leading-normal font-normal text-xs">
+                  <div className="text-xs font-normal leading-normal">
                     If you want to use URLs directly instead of taking the
                     screenshot yourself, add a ScreenshotOne API key.{" "}
                     <a
@@ -169,14 +187,14 @@ function SettingsDialog({ settings, setSettings }: Props) {
           <Accordion type="single" collapsible className="w-full">
             <AccordionItem value="item-1">
               <AccordionTrigger>Theme Settings</AccordionTrigger>
-              <AccordionContent className="space-y-4 flex flex-col">
+              <AccordionContent className="flex flex-col space-y-4">
                 <div className="flex items-center justify-between">
                   <Label htmlFor="app-theme">
                     <div>App Theme</div>
                   </Label>
                   <div>
                     <button
-                      className="flex rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50t"
+                      className="flex px-3 py-1 text-sm transition-colors bg-transparent border rounded-md shadow-sm border-input file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50t"
                       onClick={() => {
                         document
                           .querySelector("div.mt-2")
@@ -218,6 +236,27 @@ function SettingsDialog({ settings, setSettings }: Props) {
               </AccordionContent>
             </AccordionItem>
           </Accordion>
+
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="item-1">
+              <AccordionTrigger>Tailwind Configuration</AccordionTrigger>
+              <AccordionContent className="flex flex-col space-y-4">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="app-theme">
+                    <div>Upload config file</div>
+                  </Label>
+                  <div>
+                    <Input
+                      id="config-file"
+                      type="file"
+                      accept=".js,.ts"
+                      onChange={handleFileChange}
+                    />
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
         </div>
 
         <DialogFooter>
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index dbe10adf9..0fd027410 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -17,6 +17,7 @@ export interface Settings {
   // Only relevant for hosted version
   isTermOfServiceAccepted: boolean;
   anthropicApiKey: string | null; // Added property for anthropic API key
+  tailwindConfig: string | null; // Added property for tailwind config
 }
 
 export enum AppState {

From 46ed6e886ba32884db2de91297cb932dc0de789b Mon Sep 17 00:00:00 2001
From: Naman Dhingra <1608naman@gmail.com>
Date: Fri, 7 Jun 2024 03:57:06 +0530
Subject: [PATCH 2/4] option to upload tailwind config file in the settings,
 and passing it to the prompt

---
 backend/prompts/__init__.py                | 58 +++++++++++++++++++---
 backend/routes/generate_code.py            |  6 +--
 frontend/src/components/SettingsDialog.tsx |  4 +-
 3 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/backend/prompts/__init__.py b/backend/prompts/__init__.py
index 4f2e3295d..e43150de8 100644
--- a/backend/prompts/__init__.py
+++ b/backend/prompts/__init__.py
@@ -15,17 +15,49 @@
 Generate code for a SVG that looks exactly like this.
 """
 
+TAILWIND_USER_PROMPT = """
+Incorporate the below given Tailwind CSS configuration into your project to customize its appearance. The configuration may have the custom fonts, colours, sizes, spacing which can be used to match the original image. Also add the configuration in the following way:
+<script>
+    tailwind.config = {
+        // Add the configuration here
+    }
+  </script>
+
+The configuration is: 
+"""
+
 
 def assemble_imported_code_prompt(
-    code: str, stack: Stack, result_image_data_url: Union[str, None] = None
+    code: str,
+    stack: Stack,
+    tailwind_config: Union[str, None],
+    result_image_data_url: Union[str, None] = None,
 ) -> List[ChatCompletionMessageParam]:
+    
+    print('Tailwind config', tailwind_config)
+        
     system_content = IMPORTED_CODE_SYSTEM_PROMPTS[stack]
 
-    user_content = (
-        "Here is the code of the app: " + code
-        if stack != "svg"
-        else "Here is the code of the SVG: " + code
-    )
+    user_content: List[ChatCompletionContentPartParam] = [
+        {
+            "type": "text",
+            "text": (
+                "Here is the code of the app: " + code
+                if stack != "svg"
+                else "Here is the code of the SVG: " + code
+            ),
+        },
+    ]
+
+    if tailwind_config is not None:
+        user_content.insert(
+            1,
+            {
+                "type": "text",
+                "text": TAILWIND_USER_PROMPT + tailwind_config,
+            },
+        )
+
     return [
         {
             "role": "system",
@@ -42,8 +74,12 @@ def assemble_imported_code_prompt(
 def assemble_prompt(
     image_data_url: str,
     stack: Stack,
+    tailwind_config: Union[str, None],
     result_image_data_url: Union[str, None] = None,
 ) -> List[ChatCompletionMessageParam]:
+    
+    print('Tailwind config', tailwind_config)
+    
     system_content = SYSTEM_PROMPTS[stack]
     user_prompt = USER_PROMPT if stack != "svg" else SVG_USER_PROMPT
 
@@ -67,6 +103,16 @@ def assemble_prompt(
                 "image_url": {"url": result_image_data_url, "detail": "high"},
             },
         )
+    
+    if tailwind_config is not None:
+        user_content.insert(
+            2,
+            {
+                "type": "text",
+                "text": TAILWIND_USER_PROMPT + tailwind_config,
+            },
+        )
+
     return [
         {
             "role": "system",
diff --git a/backend/routes/generate_code.py b/backend/routes/generate_code.py
index 379042efe..254d58421 100644
--- a/backend/routes/generate_code.py
+++ b/backend/routes/generate_code.py
@@ -166,7 +166,7 @@ async def process_chunk(content: str):
     if params.get("isImportedFromCode") and params["isImportedFromCode"]:
         original_imported_code = params["history"][0]
         prompt_messages = assemble_imported_code_prompt(
-            original_imported_code, valid_stack
+            original_imported_code, valid_stack, params["tailwindConfig"]
         )
         for index, text in enumerate(params["history"][1:]):
             if index % 2 == 0:
@@ -185,10 +185,10 @@ async def process_chunk(content: str):
         try:
             if params.get("resultImage") and params["resultImage"]:
                 prompt_messages = assemble_prompt(
-                    params["image"], valid_stack, params["resultImage"]
+                    params["image"], valid_stack, params["tailwindConfig"], params["resultImage"],
                 )
             else:
-                prompt_messages = assemble_prompt(params["image"], valid_stack)
+                prompt_messages = assemble_prompt(params["image"], valid_stack, params["tailwindConfig"])
         except:
             await websocket.send_json(
                 {
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 211191b5a..0c3989c8d 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ChangeEvent } from "react";
 import {
   Dialog,
   DialogClose,
@@ -36,7 +36,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
     }));
   };
 
-  const handleFileChange = (event: Event) => {
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
     const target= event.target as HTMLInputElement;
     const file: File = (target.files as FileList)[0];
     if (file) {

From 9714fd25c17ecf1e4a87b10faef92504afa917b6 Mon Sep 17 00:00:00 2001
From: Naman Dhingra <1608naman@gmail.com>
Date: Tue, 11 Jun 2024 12:36:41 +0530
Subject: [PATCH 3/4] remove print statements

---
 backend/prompts/__init__.py | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/backend/prompts/__init__.py b/backend/prompts/__init__.py
index e43150de8..ea863ee65 100644
--- a/backend/prompts/__init__.py
+++ b/backend/prompts/__init__.py
@@ -33,9 +33,7 @@ def assemble_imported_code_prompt(
     tailwind_config: Union[str, None],
     result_image_data_url: Union[str, None] = None,
 ) -> List[ChatCompletionMessageParam]:
-    
-    print('Tailwind config', tailwind_config)
-        
+            
     system_content = IMPORTED_CODE_SYSTEM_PROMPTS[stack]
 
     user_content: List[ChatCompletionContentPartParam] = [
@@ -77,9 +75,7 @@ def assemble_prompt(
     tailwind_config: Union[str, None],
     result_image_data_url: Union[str, None] = None,
 ) -> List[ChatCompletionMessageParam]:
-    
-    print('Tailwind config', tailwind_config)
-    
+        
     system_content = SYSTEM_PROMPTS[stack]
     user_prompt = USER_PROMPT if stack != "svg" else SVG_USER_PROMPT
 

From bad133502887aab768ba6950011b6ac4acd0e2e9 Mon Sep 17 00:00:00 2001
From: Naman Dhingra <1608naman@gmail.com>
Date: Wed, 12 Jun 2024 01:09:38 +0530
Subject: [PATCH 4/4] UX change, shifted to left section

---
 frontend/src/App.tsx                       | 67 +++++++++++++++++++++-
 frontend/src/components/SettingsDialog.tsx | 41 +------------
 2 files changed, 67 insertions(+), 41 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 6e37df864..5c434665b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, ChangeEvent } from "react";
 import ImageUpload from "./components/ImageUpload";
 import CodePreview from "./components/CodePreview";
 import Preview from "./components/Preview";
@@ -14,7 +14,9 @@ import {
 } from "react-icons/fa";
 
 import { Switch } from "./components/ui/switch";
+// import { Label } from "./components/ui/label";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
 import SettingsDialog from "./components/SettingsDialog";
@@ -49,6 +51,8 @@ function App() {
   const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
   const [generatedCode, setGeneratedCode] = useState<string>("");
 
+  const [enableCustomTailwindConfig, setEnableCustomTailwindConfig] = useState<boolean>(false);
+
   const [inputMode, setInputMode] = useState<"image" | "video">("image");
 
   const [referenceImages, setReferenceImages] = useState<string[]>([]);
@@ -394,6 +398,44 @@ function App() {
     setAppState(AppState.CODE_READY);
   }
 
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const file: File = (target.files as FileList)[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const content = e!.target!.result;
+        if (typeof content === 'string') {
+          setSettings((s: Settings) => ({
+            ...s,
+            tailwindConfig: content,
+          }));
+        } else {
+          toast.error('Please select a valid Tailwind config file');
+        }
+      };
+      reader.readAsText(file);
+    }
+  };
+
+  const handleRemoveFile = () => {
+    try {
+      const input = document.getElementById('config-file') as HTMLInputElement;
+      const dt = new DataTransfer();
+      if(input == null) {
+        return;
+      }
+      input.files = dt.files
+      setSettings((s: Settings) => ({
+        ...s,
+        tailwindConfig: null,
+      }));
+    } catch (err) {
+      toast.error('Please select a valid Tailwind config file');
+    }
+  };
+
+
   return (
     <div className="mt-2 dark:bg-black dark:text-white">
       {IS_RUNNING_ON_CLOUD && <PicoBadge />}
@@ -426,6 +468,29 @@ function App() {
             }
           />
 
+          <div className="flex flex-row items-center justify-between w-full gap-4 my-2 text-sm m-y-2">
+            <span>Enable custom Tailwind configuration:</span>
+            <Switch
+              id="image-generation"
+              checked={enableCustomTailwindConfig}
+              onCheckedChange={() =>
+                setEnableCustomTailwindConfig(!enableCustomTailwindConfig)
+              }
+            />
+          </div>
+
+          {enableCustomTailwindConfig && (<div className="flex flex-row gap-2">
+            <Input
+              id="config-file"
+              type="file"
+              accept=".js,.ts"
+              onChange={handleFileChange}
+            />
+            <Button onClick={handleRemoveFile}>
+              Remove
+            </Button>
+          </div>)}
+
           {showReactWarning && (
             <div className="p-2 text-sm bg-yellow-200 rounded">
               Sorry - React is not currently working with GPT-4 Turbo. Please
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 0c3989c8d..79ae01d6b 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from "react";
+import React from "react";
 import {
   Dialog,
   DialogClose,
@@ -36,24 +36,6 @@ function SettingsDialog({ settings, setSettings }: Props) {
     }));
   };
 
-  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const target= event.target as HTMLInputElement;
-    const file: File = (target.files as FileList)[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const content = e!.target!.result;
-        // Here you can set the file content to the settings
-        console.log(content);
-        setSettings((s: any) => ({
-          ...s,
-          tailwindConfig: content,
-        }));
-      };
-      reader.readAsText(file);
-    }
-  };
-
   return (
     <Dialog>
       <DialogTrigger>
@@ -236,27 +218,6 @@ function SettingsDialog({ settings, setSettings }: Props) {
               </AccordionContent>
             </AccordionItem>
           </Accordion>
-
-          <Accordion type="single" collapsible className="w-full">
-            <AccordionItem value="item-1">
-              <AccordionTrigger>Tailwind Configuration</AccordionTrigger>
-              <AccordionContent className="flex flex-col space-y-4">
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="app-theme">
-                    <div>Upload config file</div>
-                  </Label>
-                  <div>
-                    <Input
-                      id="config-file"
-                      type="file"
-                      accept=".js,.ts"
-                      onChange={handleFileChange}
-                    />
-                  </div>
-                </div>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
         </div>
 
         <DialogFooter>