chore(website): migrate to Tailwind CSS v4 by zknpr · Pull Request #415 · zknpr/SQLite-Explorer

zknpr · 2026-05-30T20:07:30Z

What

Migrates the website from Tailwind CSS v3 → v4 using the official @tailwindcss/upgrade tool. This supersedes the closed #350 (a raw 3.4 → 4.3 bump that broke the Vercel build because the config/PostCSS weren't migrated).

Changes:

PostCSS: tailwindcss + autoprefixer → @tailwindcss/postcss (autoprefixer is built into v4)
globals.css: @tailwind directives → @import "tailwindcss"; theme tokens → @theme; class-based dark mode via @custom-variant; added the v4 default-border-color compat shim; text-balance/text-gradient → @utility
tailwind.config.js removed — config is now CSS-first
CSS-var utilities migrated to v4 shorthand (bg-[var(--x)] → bg-(--x)) across 6 files

Verification

next build → compiles clean, TypeScript passes, all routes (/, /demo) statically generated
Browser: homepage and /demo render correctly (verified computed styles: theme vars, Inter font, sizing — and full-page screenshots); zero app console errors
The Vercel preview build on this PR is the production validation (the check that failed on chore(deps-dev): bump tailwindcss from 3.4.19 to 4.3.0 in /website #350)

🤖 Generated with Claude Code

@theme

Upgrades the website from Tailwind v3 to v4 via the official @tailwindcss/upgrade tool. (Supersedes the closed #350, which was a raw dependency bump that broke the Vercel build.) - PostCSS: tailwindcss + autoprefixer -> @tailwindcss/postcss - globals.css: @tailwind directives -> @import "tailwindcss"; theme tokens moved to @theme; class-based dark mode via @custom-variant; added the v4 default-border-color compatibility shim - tailwind.config.js removed (config is now CSS-first in globals.css) - CSS-variable utilities migrated to v4 shorthand (bg-[var(--x)] -> bg-(--x)) across the 6 components/pages that used them Verified: `next build` passes; homepage and /demo render correctly (computed styles + screenshots checked); zero app console errors. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

vercel · 2026-05-30T20:07:32Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
sq-lite-explorer	Ready	Preview, Comment	May 30, 2026 8:08pm

chatgpt-codex-connector · 2026-05-30T20:07:34Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.

coderabbitai · 2026-05-30T20:07:45Z

Warning

Review limit reached

@zknpr, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 53 minutes and 7 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 796c3162-e735-440d-848c-c5425717c649

📥 Commits

Reviewing files that changed from the base of the PR and between c89b5a4 and 3740401.

⛔ Files ignored due to path filters (1)

website/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (10)

website/app/demo/DemoClient.tsx
website/app/globals.css
website/components/Demos.tsx
website/components/Features.tsx
website/components/Footer.tsx
website/components/Hero.tsx
website/components/Installation.tsx
website/package.json
website/postcss.config.js
website/tailwind.config.js

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch chore/tailwind-v4

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

gemini-code-assist

Code Review

This pull request migrates the website to Tailwind CSS v4, upgrading dependencies, updating PostCSS configuration, and rewriting the global stylesheet. It also updates various React components to use the new Tailwind v4 variable shorthand syntax. The review feedback identifies a circular reference in the font definitions within globals.css, incorrect nesting of base styles and variables inside @layer utilities, and recommends using standard mapped theme classes (e.g., bg-background) instead of raw CSS variable shorthands (e.g., bg-(--ui-bg)) for better idiomatic consistency.

gemini-code-assist · 2026-05-30T20:08:59Z

+  --font-sans: var(--font-sans), system-ui, sans-serif;
+  --font-mono: var(--font-mono), monospace;


Circular Reference in Font Definitions

Defining --font-sans and --font-mono in @theme using var(--font-sans) and var(--font-mono) creates a circular reference. In CSS, a custom property cannot reference itself; doing so makes the property invalid at computed-value time, causing the font fallback to fail completely and render in the browser's default serif font.

Since these fonts are already defined with their fallbacks in the :root block, we can define them directly in @theme with their actual values and remove them from the :root block entirely. This avoids circular references and keeps the theme configuration clean.

--font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

gemini-code-assist · 2026-05-30T20:08:59Z

 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  :root {
+    /* Light theme (default) */
+    --ui-bg: #ffffff;
+    --ui-fg: #171717;
+    --ui-subtle: #f5f5f5;
+    --ui-subtle-fg: #737373;
+    --ui-edge: #e5e5e5;
+    --ui-accent: #0070f3;
+    --ui-accent-fg: #ffffff;
+
+    /* Typography */
+    --font-sans:
+      var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, sans-serif;
+    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  }

-  .text-gradient {
-    background: linear-gradient(to right, var(--ui-fg), var(--ui-subtle-fg));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+  .dark {
+    /* Dark theme */
+    --ui-bg: #0a0a0a;
+    --ui-fg: #ededed;
+    --ui-subtle: #1a1a1a;
+    --ui-subtle-fg: #a3a3a3;
+    --ui-edge: #262626;
+    --ui-accent: #0070f3;
+    --ui-accent-fg: #ffffff;
  }
+
+  /* Base styles */
+  * {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+  }
+
+  html,
+  body {
+    max-width: 100vw;
+    overflow-x: hidden;
+  }
+
+  body {
+    background-color: var(--ui-bg);
+    color: var(--ui-fg);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Utility classes */
 }


Incorrect Nesting of Base Styles and Variables in @layer utilities

Wrapping :root, .dark, and base styles (*, html, body) inside @layer utilities is a bad practice. In Tailwind CSS, the utilities layer has the highest specificity/priority. Placing base styles and custom properties inside it can cause unexpected specificity issues where base styles override component or utility styles.

In Tailwind CSS v4, custom properties and base styles should be defined at the top level (outside any @layer) or inside @layer base. Since the utility classes in this file have been migrated to @utility directives, we can completely remove the @layer utilities wrapper and place these styles at the top level.

:root { /* Light theme (default) */ --ui-bg: #ffffff; --ui-fg: #171717; --ui-subtle: #f5f5f5; --ui-subtle-fg: #737373; --ui-edge: #e5e5e5; --ui-accent: #0070f3; --ui-accent-fg: #ffffff; } .dark { /* Dark theme */ --ui-bg: #0a0a0a; --ui-fg: #ededed; --ui-subtle: #1a1a1a; --ui-subtle-fg: #a3a3a3; --ui-edge: #262626; --ui-accent: #0070f3; --ui-accent-fg: #ffffff; } /* Base styles */ * { box-sizing: border-box; padding: 0; margin: 0; } html, body { max-width: 100vw; overflow-x: hidden; } body { background-color: var(--ui-bg); color: var(--ui-fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

gemini-code-assist · 2026-05-30T20:09:00Z

+    <div className="min-h-screen bg-(--ui-bg) text-(--ui-fg) flex flex-col">
      {/* Header */}
-      <header className="border-b border-[var(--ui-edge)] px-6 py-4 flex items-center justify-between">
+      <header className="border-b border-(--ui-edge) px-6 py-4 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <a
            href="/"
-            className="flex items-center gap-2 text-[var(--ui-subtle-fg)] hover:text-[var(--ui-fg)] transition-colors"
+            className="flex items-center gap-2 text-(--ui-subtle-fg) hover:text-(--ui-fg) transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />
            <span className="text-sm">Back</span>
          </a>
-          <div className="h-6 w-px bg-[var(--ui-edge)]" />
+          <div className="h-6 w-px bg-(--ui-edge)" />
          <div className="flex items-center gap-2">
-            <Database className="w-5 h-5 text-[var(--ui-accent)]" />
+            <Database className="w-5 h-5 text-(--ui-accent)" />
            <h1 className="text-lg font-semibold">SQLite Explorer Demo</h1>
          </div>


Use Theme Configuration Instead of Raw CSS Variable Shorthands

Since the theme colors (like --color-background, --color-foreground, --color-edge, --color-accent) are already mapped to the corresponding --ui-* CSS variables in globals.css under @theme, we should use standard Tailwind utility classes (e.g., bg-background, text-foreground, border-edge, text-accent) instead of raw CSS variable shorthands like bg-(--ui-bg) or text-(--ui-fg).

This makes the code much more idiomatic, maintainable, and leverages Tailwind's theme system properly. This pattern should be applied across all migrated files.

Suggested change

<div className="min-h-screen bg-(--ui-bg) text-(--ui-fg) flex flex-col">

{/* Header */}

<header className="border-b border-[var(--ui-edge)] px-6 py-4 flex items-center justify-between">

<header className="border-b border-(--ui-edge) px-6 py-4 flex items-center justify-between">

<div className="flex items-center gap-4">

<a

href="/"

className="flex items-center gap-2 text-[var(--ui-subtle-fg)] hover:text-[var(--ui-fg)] transition-colors"

className="flex items-center gap-2 text-(--ui-subtle-fg) hover:text-(--ui-fg) transition-colors"

>

<ArrowLeft className="w-4 h-4" />

<span className="text-sm">Back</span>

</a>

<div className="h-6 w-px bg-[var(--ui-edge)]" />

<div className="h-6 w-px bg-(--ui-edge)" />

<div className="flex items-center gap-2">

<Database className="w-5 h-5 text-[var(--ui-accent)]" />

<Database className="w-5 h-5 text-(--ui-accent)" />

<h1 className="text-lg font-semibold">SQLite Explorer Demo</h1>

</div>

<div className="min-h-screen bg-background text-foreground flex flex-col">

{/* Header */}

<header className="border-b border-edge px-6 py-4 flex items-center justify-between">

<div className="flex items-center gap-4">

<a

href="/"

className="flex items-center gap-2 text-subtle-foreground hover:text-foreground transition-colors"

>

<ArrowLeft className="w-4 h-4" />

<span className="text-sm">Back</span>

</a>

<div className="h-6 w-px bg-edge" />

<div className="flex items-center gap-2">

<Database className="w-5 h-5 text-accent" />

<h1 className="text-lg font-semibold">SQLite Explorer Demo</h1>

</div>

- ci.yml: pin actions/checkout & actions/setup-node to commit SHAs and add a least-privilege `permissions: contents: read` block (CodeRabbit / SEAL). - workerFactory.test.ts: use Object.defineProperty for readonly VS Code mock fields instead of `as any` (the project's documented convention). - native_worker_ddl_batch.ts: use the real `bundle.establishConnection(...)` API (the benchmark called a non-existent `loadDatabase` masked by `as any`). - globals.css: fix the self-referential `@theme` font variables (via `--font-*-stack`) and move `:root`/`.dark` + base styles out of `@layer utilities` into the correct layers (Gemini). Verified: extension build OK; `tsc --noEmit` 0 errors; `npm test` 311 pass; website `next build` compiles. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview May 30, 2026 20:08 View deployment

gemini-code-assist Bot reviewed May 30, 2026

View reviewed changes

zknpr merged commit 04e8e34 into main May 30, 2026
6 checks passed

zknpr mentioned this pull request May 30, 2026

chore: address PR #414/#415 review feedback #417

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(website): migrate to Tailwind CSS v4#415

chore(website): migrate to Tailwind CSS v4#415
zknpr merged 1 commit into
mainfrom
chore/tailwind-v4

zknpr commented May 30, 2026

Uh oh!

vercel Bot commented May 30, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot commented May 30, 2026

Uh oh!

coderabbitai Bot commented May 30, 2026

Review limit reached

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot May 30, 2026

Uh oh!

gemini-code-assist Bot May 30, 2026

Uh oh!

gemini-code-assist Bot May 30, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		--font-sans: var(--font-sans), system-ui, sans-serif;
		--font-mono: var(--font-mono), monospace;

Uh oh!

Conversation

zknpr commented May 30, 2026

What

Verification

Uh oh!

vercel Bot commented May 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chatgpt-codex-connector Bot commented May 30, 2026

Uh oh!

coderabbitai Bot commented May 30, 2026

Review limit reached

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot May 30, 2026

Choose a reason for hiding this comment

Circular Reference in Font Definitions

Uh oh!

gemini-code-assist Bot May 30, 2026

Choose a reason for hiding this comment

Incorrect Nesting of Base Styles and Variables in @layer utilities

Uh oh!

gemini-code-assist Bot May 30, 2026

Choose a reason for hiding this comment

Use Theme Configuration Instead of Raw CSS Variable Shorthands

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented May 30, 2026 •

edited

Loading

Incorrect Nesting of Base Styles and Variables in `@layer utilities`