chore: update to Tailwind CSS v4

packages/frontend/package.json

@@ -25,6 +25,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "4.0.2",
     "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.0.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.6",
@@ -33,14 +34,12 @@
     "@types/humanize-duration": "^3.27.4",
     "@typescript-eslint/eslint-plugin": "8.22.0",
     "jsdom": "^26.0.0",
-    "postcss": "^8.5.1",
-    "postcss-load-config": "^6.0.1",
     "svelte": "5.19.4",
     "svelte-fa": "^4.0.3",
     "svelte-select": "^5.8.3",
     "svelte-markdown": "^0.4.1",
     "svelte-preprocess": "^6.0.3",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "vitest": "^2.1.8"
   }
 }

packages/frontend/src/app.css

@@ -1,3 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config '../tailwind.config.cjs';

packages/frontend/src/lib/Navigation.svelte

@@ -42,7 +42,7 @@ onDestroy(() => {
 </script>
 
 <nav
-  class="z-1 w-leftsidebar min-w-leftsidebar shadow flex-col justify-between flex transition-all duration-500 ease-in-out bg-[var(--pd-secondary-nav-bg)] border-[var(--pd-global-nav-bg-border)] border-r-[1px]"
+  class="z-1 w-leftsidebar min-w-leftsidebar shadow-xs flex-col justify-between flex transition-all duration-500 ease-in-out bg-[var(--pd-secondary-nav-bg)] border-[var(--pd-global-nav-bg-border)] border-r-[1px]"
   aria-label="PreferencesNavigation">
   <div class="flex items-center">
     <div class="pt-4 pl-3 px-5 mb-10 flex items-center ml-[4px]">

packages/frontend/src/lib/RangeInput.svelte

@@ -17,7 +17,7 @@ export let value: number;
       max={max}
       step={step}
       placeholder={name}
-      class="p-2 w-24 text-right outline-none text-sm bg-[var(--pd-content-card-bg)] rounded-sm text-[var(--pd-content-card-text)] placeholder-[var(--pd-content-card-text)]" />
+      class="p-2 w-24 text-right outline-hidden text-sm bg-[var(--pd-content-card-bg)] rounded-xs text-[var(--pd-content-card-text)] placeholder-[var(--pd-content-card-text)]" />
   </div>
   <div class="w-full">
     <input

packages/frontend/src/lib/RecipeCard.svelte

@@ -20,7 +20,7 @@ function handleClick(): void {
 
 <div class="no-underline">
   <div
-    class="bg-[var(--pd-content-card-bg)] hover:bg-[var(--pd-content-card-hover-bg)] flex-grow p-4 h-full rounded-md flex-nowrap flex flex-col"
+    class="bg-[var(--pd-content-card-bg)] hover:bg-[var(--pd-content-card-hover-bg)] grow p-4 h-full rounded-md flex-nowrap flex flex-col"
     role="region"
     aria-label={recipe.name}>
     <!-- body -->
@@ -41,8 +41,7 @@ function handleClick(): void {
     <!-- footer -->
     <div class="flex flex-row">
       <!-- version -->
-      <div
-        class="flex-grow text-[var(--pd-content-card-text)] opacity-50 whitespace-nowrap overflow-x-hidden text-ellipsis">
+      <div class="grow text-[var(--pd-content-card-text)] opacity-50 whitespace-nowrap overflow-x-hidden text-ellipsis">
         {#if recipe.ref}
           <span aria-label="{recipe.name} ref">{recipe.ref}</span>
         {/if}

packages/frontend/src/lib/RecipeStatus.svelte

@@ -36,7 +36,7 @@ function onClick(): void {
       <button
         on:click={onClick}
         disabled={loading}
-        class="border-2 justify-center relative rounded border-[var(--pd-button-secondary)] text-[var(--pd-button-secondary)] hover:bg-[var(--pd-button-secondary-hover)] hover:border-[var(--pd-button-secondary-hover)] hover:text-[var(--pd-button-text)] w-10 p-2 text-center cursor-pointer flex flex-row">
+        class="border-2 justify-center relative rounded-xs border-[var(--pd-button-secondary)] text-[var(--pd-button-secondary)] hover:bg-[var(--pd-button-secondary-hover)] hover:border-[var(--pd-button-secondary-hover)] hover:text-[var(--pd-button-text)] w-10 p-2 text-center cursor-pointer flex flex-row">
         {#if loading}
           <Spinner class="text-[var(--pd-table-body-text-highlight)]" size="1em" />
         {:else}

packages/frontend/src/lib/conversation/SystemPromptBanner.svelte

@@ -71,7 +71,7 @@ onMount(() => {
       on:input={onChange}
       aria-label="system-prompt-textarea"
       bind:value={systemPrompt}
-      class="w-full p-2 mt-2 outline-none bg-[var(--pd-content-card-inset-bg)] rounded-sm text-[var(--pd-content-card-text)] placeholder-[var(--pd-content-card-text)] resize-none"
+      class="w-full p-2 mt-2 outline-hidden bg-[var(--pd-content-card-inset-bg)] rounded-xs text-[var(--pd-content-card-text)] placeholder-[var(--pd-content-card-text)] resize-none"
       rows="3"
       placeholder="Provide system prompt to define general context, instructions or guidelines to be used with each query"
     ></textarea>

packages/frontend/src/lib/icons/PlaygroundWhite.svelte

@@ -1,4 +1,4 @@
-<div role="img" class="rounded py-[6px] pl-[7px] pr-[5px]">
+<div role="img" class="rounded-xs py-[6px] pl-[7px] pr-[5px]">
   <svg
     width="24"
     height="24"

packages/frontend/src/lib/images/DashboardBanner.svelte

@@ -73,7 +73,7 @@
       y="-.116"
       width="1.137"
       height="1.231">
-      <feGaussianBlur stdDeviation="1.171" result="blur" id="feGaussianBlur66-4-1-7"></feGaussianBlur>
+      <feGaussianBlur stdDeviation="1.171" result="blur-xs" id="feGaussianBlur66-4-1-7"></feGaussianBlur>
     </filter>
     <filter
       style="color-interpolation-filters:sRGB"
@@ -82,7 +82,7 @@
       y="-.195"
       width="1.093"
       height="1.39">
-      <feGaussianBlur stdDeviation=".63" result="blur" id="feGaussianBlur55-6-6-6"></feGaussianBlur>
+      <feGaussianBlur stdDeviation=".63" result="blur-xs" id="feGaussianBlur55-6-6-6"></feGaussianBlur>
     </filter>
   </defs>
   <g id="layer1" transform="translate(-2063.771 -134.042)">

packages/frontend/src/lib/notification/GPUPromotion.svelte

@@ -37,7 +37,7 @@ const content =
         >⚡️ Supercharge Your AI: Enable GPU Acceleration and watch your LLM respond in a flash!
       </span>
       <div class="flex flex-row">
-        <div class="flex-grow">
+        <div class="grow">
           <MarkdownRenderer source={content} />
         </div>
         <div class="flex flex-col space-y-1">

packages/frontend/src/lib/progress/TaskItem.svelte

@@ -20,7 +20,7 @@ const cancel = (): void => {
     {#if task.state === 'success'}
       <svg
         role="img"
-        class="w-4 h-4 text-green-500 flex-shrink-0"
+        class="w-4 h-4 text-green-500 shrink-0"
         xmlns="http://www.w3.org/2000/svg"
         fill="currentColor"
         viewBox="0 0 20 20">
@@ -45,7 +45,7 @@ const cancel = (): void => {
     {:else}
       <svg
         role="img"
-        class="flex-shrink-0 inline w-4 h-4 text-red-600 fe"
+        class="shrink-0 inline w-4 h-4 text-red-600 fe"
         xmlns="http://www.w3.org/2000/svg"
         fill="currentColor"
         viewBox="0 0 20 20">
@@ -59,7 +59,7 @@ const cancel = (): void => {
     {task.name}
     {#if task.progress}({Math.floor(task.progress)}%){/if}
   </span>
-  <div class="flex flex-grow justify-end">
+  <div class="flex grow justify-end">
     {#if task.state === 'loading' && task.cancellationToken !== undefined}
       <button on:click={cancel} title="Cancel"><Fa icon={faClose} /></button>
     {/if}

packages/frontend/src/lib/select/Select.svelte

@@ -42,7 +42,7 @@ function handleOnClear(): void {
   --list-border="1px solid var(--pd-input-field-focused-bg)"
   --border-focused="var(--pd-input-field-focused-bg)"
   placeholder={placeholder}
-  class="!bg-[var(--pd-content-bg)] !text-[var(--pd-content-card-text)]"
+  class="bg-(--pd-content-bg)! text-(--pd-content-card-text)!"
   items={items}
   showChevron>
   <div slot="item" let:item>

packages/frontend/src/pages/ImportModel.svelte

@@ -140,7 +140,7 @@ function handleDragLeave(): void {
               on:drop|preventDefault={onFile}
               on:dragover|preventDefault={handleDragOver}
               on:dragleave|preventDefault={handleDragLeave}
-              class="w-full cursor-pointer flex-col px-4 py-8 border-2 border-dashed rounded flex justify-center items-center">
+              class="w-full cursor-pointer flex-col px-4 py-8 border-2 border-dashed rounded-xs flex justify-center items-center">
               <Fa size="1.1x" class="cursor-pointer text-[var(--pd-link)]" icon={faFileImport} />
               <span>Drag & Drop or <strong class="text-[var(--pd-link)]">Choose file</strong> to import</span>
               <span class="opacity-50 text-sm">Supported formats: .gguf, .bin</span>
@@ -186,7 +186,7 @@ function handleDragLeave(): void {
         <!-- action buttons -->
         <div class="mt-4 flex">
           <Button
-            class="flex-grow"
+            class="grow"
             on:click={submit}
             inProgress={loading}
             icon={faFileImport}

packages/frontend/src/pages/Model.svelte

@@ -30,7 +30,7 @@ export function goToUpPage(): void {
   </svelte:fragment>
   <svelte:fragment slot="content">
     <div class="flex flex-row w-full h-full bg-[var(--pd-content-bg)] overflow-y-auto">
-      <div class="flex-grow p-5">
+      <div class="grow p-5">
         <MarkdownRenderer source={model?.description} />
       </div>
     </div>

packages/frontend/src/pages/Playground.svelte

@@ -274,7 +274,7 @@ function handleOnClick(): void {
             use:requestFocus
             on:keydown={handleKeydown}
             rows="2"
-            class="w-full p-2 outline-none rounded-sm bg-[var(--pd-content-card-inset-bg)] text-[var(--pd-content-card-text)] placeholder-[var(--pd-content-card-text)]"
+            class="w-full p-2 outline-hidden rounded-xs bg-[var(--pd-content-card-inset-bg)] text-[var(--pd-content-card-text)] placeholder-[var(--pd-content-card-text)]"
             placeholder="Type your prompt here"
             disabled={!sendEnabled}></textarea>
 

packages/frontend/vite.config.js

@@ -1,5 +1,5 @@
 /**********************************************************************
- * Copyright (C) 2023-2024 Red Hat, Inc.
+ * Copyright (C) 2023-2025 Red Hat, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,6 +23,7 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { svelteTesting } from '@testing-library/svelte/vite';
 import { defineConfig } from 'vite';
 import { fileURLToPath } from 'url';
+import tailwindcss from '@tailwindcss/vite';
 
 let filename = fileURLToPath(import.meta.url);
 const PACKAGE_ROOT = path.dirname(filename);
@@ -37,7 +38,7 @@ export default defineConfig({
       '@shared/': join(PACKAGE_ROOT, '../shared') + '/',
     },
   },
-  plugins: [svelte({ hot: !process.env.VITEST }), svelteTesting()],
+  plugins: [tailwindcss(), svelte({ hot: !process.env.VITEST }), svelteTesting()],
   optimizeDeps: {
     exclude: [],
   },
@@ -47,9 +48,7 @@ export default defineConfig({
     environment: 'jsdom',
     alias: [{ find: '@testing-library/svelte', replacement: '@testing-library/svelte/svelte5' }],
     deps: {
-      inline: [
-
-      ],
+      inline: [],
     },
   },
   base: '',