From 408759962961a96430fdbb271fdbd0b45b2dad3a Mon Sep 17 00:00:00 2001 From: John O'Keefe Date: Wed, 16 Sep 2026 13:59:19 -0400 Subject: [PATCH] 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. --- frontend/index.html | 4 --- frontend/src/style.css | 60 ++++++++++++++++++++++++++++++++++++++--- frontend/vite.config.ts | 3 ++- 3 files changed, 59 insertions(+), 8 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 0cc61d9..eef5cd9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -8,9 +8,5 @@
- diff --git a/frontend/src/style.css b/frontend/src/style.css index e792c77..6b291f5 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -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); diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 19ce10d..0f5d79e 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -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')] })