chore(deps): update tailwind to v4

phi-ag · Jan 29, 2025 · 0fa0be9 · 0fa0be9
1 parent 71d1334
commit 0fa0be9
Show file tree

Hide file tree

Showing 9 changed files with 366 additions and 372 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -1,4 +1,5 @@
 import { defineConfig } from "@solidjs/start/config";
+import tailwindcss from "@tailwindcss/vite";
 
 import { version } from "./package.json";
 
@@ -11,6 +12,7 @@ export default defineConfig({
     compatibilityDate: "2024-11-03"
   },
   vite: {
+    plugins: [tailwindcss()],
     define: {
       "import.meta.env.VERSION": JSON.stringify(version),
       "import.meta.env.REVISION": JSON.stringify(revision)

diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
   "devDependencies": {
     "@eslint/js": "9.19.0",
     "@playwright/test": "1.50.0",
+    "@tailwindcss/vite": "4.0.0",
     "@testing-library/jest-dom": "6.6.3",
     "@trivago/prettier-plugin-sort-imports": "5.2.2",
     "@types/eslint-plugin-jsx-a11y": "6.10.0",
@@ -52,15 +53,13 @@
     "@types/node": "22.12.0",
     "@vite-pwa/assets-generator": "0.2.6",
     "@vitest/coverage-v8": "3.0.4",
-    "autoprefixer": "10.4.20",
     "eslint": "9.19.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-solid": "0.14.5",
     "globals": "15.14.0",
-    "postcss": "8.5.1",
     "prettier": "3.4.2",
     "prettier-plugin-tailwindcss": "0.6.11",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.0.0",
     "typescript": "5.7.3",
     "typescript-eslint": "8.22.0",
     "vinxi": "0.5.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.js b/postcss.config.js
diff --git a/src/app.css b/src/app.css
@@ -1,10 +1,10 @@
-@import "@fontsource/roboto/400.css";
-@import "@fontsource/roboto/500.css";
-@import "@fontsource/roboto/700.css";
+@import "@fontsource/roboto/400.css" layer(base);
+@import "@fontsource/roboto/500.css" layer(base);
+@import "@fontsource/roboto/700.css" layer(base);
 
-@import "../material/colors.css";
-@import "../material/typography.css";
+@import "../material/colors.css" layer(base);
+@import "../material/typography.css" layer(base);
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@config '../tailwind.config.js';
diff --git a/src/components/DropZone.tsx b/src/components/DropZone.tsx
@@ -15,7 +15,7 @@ const dropZone = cva([
   "rounded-2xl",
   "border-2",
   "border-dashed",
-  "outline-none",
+  "outline-hidden",
   "border-gray-400",
   "dark:border-gray-600",
   "hover:ring-4",
@@ -115,7 +115,7 @@ const DropZone: ParentComponent<DropZoneProps> = (props) => {
         dropZone({
           class: local.class
         }),
-        dragging() ? "ring-4 ring-secondary" : "ring-primary"
+        dragging() ? "ring-secondary ring-4" : "ring-primary"
       )}
     >
       <input

diff --git a/src/entry-server.tsx b/src/entry-server.tsx
@@ -33,9 +33,9 @@ export default createHandler(
               <ThemeHeaderScript />
               {assets}
             </head>
-            <body class="flex h-full w-full flex-col bg-surface-dim text-base text-on-surface antialiased">
+            <body class="bg-surface-dim text-on-surface flex h-full w-full flex-col text-base antialiased">
               <noscript class="mx-2 my-4 flex flex-col items-center gap-2">
-                <span class="text-center text-title-lg">
+                <span class="text-title-lg text-center">
                   This app requires JavaScript ⚡
                 </span>
                 <span>Please enable it in your browser settings.</span>

diff --git a/src/routes/[...404].tsx b/src/routes/[...404].tsx
@@ -5,7 +5,7 @@ export default function NotFound(): JSXElement {
   return (
     <main class="mx-2 my-4 flex flex-1 items-center justify-center">
       <div class="flex flex-col items-center">
-        <h1 class="my-3 truncate text-headline">404 Page Not Found</h1>
+        <h1 class="text-headline my-3 truncate">404 Page Not Found</h1>
         <A class="text-title" href="/">
           Home
         </A>

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -55,9 +55,9 @@ export default function (): JSXElement {
   return (
     <div class="flex flex-1 flex-col overflow-hidden">
       <Navigation />
-      <main class="flex flex-1 flex-col gap-4 p-5 pb-5 pt-1">
+      <main class="flex flex-1 flex-col gap-4 p-5 pt-1 pb-5">
         <DropZone
-          class="min-h-64 flex-1 self-stretch bg-surface-container"
+          class="bg-surface-container min-h-64 flex-1 self-stretch"
           acceptExtensions={acceptExtensions}
           onFiles={process}
           disabled={processing()}
@@ -78,7 +78,7 @@ export default function (): JSXElement {
         <For each={results()}>
           {(result) => (
             <div class="flex flex-col gap-1 [&>div]:truncate">
-              <h2 class="truncate text-headline-sm" data-testid="name">
+              <h2 class="text-headline-sm truncate" data-testid="name">
                 {result.name}
               </h2>
               <Switch>
@@ -113,7 +113,7 @@ export default function (): JSXElement {
                     Path: <span data-testid="path">{result.info?.path}</span>
                   </div>
                   <pre
-                    class="mt-2 truncate whitespace-pre-wrap break-words"
+                    class="mt-2 truncate break-words whitespace-pre-wrap"
                     data-testid="content"
                   >
                     {result.info?.content}