Migrate website to tailwind v4

[fabian-hiller]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
valibot	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 15, 2025 1:19am

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/valibot@1248

commit: be0add8

[Copilot]

Pull Request Overview

This PR migrates the site’s Tailwind integration from v3 to v4 and updates related configs and utility classes.

• Integrate the new Tailwind Vite plugin and remove old PostCSS config
• Switch CSS spacing utilities to the new gap and important-suffix syntax
• Update build configs (tsconfig.json, vite.config.ts, package.json) for Tailwind v4

Reviewed Changes

Copilot reviewed 30 out of 31 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
website/vite.config.ts	Added Tailwind Vite plugin and adjusted polyfills
website/tsconfig.json	Changed moduleResolution from node to bundler
website/src/utils/disableTransitions.ts	Increased transition disable timeout
website/src/styles/root.css	Replaced @tailwind directives and updated custom utilities to new syntax
website/src/styles/pace.css	Scoped code-highlight styles and imported root.css
website/src/routes/playground/index.tsx	Converted space-x/space-y to gap utilities
website/src/routes/index.tsx	Converted vertical spacing from space-y to gap
website/src/routes/guides/(migration)/migrate-from-zod/CodemodEditor.tsx	Switched horizontal spacing utility to gap
website/src/routes/blog/index.tsx	Updated layout utility for Tailwind v4 arbitrary values
website/src/routes/blog/(posts)/valibot-v1-the-1-kb-schema-library/index.mdx	Updated important-suffix classes on <ul> and <li>
website/src/routes/blog/(posts)/valibot-v0.31.0-is-finally-available/index.mdx	Updated important-suffix classes on contributors list
website/src/routes/blog/(posts)/layout.tsx	Converted layout classes to new arbitrary-value syntax
website/src/routes/404.tsx	Converted max-width to arbitrary value syntax
website/src/routes/(legal)/layout.tsx	Converted max-width to arbitrary value syntax
website/src/hooks/useMDXComponents.tsx	Switched spacing utility to gap in code wrapper
website/src/components/SideBar.tsx	Updated gradient utility and spacing class style
website/src/components/RoutingIndicator.tsx	Updated transition-style class (bug introduced here)
website/src/components/Property.tsx	Converted important-suffix classes in <code>
website/src/components/PostMeta.tsx	Switched space-x to gap utility
website/src/components/Navigation.tsx	Switched vertical spacing to gap and gradient class
website/src/components/Header.tsx	Updated main gradient utility and spacing syntax
website/src/components/Footer.tsx	Switched space-x to gap
website/src/components/Expandable.tsx	Converted margin utility to important-suffix syntax
website/src/components/DocsLayout.tsx	Converted max-width, spacing utilities to new syntax
website/src/components/DocSearch.tsx	Switched shrinking classes and spacing to new syntax
website/src/components/Credits.tsx	Added missing border-color utility and trimmed lines
website/src/components/Chapters.tsx	Switched spacing and list layout to gap
website/src/components/ApiList.tsx	Converted list layout to flex with gap
website/postcss.config.cjs	Removed old PostCSS config (now handled by plugin)
website/package.json	Bumped Tailwind to v4 and updated package deps

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (4)

website/src/components/SideBar.tsx:134

• The utility 'bg-linear-to-b' is not a valid Tailwind CSS class. It should be 'bg-gradient-to-b' to achieve a vertical gradient.

            'bg-linear-to-b pointer-events-none absolute bottom-14 z-20 h-14 w-full origin-bottom translate-y-0.5 from-transparent to-white duration-300 md:bottom-16 lg:hidden dark:to-gray-900',

website/src/components/Navigation.tsx:123

• The class 'bg-linear-to-b' is invalid in Tailwind. Replace it with 'bg-gradient-to-b' for the intended gradient effect.

        <div class="bg-linear-to-b pointer-events-none absolute -top-8 -z-10 h-24 w-full from-white via-white to-transparent opacity-90 dark:from-gray-900 dark:via-gray-900" />

website/src/components/Header.tsx:111

• The class 'bg-linear-to-br' is not recognized by Tailwind. It should be 'bg-gradient-to-br' to apply a diagonal gradient.

              <span class="bg-linear-to-br from-slate-800 to-slate-600 bg-clip-text text-transparent dark:from-slate-200 dark:to-slate-400">

website/src/components/RoutingIndicator.tsx:33

• CSS 'transition:scale' is invalid because 'scale' is not a CSS property. Use 'transition:transform .5s ease-in, opacity .5s linear .25s' instead.

          'opacity-0 [transition:scale_.5s_ease-in,opacity_.5s_linear_.25s]'