update to tw4 - react / html / site #965

alexandru-paduraru · 2025-07-23T13:32:50Z

No description provided.

vercel · 2025-07-23T13:32:54Z

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

Name	Status	Preview	Comments	Updated (UTC)
material-tailwind	❌ Failed (Inspect)			Jul 31, 2025 11:15am

Copilot

Pull Request Overview

This PR updates the component library to support Tailwind CSS v4, modernizing the theme system and component styling. The update involves migrating from Tailwind CSS v3 syntax to v4, updating package dependencies, and refactoring CSS class patterns across the entire codebase.

Key changes include:

Migration from outline-none to outline-hidden for better accessibility
Update gradient syntax from bg-gradient-to-* to bg-linear-to-*
Replacement of shadow utilities (shadow-sm to shadow-xs)
Updated Tailwind CSS version from 3.4.13 to 4.1.11

Reviewed Changes

Copilot reviewed 146 out of 146 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/react/package.json	Updates Tailwind CSS dependency to v4.1.11 and changes author info
packages/html/package.json	Updates Tailwind CSS dependency to v4.1.11 and changes author info
packages/react/src/theme/*.ts	Migrates theme files to use Tailwind v4 syntax patterns
apps/site/src/components/*/.tsx	Updates component implementations with new CSS class syntax
apps/site/src/app/globals.css	Adopts Tailwind v4 import syntax and configuration
apps/site/src/app/docs/content/react/guide/*.mdx	Adds Tailwind v4 installation and configuration documentation

Copilot · 2025-07-23T13:34:32Z

packages/react/src/theme/button-group.ts

  },
  baseStyle:
-    "inline-flex data-[width=full]:w-full data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:rounded-none data-[orientation=horizontal]:[&:first-child:not([data-variant=ghost])]:[&_*]:rounded-r-none data-[orientation=horizontal]:[&:last-child:not([data-variant=ghost])]:[&_*]:rounded-l-none data-[orientation=horizontal]:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:border-l-0 data-[orientation=horizontal]:[&:last-child:not([data-variant=ghost])]:[&_*]:border-l-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:rounded-none data-[orientation=vertical]:[&:first-child:not([data-variant=ghost])]:[&_*]:rounded-b-none data-[orientation=vertical]:[&:last-child:not([data-variant=ghost])]:[&_*]:rounded-t-none data-[orientation=vertical]:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:border-t-0 data-[orientation=vertical]:[&:last-child:not([data-variant=ghost])]:[&_*]:border-t-0",
+    "inline-flex data-[width=full]:w-full data-[orientation=horizontal]:flex-row **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=horizontal]:rounded-none **:[&:first-child:not([data-variant=ghost])]:data-[orientation=horizontal]:rounded-r-none **:[&:last-child:not([data-variant=ghost])]:data-[orientation=horizontal]:rounded-l-none **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=horizontal]:border-l-0 **:[&:last-child:not([data-variant=ghost])]:data-[orientation=horizontal]:border-l-0 data-[orientation=vertical]:flex-col **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=vertical]:rounded-none **:[&:first-child:not([data-variant=ghost])]:data-[orientation=vertical]:rounded-b-none **:[&:last-child:not([data-variant=ghost])]:data-[orientation=vertical]:rounded-t-none **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=vertical]:border-t-0 **:[&:last-child:not([data-variant=ghost])]:data-[orientation=vertical]:border-t-0",


This extremely long CSS class string contains unusual **: syntax that appears to be incorrect. The double asterisk syntax is not valid Tailwind CSS v4 syntax and should be replaced with proper child or descendant selectors.

Suggested change

"inline-flex data-[width=full]:w-full data-[orientation=horizontal]:flex-row **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=horizontal]:rounded-none **:[&:first-child:not([data-variant=ghost])]:data-[orientation=horizontal]:rounded-r-none **:[&:last-child:not([data-variant=ghost])]:data-[orientation=horizontal]:rounded-l-none **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=horizontal]:border-l-0 **:[&:last-child:not([data-variant=ghost])]:data-[orientation=horizontal]:border-l-0 data-[orientation=vertical]:flex-col **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=vertical]:rounded-none **:[&:first-child:not([data-variant=ghost])]:data-[orientation=vertical]:rounded-b-none **:[&:last-child:not([data-variant=ghost])]:data-[orientation=vertical]:rounded-t-none **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=vertical]:border-t-0 **:[&:last-child:not([data-variant=ghost])]:data-[orientation=vertical]:border-t-0",

"inline-flex data-[width=full]:w-full data-[orientation=horizontal]:flex-row [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=horizontal]:rounded-none [&:first-child:not([data-variant=ghost])]:data-[orientation=horizontal]:rounded-r-none [&:last-child:not([data-variant=ghost])]:data-[orientation=horizontal]:rounded-l-none [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=horizontal]:border-l-0 [&:last-child:not([data-variant=ghost])]:data-[orientation=horizontal]:border-l-0 data-[orientation=vertical]:flex-col [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=vertical]:rounded-none [&:first-child:not([data-variant=ghost])]:data-[orientation=vertical]:rounded-b-none [&:last-child:not([data-variant=ghost])]:data-[orientation=vertical]:rounded-t-none [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:data-[orientation=vertical]:border-t-0 [&:last-child:not([data-variant=ghost])]:data-[orientation=vertical]:border-t-0",

Copilot · 2025-07-23T13:34:33Z

apps/site/src/components/layout/navbar.tsx

              <Link
                href="/v3/"
-                className="mr-2 grid h-12 w-12 shrink-0 lg:!hidden"
+                className="mr-2 grid h-12 w-12 shrink-0 lg:hidden!"


The lg:hidden! syntax with the exclamation mark at the end is invalid Tailwind CSS syntax. The !important modifier should be at the beginning: lg:!hidden.

Suggested change

className="mr-2 grid h-12 w-12 shrink-0 lg:hidden!"

className="mr-2 grid h-12 w-12 shrink-0 lg:!hidden"

Copilot · 2025-07-23T13:34:33Z

apps/site/src/components/layout/navbar.tsx

                        </div>
                      </Card>
-                      <ul className="col-span-3 !m-0">
+                      <ul className="col-span-3 m-0!">


The m-0! syntax with the exclamation mark at the end is invalid Tailwind CSS syntax. The !important modifier should be at the beginning: !m-0.

Suggested change

<ul className="col-span-3 m-0!">

<ul className="col-span-3 !m-0">

Copilot · 2025-07-23T13:34:33Z

apps/site/src/components/layout/navbar.tsx

-                <Dialog.Overlay className="backdrop-blur">
-                  <Dialog.Content className="fixed left-[unset] right-3.5 top-3.5 w-full max-w-[280px] translate-x-0 translate-y-0 !animate-none rounded-lg p-1">
+                <Dialog.Overlay className="backdrop-blur-sm">
+                  <Dialog.Content className="fixed left-[unset] right-3.5 top-3.5 w-full max-w-[280px] translate-x-0 translate-y-0 animate-none! rounded-lg p-1">


The animate-none! syntax with the exclamation mark at the end is invalid Tailwind CSS syntax. The !important modifier should be at the beginning: !animate-none.

Suggested change

<Dialog.Content className="fixed left-[unset] right-3.5 top-3.5 w-full max-w-[280px] translate-x-0 translate-y-0 animate-none! rounded-lg p-1">

<Dialog.Content className="fixed left-[unset] right-3.5 top-3.5 w-full max-w-[280px] translate-x-0 translate-y-0 !animate-none rounded-lg p-1">

Copilot · 2025-07-23T13:34:33Z

apps/site/src/components/docs/navbar/sticky-navbar.tsx

  return (
    <div className="h-96 w-full overflow-scroll">
-      <Navbar className="sticky top-0 mx-auto w-full max-w-screen-xl">
+      <Navbar className="sticky top-0 mx-auto w-full max-w-(--breakpoint-xl)">


The max-w-(--breakpoint-xl) syntax appears to be incorrect Tailwind CSS v4 syntax. This should likely be max-w-screen-xl or the proper v4 equivalent for breakpoint references.

Suggested change

<Navbar className="sticky top-0 mx-auto w-full max-w-(--breakpoint-xl)">

<Navbar className="sticky top-0 mx-auto w-full max-w-screen-xl">

Copilot · 2025-07-23T13:34:34Z

packages/react/src/theme/tooltip.ts

 export const tooltipArrowTheme = {
  baseStyle:
-    "h-2 w-2 rounded-bl border border-[inherit] bg-inherit [clip-path:polygon(0_0,_100%_100%,_0_100%)] data-[placement^=bottom]:rotate-[135deg] data-[placement^=left]:rotate-[225deg] data-[placement^=right]:rotate-45 data-[placement^=top]:-rotate-45",
+    "h-2 w-2 rounded-bl border border-inherit bg-inherit [clip-path:polygon(0_0,100%_100%,0_100%)] data-[placement^=bottom]:rotate-135 data-[placement^=left]:rotate-225 data-[placement^=right]:rotate-45 data-[placement^=top]:-rotate-45",


The rotation classes rotate-135 and rotate-225 are not standard Tailwind CSS utilities. These should be replaced with arbitrary value syntax like rotate-[135deg] and rotate-[225deg].

Suggested change

"h-2 w-2 rounded-bl border border-inherit bg-inherit [clip-path:polygon(0_0,100%_100%,0_100%)] data-[placement^=bottom]:rotate-135 data-[placement^=left]:rotate-225 data-[placement^=right]:rotate-45 data-[placement^=top]:-rotate-45",

"h-2 w-2 rounded-bl border border-inherit bg-inherit [clip-path:polygon(0_0,100%_100%,0_100%)] data-[placement^=bottom]:rotate-[135deg] data-[placement^=left]:rotate-[225deg] data-[placement^=right]:rotate-45 data-[placement^=top]:-rotate-45",

Copilot · 2025-07-23T13:34:34Z

packages/react/src/theme/select.tsx

  },
  baseStyle:
-    "flex flex-col gap-0.5 bg-background p-1 rounded-lg shadow-xl shadow-black/[0.025] border border-surface outline-none",
+    "flex flex-col gap-0.5 bg-background p-1 rounded-lg shadow-xl shadow-black/2.5 border border-surface outline-hidden",


The shadow-black/2.5 syntax uses a decimal opacity value which may not be supported in Tailwind CSS. Consider using shadow-black/[0.025] for arbitrary value syntax.

Suggested change

"flex flex-col gap-0.5 bg-background p-1 rounded-lg shadow-xl shadow-black/2.5 border border-surface outline-hidden",

"flex flex-col gap-0.5 bg-background p-1 rounded-lg shadow-xl shadow-black/[0.025] border border-surface outline-hidden",

update to tw4 - react / html / site

bade8c7

alexandru-paduraru requested a review from Copilot July 23, 2025 13:32

Copilot AI reviewed Jul 23, 2025

View reviewed changes

deploy scripts

b48df4a

vercel bot had a problem deploying to Preview July 25, 2025 11:57 Failure

changed lint

32b92ef

vercel bot had a problem deploying to Preview July 25, 2025 12:18 Failure

eslint

78ceadd

vercel bot had a problem deploying to Preview July 25, 2025 12:47 Failure

lint fixes

3721eb6

vercel bot had a problem deploying to Preview July 25, 2025 13:12 Failure

pnpm

51f9561

vercel bot had a problem deploying to Preview July 25, 2025 13:16 Failure

runtime

d9ebd21

vercel bot had a problem deploying to Preview July 25, 2025 13:21 Failure

Update vercel.json

8f52bde

vercel bot had a problem deploying to Preview July 25, 2025 13:23 Failure

axelut added 2 commits July 25, 2025 16:48

Update package.json

144e615

Update .npmrc

18a9654

vercel bot had a problem deploying to Preview July 25, 2025 13:51 Failure

dragosct added 9 commits July 30, 2025 12:15

Update package.json

074b301

Update index.ts

f337824

Update index.ts

39b95c4

Update tsconfig.json

357b79a

Update tsup.config.ts

01a3949

Update package.json

684ec05

Update index.ts

f47d0c6

Create material-ripple-effects.d.ts

7b8c43e

Update tsconfig.json

96988e2

dragosct added 2 commits July 30, 2025 12:16

Update tsup.config.ts

63caeda

Update tsconfig.json

e280ce9

vercel bot had a problem deploying to Preview July 30, 2025 09:17 Failure

Update toc.tsx

f35a0d7

vercel bot had a problem deploying to Preview July 31, 2025 11:15 Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

update to tw4 - react / html / site #965

update to tw4 - react / html / site #965

Uh oh!

alexandru-paduraru commented Jul 23, 2025

Uh oh!

vercel bot commented Jul 23, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 23, 2025

Uh oh!

Copilot AI Jul 23, 2025

Uh oh!

Copilot AI Jul 23, 2025

Uh oh!

Copilot AI Jul 23, 2025

Uh oh!

Copilot AI Jul 23, 2025

Uh oh!

Copilot AI Jul 23, 2025

Uh oh!

Copilot AI Jul 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	className="mr-2 grid h-12 w-12 shrink-0 lg:hidden!"
	className="mr-2 grid h-12 w-12 shrink-0 lg:!hidden"

	<ul className="col-span-3 m-0!">
	<ul className="col-span-3 !m-0">

	<Dialog.Content className="fixed left-[unset] right-3.5 top-3.5 w-full max-w-[280px] translate-x-0 translate-y-0 animate-none! rounded-lg p-1">
	<Dialog.Content className="fixed left-[unset] right-3.5 top-3.5 w-full max-w-[280px] translate-x-0 translate-y-0 !animate-none rounded-lg p-1">

	<Navbar className="sticky top-0 mx-auto w-full max-w-(--breakpoint-xl)">
	<Navbar className="sticky top-0 mx-auto w-full max-w-screen-xl">

	"h-2 w-2 rounded-bl border border-inherit bg-inherit [clip-path:polygon(0_0,100%_100%,0_100%)] data-[placement^=bottom]:rotate-135 data-[placement^=left]:rotate-225 data-[placement^=right]:rotate-45 data-[placement^=top]:-rotate-45",
	"h-2 w-2 rounded-bl border border-inherit bg-inherit [clip-path:polygon(0_0,100%_100%,0_100%)] data-[placement^=bottom]:rotate-[135deg] data-[placement^=left]:rotate-[225deg] data-[placement^=right]:rotate-45 data-[placement^=top]:-rotate-45",

	"flex flex-col gap-0.5 bg-background p-1 rounded-lg shadow-xl shadow-black/2.5 border border-surface outline-hidden",
	"flex flex-col gap-0.5 bg-background p-1 rounded-lg shadow-xl shadow-black/[0.025] border border-surface outline-hidden",

Uh oh!

update to tw4 - react / html / site #965

Are you sure you want to change the base?

update to tw4 - react / html / site #965

Uh oh!

Conversation

alexandru-paduraru commented Jul 23, 2025

Uh oh!

vercel bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercel bot commented Jul 23, 2025 •

edited

Loading