upgrade to tailwind 4 (#263)

outerbase · Jan 25, 2025 · f617abe · f617abe
1 parent cefb05f
commit f617abe
Show file tree

Hide file tree

Showing 60 changed files with 798 additions and 924 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -105,6 +105,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
     "@testing-library/jest-dom": "^6.2.1",
     "@testing-library/react": "^14.1.2",
     "@types/deep-equal": "^1.0.4",
@@ -119,7 +120,6 @@
     "@types/wicg-file-system-access": "^2023.10.5",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "autoprefixer": "^10.4.19",
     "drizzle-kit": "^0.20.14",
     "eslint": "^8",
     "eslint-config-next": "14.0.4",
@@ -128,10 +128,10 @@
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.6.10",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "shiki": "^1.12.0",
     "showdown": "^2.1.0",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.0.0",
     "ts-node": "^10.9.2",
     "tsx": "^4.7.1",
     "typescript": "^5"

diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx
@@ -68,7 +68,7 @@ function HeroSection() {
   return (
     <div className="mt-32 relative h-[428px]">
       <div
-        className="absolute top-0 bottom-0 left-0 right-0 transform-gpu before:absolute before:top-0 before:z-10 before:h-32 before:w-full before:bg-gradient-to-b before:from-black before:to-black/0 after:absolute after:bottom-0 after:left-0 after:h-full after:w-full after:bg-gradient-to-t after:from-black after:to-black/0"
+        className="absolute top-0 bottom-0 left-0 right-0 transform-gpu before:absolute before:top-0 before:z-10 before:h-32 before:w-full before:bg-linear-to-b before:from-black before:to-black/0 after:absolute after:bottom-0 after:left-0 after:h-full after:w-full after:bg-linear-to-t after:from-black after:to-black/0"
         style={{
           background: `url(/hero-banner.jpg)`,
           backgroundPosition: "center",

diff --git a/src/app/(public)/playground/page.tsx b/src/app/(public)/playground/page.tsx
@@ -70,7 +70,7 @@ export default async function PlaygroundPage() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
           {templateList.map((t) => {
             return (
-              <div className="border p-4 rounded-lg shadow" key={t.id}>
+              <div className="border p-4 rounded-lg shadow-sm" key={t.id}>
                 <h2 className="font-bold mb-2">{t.name}</h2>
                 <p className="text-sm text-secondary-foreground">{t.summary}</p>
                 <div className="mt-2">

diff --git a/src/app/(theme)/connect/connection-list.tsx b/src/app/(theme)/connect/connection-list.tsx
@@ -226,7 +226,7 @@ export default function ConnectionList({
               value={search}
               onChange={(e) => setSearch(e.currentTarget.value)}
               type="text"
-              className="bg-inherit p-2 pl-2 pr-2 outline-none text-sm  h-full grow"
+              className="bg-inherit p-2 pl-2 pr-2 outline-hidden text-sm  h-full grow"
               placeholder="Search base name"
             />
           </div>

diff --git a/src/app/(theme)/connect/saved-connection-card.tsx b/src/app/(theme)/connect/saved-connection-card.tsx
@@ -53,7 +53,7 @@ export default function ConnectionItemCard({
         >
           <div className="py-4 shrink-0 ml-3 mr-2 flex flex-col gap-3 flex-1">
             <div className="flex gap-2 overflow-hidden">
-              <div className="w-10 h-10 bg-accent flex justify-center items-center rounded flex-shrink-0">
+              <div className="w-10 h-10 bg-accent flex justify-center items-center rounded shrink-0">
                 <DatabaseIcon className="w-6 h-6 text-accent-foreground" />
               </div>
 

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,27 +1,140 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-html,
-body {
-  overscroll-behavior-x: none;
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-*: initial;
+  --font-sans: Inter, Helvetica, ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-selected: var(--selected);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+  @keyframes shake {
+    10%,
+    90% {
+      transform: translate3d(-1px, 0, 0);
+    }
+    20%,
+    80% {
+      transform: translate3d(2px, 0, 0);
+    }
+    30%,
+    50%,
+    70% {
+      transform: translate3d(-4px, 0, 0);
+    }
+    40%,
+    60% {
+      transform: translate3d(4px, 0, 0);
+    }
+  }
 }
 
-:root {
-  --color-table-grid: #eee;
-  --color-table-change: #f6e58d;
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
 
-  --color-table-cell-number: #2980b9;
-  --color-table-cell-code: #95a5a6;
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
 
-  --color-table-row-selected: #e4e6f1;
-  --color-table-row-removed: #ff8b81;
-  --color-table-row-new: #7bed9f;
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@layer utilities {
+  html,
+  body {
+    overscroll-behavior-x: none;
+  }
+
+  :root {
+    --color-table-grid: #eee;
+    --color-table-change: #f6e58d;
+
+    --color-table-cell-number: #2980b9;
+    --color-table-cell-code: #95a5a6;
 
-  /* For Scroll */
-  --color-scrollbar: #0001;
-  --color-scrollbar-track: #0001;
-  --color-scrollbar-hover: #0005;
+    --color-table-row-selected: #e4e6f1;
+    --color-table-row-removed: #ff8b81;
+    --color-table-row-new: #7bed9f;
+
+    /* For Scroll */
+    --color-scrollbar: #0001;
+    --color-scrollbar-track: #0001;
+    --color-scrollbar-hover: #0005;
+  }
 }
 
 @layer base {
@@ -100,24 +213,26 @@ body {
   }
 }
 
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
+@layer utilities {
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
 
-/* Track */
-::-webkit-scrollbar-track {
-  padding: 2px;
-}
+  /* Track */
+  ::-webkit-scrollbar-track {
+    padding: 2px;
+  }
 
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: var(--scroll-bar);
-}
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: var(--scroll-bar);
+  }
 
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: var(--scroll-bar);
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--scroll-bar);
+  }
 }
 
 @layer base {
@@ -190,7 +305,7 @@ body {
 
 .libsql-table td,
 .libsql-table th {
-  @apply border-b border-r;
+  @apply border-r border-b;
   overflow: hidden;
 }
 
@@ -244,23 +359,23 @@ For Markdown Side
 }
 
 .mdx-content h2 {
-  @apply text-2xl my-4 pb-2 border-b font-bold;
+  @apply my-4 border-b pb-2 text-2xl font-bold;
 }
 
 .mdx-content h3 {
-  @apply text-xl my-4 pb-2 border-b font-bold;
+  @apply my-4 border-b pb-2 text-xl font-bold;
 }
 
 .mdx-content ul {
-  @apply list-disc pl-8 my-4;
+  @apply my-4 list-disc pl-8;
 }
 
 .mdx-content ol {
-  @apply list-decimal pl-8 my-4;
+  @apply my-4 list-decimal pl-8;
 }
 
 .mdx-content pre {
-  @apply bg-gray-200 dark:bg-gray-700 p-4 leading-5 rounded overflow-x-auto m-0;
+  @apply m-0 overflow-x-auto rounded bg-gray-200 p-4 leading-5 dark:bg-gray-700;
 }
 
 .mdx-content p {

diff --git a/src/components/gui/export/export-result-button.tsx b/src/components/gui/export/export-result-button.tsx
@@ -262,7 +262,7 @@ export default function ExportResultButton({
             </RadioGroup>
           </div>
 
-          <div className="flex flex-grow border-b mb-2">
+          <div className="flex grow border-b mb-2">
             <div className="flex flex-col px-4 p-2 border-r">
               <small>Output format</small>
               <RadioGroup
@@ -331,8 +331,8 @@ export default function ExportResultButton({
                 </div>
               </RadioGroup>
             </div>
-            <div className="flex-grow">
-              <div className="flex flex-grow px-4 p-2 flex-col border-b">
+            <div className="grow">
+              <div className="flex grow px-4 p-2 flex-col border-b">
                 <small>Selection</small>
                 <div>
                   <RadioGroup
@@ -410,7 +410,7 @@ export default function ExportResultButton({
                   </RadioGroup>
                 </div>
               </div>
-              <div className="flex flex-grow ml-2 p-2 flex-col">
+              <div className="flex grow ml-2 p-2 flex-col">
                 <small>Options</small>
                 <div className="flex flex-col space-y-2 mt-2">
                   <div className="flex items-center space-x-4">
@@ -419,7 +419,7 @@ export default function ExportResultButton({
                       <input
                         disabled={format !== "delimited"}
                         type="text"
-                        className="bg-transparent flex-1 outline-none text-sm font-light"
+                        className="bg-transparent flex-1 outline-hidden text-sm font-light"
                         value={exportOptions?.fieldSeparator || ""}
                         onChange={(e) => {
                           setExportOptions({
@@ -436,7 +436,7 @@ export default function ExportResultButton({
                       <input
                         disabled={format !== "delimited"}
                         type="text"
-                        className="bg-transparent flex-1 outline-none text-sm font-light"
+                        className="bg-transparent flex-1 outline-hidden text-sm font-light"
                         value={exportOptions?.lineTerminator || ""}
                         onChange={(e) => {
                           setExportOptions({
@@ -454,7 +454,7 @@ export default function ExportResultButton({
                       <input
                         disabled={format !== "delimited"}
                         type="text"
-                        className="bg-transparent flex-1 outline-none text-sm font-light"
+                        className="bg-transparent flex-1 outline-hidden text-sm font-light"
                         value={exportOptions?.encloser || ""}
                         onChange={(e) => {
                           setExportOptions({

diff --git a/src/components/gui/providers/full-editor-provider.tsx b/src/components/gui/providers/full-editor-provider.tsx
@@ -76,15 +76,15 @@ function FullEditorSheet({ option }: { option: FullEditorOption }) {
           {option.format === "text" && (
             <textarea
               autoFocus
-              className="flex-grow p-4 w-full outline-none bg-inherit font-mono"
+              className="grow p-4 w-full outline-hidden bg-inherit font-mono"
               value={value}
               onChange={(e) => setValue(e.currentTarget.value)}
               readOnly={option.readOnly}
             />
           )}
 
           {option.format === "json" && (
-            <div className="flex-grow overflow-hidden">
+            <div className="grow overflow-hidden">
               <JsonEditor
                 value={value}
                 onChange={setValue}