chore(frontend): Tailwind v4 CSS-first config

Move every tailwind.config.js option into src/style.css: @import, @plugin flowbite/plugin, @source for the flowbite-svelte dist (node_modules is gitignored so auto-detection skips the lib), @theme for the custom primary scale, and @utility container porting the old center plus responsive padding and max-width ladders. darkMode media is v4s default so it needs no equivalent. vite.config.ts gains the tailwindcss() plugin; index.html loses the dead flowbite.js tag. style.css also carries two v4-behavior restorations found while verifying the built CSS: pointer cursor on buttons (v4 preflight dropped v3s rule) and the container max-width ladder the first pass at this file omitted.
2026-09-16 13:59:19 -04:00
parent 577c7d0d5b
commit 4087599629
3 changed files with 59 additions and 8 deletions
@@ -8,9 +8,5 @@
    <body>
        <div id="app"></div>
        <script src="./src/main.ts" type="module"></script>
-        <script
-            src="./node_modules/flowbite/dist/flowbite.js"
-            type="module"
-        ></script>
    </body>
 </html>
@@ -1,6 +1,60 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@plugin 'flowbite/plugin';
+
+@source "../node_modules/flowbite-svelte/dist";
+
+@theme {
+    --color-primary-50: #FFF5F2;
+    --color-primary-100: #FFF1EE;
+    --color-primary-200: #FFE4DE;
+    --color-primary-300: #FFD5CC;
+    --color-primary-400: #FFBCAD;
+    --color-primary-500: #FE795D;
+    --color-primary-600: #EF562F;
+    --color-primary-700: #EB4F27;
+    --color-primary-800: #CC4522;
+    --color-primary-900: #A5371B;
+}
+
+@utility container {
+    width: 100%;
+    margin-inline: auto;
+    padding-inline: 1rem;
+
+    @media (width >= theme(--breakpoint-sm)) {
+        max-width: theme(--breakpoint-sm);
+        padding-inline: 2rem;
+    }
+
+    @media (width >= theme(--breakpoint-md)) {
+        max-width: theme(--breakpoint-md);
+    }
+
+    @media (width >= theme(--breakpoint-lg)) {
+        max-width: theme(--breakpoint-lg);
+        padding-inline: 4rem;
+    }
+
+    @media (width >= theme(--breakpoint-xl)) {
+        max-width: theme(--breakpoint-xl);
+        padding-inline: 5rem;
+    }
+
+    @media (width >= theme(--breakpoint-2xl)) {
+        max-width: theme(--breakpoint-2xl);
+        padding-inline: 6rem;
+    }
+}
+
+@layer base {
+    /* Tailwind v4 removed the v3 preflight rule that gave buttons a
+    pointer cursor. Restore it (disabled buttons keep the default). */
+    button:not(:disabled),
+    [role="button"]:not(:disabled) {
+        cursor: pointer;
+    }
+}

 html {
    background-color: rgba(27, 38, 54, 1);
@@ -1,5 +1,6 @@
 import {defineConfig} from 'vite'
 import {svelte} from '@sveltejs/vite-plugin-svelte'
+import tailwindcss from '@tailwindcss/vite'
 import wails from '@wailsio/runtime/plugins/vite'

 // https://vitejs.dev/config/
@@ -9,5 +10,5 @@ export default defineConfig({
    port: Number(process.env.WAILS_VITE_PORT) || 5173,
    strictPort: true,
  },
-  plugins: [svelte(), wails('./bindings')]
+  plugins: [tailwindcss(), svelte(), wails('./bindings')]
 })