fix: downgrade to tailwindcss v3 because of issues

package.json

@@ -51,7 +51,7 @@
     "sass": "^1.85.1",
     "sass-loader": "^16.0.5",
     "semver": "^7.7.1",
-    "tailwindcss": "^4.0.13",
+    "tailwindcss": "3",
     "url": "^0.11.4"
   },
   "dependencies": {
@@ -63,8 +63,7 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.36.4",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/vite": "^4.0.12",
     "@tsconfig/svelte": "^5.0.4",
     "@types/chrome": "^0.0.308",
     "@types/color": "^4.2.0",
@@ -87,6 +86,7 @@
     "lodash": "^4.17.21",
     "million": "^3.1.11",
     "motion": "^12.4.12",
+    "postcss": "^8.5.3",
     "react": "17",
     "react-best-gradient-color-picker": "3.0.11",
     "react-dom": "17",

src/interface/components/TabbedContainer.svelte

@@ -49,7 +49,7 @@
       />
       {#each tabs as { title }, index}
         <button
-          class="relative z-10 flex-1 px-4 py-2 focus-visible:outline-hidden"
+          class="relative z-10 flex-1 px-4 py-2 focus-visible:outline-none"
           onclick={() => activeTab = index}
         >
           {title}
@@ -65,7 +65,7 @@
     >
       <div class="flex">
         {#each tabs as { Content, props }, index}
-          <div class="absolute focus:outline-hidden w-full transition-opacity duration-300 overflow-y-scroll no-scrollbar h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
+          <div class="absolute focus:outline-none w-full transition-opacity duration-300 overflow-y-scroll no-scrollbar h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
             style="left: {index * 100}%;">
              <Content {...props} />
           </div>

src/interface/components/store/Backgrounds.svelte

@@ -310,7 +310,7 @@
 </div>
 
 {#if settingsState.devMode}
-  <div class="p-4 mt-8 rounded-xs bg-zinc-100 dark:bg-zinc-800">
+  <div class="p-4 mt-8 rounded bg-zinc-100 dark:bg-zinc-800">
     <h3 class="mb-2 font-bold">Debug Info:</h3>
     <p>{debugInfo}</p>
     <p>Total backgrounds: {backgrounds.length}</p>

src/interface/components/store/CoverSwiper.svelte

@@ -43,7 +43,7 @@
             onclick={() => setDisplayTheme(theme)}
           >
             <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-full" />
-            <div class='absolute bottom-0 left-0 p-8 z-1'>
+            <div class='absolute bottom-0 left-0 p-8 z-[1]'>
               <h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
               <p class='text-lg text-white'>{theme.description}</p>
             </div>

src/interface/components/store/FilterPanel.svelte

@@ -31,7 +31,7 @@
   }
 </script>
 
-<div class="p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+<div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
   <h2 class="mb-4 text-xl font-semibold">Filters</h2>
   
   <div class="mb-4">
@@ -47,11 +47,9 @@
       </label>
     </div>
   </div>
-  
+    
-  <!-- Add similar sections for color, resolution, and orientation -->
-  
   <button 
-    class="px-4 py-2 mt-4 text-white bg-red-500 rounded-xs hover:bg-red-600" 
+    class="px-4 py-2 mt-4 text-white bg-red-500 rounded hover:bg-red-600" 
     onclick={clearFilters}
   >
     Clear Filters

src/interface/components/store/Header.svelte

@@ -47,7 +47,7 @@
         placeholder="Search themes..."
         value={searchTerm}
         oninput={(e: any) => setSearchTerm(e.target.value)}
-        class="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-hidden focus:border-transparent" />
+        class="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-none focus:border-transparent" />
       <svg
         class="absolute left-3 top-1/2 w-5 h-5 text-gray-400 transform -translate-y-1/2 dark:text-gray-200"
         fill="none"

src/interface/components/themes/ThemeSelector.svelte

@@ -131,7 +131,7 @@
     {#if themes}
       {#each themes.themes as theme (theme.id)}
         <button
-          class="relative group w-full aspect-theme flex justify-center items-center rounded-xl transition outline-2 outline-zinc-300 dark:outline-white {theme.id === themes.selectedTheme ? 'outline-4' : 'outline-0'}"
+          class="relative group w-full aspect-theme flex justify-center items-center rounded-xl transition ring dark:ring-white ring-zinc-300 {theme.id === themes.selectedTheme ? 'dark:ring-2 ring-4' : 'ring-0'}"
           onclick={() => handleThemeClick(theme)}
         >
           {#if isEditMode}

src/interface/index.css

@@ -1,53 +1,13 @@
-@import './components/ColourPicker.css' layer(base);
+@import './components/ColourPicker.css';
-@import 'tailwindcss';
 
-@plugin '@tailwindcss/forms';
+@tailwind base;
-
+@tailwind components;
-@custom-variant dark (&:is(.dark *));
+@tailwind utilities;
-
-@theme {
-  --text-*: initial;
-  --text-xs: 0.65rem;
-  --text-sm: 0.775rem;
-  --text-base: 0.65rem;
-  --text-md: 0.65rem;
-  --text-lg: 1rem;
-  --text-xl: 1.25rem;
-  --text-2xl: 1.5rem;
-  --text-3xl: 1.875rem;
-  --text-4xl: 2.25rem;
-  --text-5xl: 3rem;
-  --text-6xl: 4rem;
-  --text-7xl: 5rem;
-  --text-8xl: 6rem;
-  --text-9xl: 8rem;
-  --text-10xl: 10rem;
-  --text-11xl: 12rem;
-  --text-12xl: 14rem;
-  --text-13xl: 16rem;
-  --text-14xl: 18rem;
-
-  --font-IconFamily: IconFamily;
-
-  --animate-spin-fast: spin 0.4s linear infinite;
-
-  --aspect-theme: 5 / 1;
-}
 
 button {
   @apply cursor-pointer;
 }
 
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
 ::-webkit-scrollbar {
   display: none;
 }

src/interface/pages/themeCreator.svelte

@@ -208,7 +208,7 @@
             {#each theme.CustomImages as image (image.id)}
               <div class="flex gap-2 items-center px-2 py-2 mb-4 h-16 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
                 <div class="h-full">
-                  <img src={URL.createObjectURL(image.blob)} alt={image.variableName} class="object-contain h-full rounded-xs" />
+                  <img src={URL.createObjectURL(image.blob)} alt={image.variableName} class="object-contain h-full rounded" />
                 </div>
                 <input
                   type="text"
@@ -292,7 +292,7 @@
         id='themeDescription'
         placeholder="Don't worry, this one's optional!"
         bind:value={theme.description}
-        class='p-2 w-full rounded-lg border-0 transition dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:outline-hidden focus:ring-1 focus:ring-zinc-100 dark:focus:ring-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600'></textarea>
+        class='p-2 w-full rounded-lg border-0 transition dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:outline-none focus:ring-1 focus:ring-zinc-100 dark:focus:ring-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600'></textarea>
     </div>
 
     <Divider />
@@ -308,7 +308,7 @@
       {/if}
       {#if theme.coverImage}
         <div class="absolute z-20 w-full h-full opacity-0 transition-opacity pointer-events-none group-hover:opacity-100 bg-black/20"></div>
-        <img src="{typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}" alt='Cover' class="object-cover absolute z-0 w-full h-full rounded-xs" />
+        <img src="{typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}" alt='Cover' class="object-cover absolute z-0 w-full h-full rounded" />
       {/if}
     </div>
 

src/postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
+  

tailwind.config.js

@@ -0,0 +1,45 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx,html,svelte}",
+  ],
+  darkMode: "class",
+  theme: {
+    fontSize: {
+      "xs": ".65rem",
+      "sm": ".775rem",
+      "base": "0.65rem",
+      "md": "0.65rem",
+      "lg": "1rem",
+      "xl": "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "4rem",
+      "7xl": "5rem",
+      "8xl": "6rem",
+      "9xl": "8rem",
+      "10xl": "10rem",
+      "11xl": "12rem",
+      "12xl": "14rem",
+      "13xl": "16rem",
+      "14xl": "18rem",
+    },
+    extend: {
+      fontFamily: {
+        "IconFamily": "IconFamily"
+      },
+      animation: {
+        'spin-fast': 'spin 0.4s linear infinite',
+      },
+      aspectRatio: {
+        "theme": "5 / 1"
+      }
+    }
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+  ],
+};
+  

vite.config.ts

@@ -10,7 +10,6 @@ import million from "million/compiler";
 //import MillionLint from '@million/lint';
 
 import { svelte } from '@sveltejs/vite-plugin-svelte'
-import tailwindcss from '@tailwindcss/vite';
 
 import { chrome } from './src/manifests/chrome';
 import { brave } from './src/manifests/brave';
@@ -31,7 +30,6 @@ const mode = process.env.MODE || 'chrome'; // Check the environment variable to
 export default defineConfig(({ command }) => ({
   plugins: [
     base64Loader,
-    tailwindcss(),
     svelte({
       emitCss: false
     }),