Upgrade web/app to tailwind v4

.eslintrc.cjs

@@ -147,7 +147,7 @@ module.exports = {
       extends: [
         '@theguild',
         '@theguild/eslint-config/react',
-        'plugin:tailwindcss/recommended',
+        'plugin:better-tailwindcss/legacy-recommended',
         'plugin:@next/next/recommended',
       ],
       settings: {
@@ -159,13 +159,12 @@ module.exports = {
       },
       rules: {
         // conflicts with official prettier-plugin-tailwindcss and tailwind v3
-        'tailwindcss/classnames-order': 'off',
-        'tailwindcss/no-unnecessary-arbitrary-value': 'off',
-        // set more strict to highlight in editor
-        'tailwindcss/enforces-shorthand': 'error',
-        'tailwindcss/no-custom-classname': 'error',
-        'tailwindcss/migration-from-tailwind-2': 'error',
-        'tailwindcss/no-contradicting-classname': 'error',
+        'better-tailwindcss/enforce-consistent-class-order': 'off',
+        'better-tailwindcss/enforce-canonical-classes': 'warn',
+        // keeping classes in one line helps prettier-plugin-tailwindcss
+        // enable wrapping in text editors to make classes human readable
+        'better-tailwindcss/enforce-consistent-line-wrapping': 'off',
+        'better-tailwindcss/enforce-shorthand-classes': 'off',
         'react/display-name': 'off',
         'react/prop-types': 'off',
         'react/no-unknown-property': 'off',
@@ -198,13 +197,55 @@ module.exports = {
     {
       files: ['packages/web/app/**'],
       settings: {
-        tailwindcss: {
+        'better-tailwindcss': {
+          // tailwindcss 4: the path to the entry file of the css based tailwind config (eg: `src/global.css`)
+          entryPoint: 'packages/web/app/src/index.css',
           callees: tailwindCallees,
-          config: path.join(__dirname, './packages/web/app/tailwind.config.ts'),
-          whitelist: ['drag-none'],
-          cssFiles: ['packages/web/app/src/index.css', 'node_modules/graphiql/dist/style.css'],
         },
       },
+      rules: {
+        // better-tailwindcss assumes you're using v4...we're being explicit here due to our dual tailwind setups
+        'better-tailwindcss/no-deprecated-classes': 'error',
+        // Tailwind v4 uses CSS variables without var() syntax
+        'better-tailwindcss/enforce-consistent-variable-syntax': 'off',
+        'better-tailwindcss/no-unknown-classes': [
+          'error',
+          {
+            ignore: [
+              'drag-none',
+              // Tailwind v4 semantic colors from @theme in index.css
+              // Regex patterns to match all utility variants (bg-*, text-*, border-*, etc.)
+              // Includes optional opacity modifier (/40, /60, etc.)
+              '(bg|text|border|ring|outline|shadow|from|via|to|fill|stroke|caret|accent|divide|placeholder)-(background|foreground|card|card-foreground|popover|popover-foreground|primary|primary-foreground|secondary|secondary-foreground|muted|muted-foreground|accent|accent-foreground|destructive|destructive-foreground|border|input|ring|sidebar|sidebar-background|sidebar-foreground|sidebar-primary|sidebar-primary-foreground|sidebar-accent|sidebar-accent-foreground|sidebar-border|sidebar-ring|chart-1|chart-2)(/.*)?',
+              // Animation utilities (from index.css, replaces tailwindcss-animate)
+              'animate-in',
+              'animate-out',
+              'fade-in-.*',
+              'fade-out-.*',
+              'zoom-in-.*',
+              'zoom-out-.*',
+              'slide-in-from-.*',
+              'slide-out-to-.*',
+              // Custom radius from @theme
+              'rounded-xs',
+              // ring-offset with semantic colors
+              'ring-offset-.*',
+              // Data attribute variants with custom animations (for Radix UI components)
+              'data-\\[side=(top|right|bottom|left)\\]:animate-slide-(up|down|left|right)-fade',
+              // GraphiQL classes
+              'graphiql-.*',
+              // hive classes
+              'hive-.*',
+              // Schema diff custom classes (defined in index.css)
+              'schema-doc-row-.*',
+              // No scrollbar utility (defined in index.css)
+              'no-scrollbar',
+              // Tailwind v4 CSS variable syntax with parentheses
+              '.*-\\(--.*\\)',
+            ],
+          },
+        ],
+      },
     },
     {
       files: ['packages/web/app/**/*.stories.tsx', 'packages/web/docs/**'],
@@ -218,23 +259,38 @@ module.exports = {
         next: {
           rootDir: 'packages/web/docs',
         },
-        tailwindcss: {
+        'better-tailwindcss': {
+          // tailwindcss 3: the path to the tailwind config file (eg: `tailwind.config.js`)
+          tailwindConfig: 'packages/web/docs/tailwind.config.ts',
           callees: tailwindCallees,
-          whitelist: [
-            'light',
-            'hive-focus',
-            'hive-focus-within',
-            'nextra-scrollbar',
-            'no-scrollbar', // from Nextra
-            'hive-slider',
-            'hive-prose',
-            'subheader',
-          ],
-          config: path.join(__dirname, './packages/web/docs/tailwind.config.ts'),
         },
       },
       rules: {
         'import/extensions': 'off',
+        // better-tailwindcss assumes you're using v4...we're being explicit here due to our dual tailwind setups
+        'better-tailwindcss/no-deprecated-classes': 'off',
+        'better-tailwindcss/no-unknown-classes': [
+          'error',
+          {
+            ignore: [
+              'light',
+              'hive-focus',
+              'hive-focus-within',
+              'nextra-focus',
+              'nextra-scrollbar',
+              'no-scrollbar', // from Nextra
+              'hive-slider',
+              'hive-prose',
+              'subheader',
+              'subheading-anchor',
+              'duration-\\[.*\\]', // Allow arbitrary duration values like duration-[.8s]
+              'ease-\\[var\\(--.*\\)\\]', // Allow CSS variables in arbitrary ease values
+              'x:.*', // Allow Nextra 4 custom variant prefix
+            ],
+          },
+        ],
+        // Allow CSS variables in arbitrary values for Tailwind v3
+        'better-tailwindcss/enforce-consistent-variable-syntax': 'off',
       },
     },
     {

.github/workflows/release-stable.yaml

@@ -57,14 +57,21 @@ jobs:
         with:
           toolchain: stable
 
+      # see https://github.com/changesets/action/issues/523
+      - name: fix gh-api issues with changesets
+        run: |
+          echo "Cargo.lock" >> .gitignore
+          git ls-files | while read -r file; do [ -x "$file" ] && chmod -x "$file" || true; done
+
       - name: publish stable
         id: changesets
-        uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc # v1.4.10
+        uses: changesets/action@e0145edc7d9d8679003495b11f87bd8ef63c0cba # v1.5.3
         with:
           publish: pnpm release
           version: pnpm release:version
           commit: 'chore(release): update monorepo packages versions'
           title: 'Upcoming Release Changes'
+          commitMode: github-api
         env:
           GITHUB_TOKEN: ${{ secrets.BOT_GITHUB_TOKEN }}
 

.npmrc

@@ -1,3 +1,6 @@
 enable-pre-post-scripts=true
 shamefully-hoist=true
+public-hoist-pattern[]=@tailwindcss/vite
+public-hoist-pattern[]=!tailwindcss
+public-hoist-pattern[]=!@tailwindcss/*
 engine-strict=true

package.json

@@ -88,9 +88,9 @@
     "cypress": "13.17.0",
     "dotenv": "16.4.7",
     "eslint": "8.57.1",
+    "eslint-plugin-better-tailwindcss": "^4.0.0",
     "eslint-plugin-cypress": "4.1.0",
     "eslint-plugin-hive": "file:rules",
-    "eslint-plugin-tailwindcss": "npm:@hasparus/[email protected]",
     "fs-extra": "11.2.0",
     "graphql": "16.9.0",
     "gray-matter": "4.0.3",
@@ -132,6 +132,9 @@
       "ip": "npm:[email protected]",
       "miniflare@3>undici": "5.29.0",
       "tailwindcss": "3.4.17",
+      "@hive/app>tailwindcss": "4.1.18",
+      "@tailwindcss/node>tailwindcss": "4.1.18",
+      "@tailwindcss/vite>tailwindcss": "4.1.18",
       "estree-util-value-to-estree": "^3.3.3",
       "nodemailer@^6.0.0": "^7.0.11",
       "@types/nodemailer>@aws-sdk/client-sesv2": "-"

packages/web/app/package.json

@@ -69,6 +69,7 @@
     "@storybook/react-vite": "8.6.15",
     "@stripe/react-stripe-js": "3.1.1",
     "@stripe/stripe-js": "5.5.0",
+    "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-form": "^1.27.0",
     "@tanstack/react-query": "5.63.0",
     "@tanstack/react-router": "1.34.9",
@@ -93,7 +94,6 @@
     "@urql/exchange-graphcache": "7.1.0",
     "@vitejs/plugin-react": "4.3.4",
     "@xyflow/react": "12.4.4",
-    "autoprefixer": "10.4.21",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "0.2.1",
@@ -149,9 +149,7 @@
     "supertokens-auth-react": "0.38.0",
     "supertokens-web-js": "0.9.0",
     "tailwind-merge": "2.6.0",
-    "tailwindcss": "3.4.17",
-    "tailwindcss-animate": "1.0.7",
-    "tailwindcss-radix": "3.0.5",
+    "tailwindcss": "4.1.18",
     "tslib": "2.8.1",
     "tsx": "4.19.2",
     "urql": "4.1.0",

packages/web/app/src/components/common/index.tsx

@@ -5,7 +5,7 @@ export function Label({ className, children, ...props }: ComponentProps<'span'>)
   return (
     <span
       className={cn(
-        'inline-block rounded bg-yellow-50 px-2 py-1 text-xs font-medium tracking-widest text-yellow-600 dark:bg-white/10 dark:text-yellow-300',
+        'inline-block rounded-sm bg-yellow-50 px-2 py-1 text-xs font-medium tracking-widest text-yellow-600 dark:bg-white/10 dark:text-yellow-300',
         className,
       )}
       {...props}

packages/web/app/src/components/get-started/trigger.tsx

@@ -41,7 +41,7 @@ export function GetStartedProgress(props: {
       <button
         onClick={toggle}
         className={cn(
-          'cursor-pointer rounded px-4 py-2 text-left hover:opacity-80',
+          'cursor-pointer rounded-sm px-4 py-2 text-left hover:opacity-80',
           props.className,
         )}
       >
@@ -50,7 +50,7 @@ export function GetStartedProgress(props: {
           {remaining} remaining task{remaining > 1 ? 's' : ''}
         </div>
         <div>
-          <div className="relative mt-1 h-[5px] w-full overflow-hidden rounded bg-gray-800">
+          <div className="relative mt-1 h-[5px] w-full overflow-hidden rounded-sm bg-gray-800">
             <div
               className="h-full bg-orange-500"
               style={{ width: `${(completed / total) * 100}%` }}

packages/web/app/src/components/layouts/organization.tsx

@@ -124,7 +124,7 @@
   return (
     <>
       <header>
-        <div className="container flex h-[--header-height] items-center justify-between">
+        <div className="h-(--header-height) container flex items-center justify-between">
           <div className="flex flex-row items-center gap-4">
             <HiveLink className="size-8" />
             <OrganizationSelector
@@ -142,7 +142,7 @@
           </div>
         </div>
       </header>
-      <div className="relative h-[--tabs-navbar-height] border-b border-gray-800">
+      <div className="h-(--tabs-navbar-height) relative border-b border-gray-800">
         <div className="container flex items-center justify-between">
           {currentOrganization ? (
             <Tabs value={page} className="min-w-[600px]">
@@ -225,7 +225,7 @@
           ) : null}
         </div>
       </div>
       <div className="container min-h-[var(--content-height)] pb-7">
         {currentOrganization ? (
           <>
             <ProPlanBilling organization={currentOrganization} />
@@ -383,7 +383,7 @@
 }) {
   return (
     <Dialog open={props.isOpen} onOpenChange={props.toggleModalOpen}>
-      <DialogContent className="container w-4/5 max-w-[600px] md:w-3/5">
+      <DialogContent className="w-4/5 max-w-[600px] md:w-3/5">
         <Form {...props.form}>
           <form onSubmit={props.form.handleSubmit(props.onSubmit)} data-cy="create-project-form">
             <DialogHeader className="mb-8">

packages/web/app/src/components/layouts/project.tsx

@@ -87,7 +87,7 @@
   return (
     <>
       <header>
-        <div className="container flex h-[--header-height] items-center justify-between">
+        <div className="h-(--header-height) container flex items-center justify-between">
           <div className="flex flex-row items-center gap-4">
             <HiveLink className="size-8" />
             <ProjectSelector
@@ -111,7 +111,7 @@
         <ResourceNotFoundComponent title="404 - This project does not seem to exist." />
       ) : (
         <>
-          <div className="relative h-[--tabs-navbar-height] border-b border-gray-800">
+          <div className="h-(--tabs-navbar-height) relative border-b border-gray-800">
             <div className="container flex items-center justify-between">
               {currentOrganization && currentProject ? (
                 <Tabs value={page}>
@@ -174,7 +174,7 @@
               />
             </div>
           </div>
           <div className="container min-h-[var(--content-height)] pb-7">
             <div className={className}>{children}</div>
           </div>
         </>
@@ -298,7 +298,7 @@
 }) {
   return (
     <Dialog open={props.isOpen} onOpenChange={props.toggleModalOpen}>
-      <DialogContent className="container w-4/5 max-w-[520px] md:w-3/5">
+      <DialogContent className="w-4/5 max-w-[520px] md:w-3/5">
         <Form {...props.form}>
           <form className="space-y-8" onSubmit={props.form.handleSubmit(props.onSubmit)}>
             <DialogHeader>

packages/web/app/src/components/layouts/target.tsx

@@ -157,7 +157,7 @@
       targetSlug={props.targetSlug}
     >
       <header>
-        <div className="container flex h-[--header-height] items-center justify-between">
+        <div className="h-(--header-height) container flex items-center justify-between">
           <div className="flex flex-row items-center gap-4">
             <HiveLink className="size-8" />
             <TargetSelector
@@ -183,7 +183,7 @@
         <ResourceNotFoundComponent title="404 - This project does not seem to exist." />
       ) : (
         <>
-          <div className="relative h-[--tabs-navbar-height] border-b border-gray-800">
+          <div className="h-(--tabs-navbar-height) relative border-b border-gray-800">
             <div className="container flex items-center justify-between">
               {currentOrganization && currentProject && currentTarget ? (
                 <Tabs className="flex h-full grow flex-col" value={page}>
@@ -349,7 +349,7 @@
               )}
             </div>
           </div>
           <div className={cn('container min-h-[var(--content-height)] pb-7', className)}>
             {children}
           </div>
         </>

packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx

@@ -138,13 +138,13 @@ export function BillingPlanPicker({
 }): ReactElement {
   const plans = useFragment(BillingPlanPicker_PlanFragment, props.plans);
   return (
-    <RadioGroup value={value} onValueChange={onPlanChange} className="flex gap-4 md:!flex-row">
+    <RadioGroup value={value} onValueChange={onPlanChange} className="md:flex-row! flex gap-4">
       {plans.map(plan => (
         <Radio
           disabled={disabled}
           value={plan.planType}
           key={plan.id}
-          className="!rounded-md border p-4 md:w-1/3"
+          className="rounded-md! border p-4 md:w-1/3"
         >
           <Plan
             key={plan.id}

packages/web/app/src/components/project/settings/native-composition.tsx

@@ -43,7 +43,7 @@ const IncrementalNativeCompositionSwitch = (props: {
   return (
     <div
       className={cn(
-        'flex flex-row items-center gap-x-10 rounded border-[1px] border-gray-800 bg-gray-800/50 p-4',
+        'flex flex-row items-center gap-x-10 rounded-sm border border-gray-800 bg-gray-800/50 p-4',
         mutation.fetching && 'animate-pulse',
       )}
     >

packages/web/app/src/components/target/explorer/common.tsx

@@ -62,7 +62,7 @@ export function SchemaExplorerUsageStats(props: {
           </div>
           <div
             title={`${toDecimal(percentage)}% of all requests`}
-            className="relative z-0 mt-1 w-full min-w-[25px] overflow-hidden rounded bg-orange-500/20"
+            className="relative z-0 mt-1 w-full min-w-[25px] overflow-hidden rounded-sm bg-orange-500/20"
             style={{ width: 50, height: 5 }}
           >
             <div className="z-0 h-full bg-orange-500" style={{ width: `${percentage}%` }} />

packages/web/app/src/components/target/laboratory/create-collection-modal.tsx

@@ -235,10 +235,7 @@ export function CreateCollectionModalContent(props: {
 }) {
   return (
     <Dialog open={props.isOpen} onOpenChange={props.toggleModalOpen}>
-      <DialogContent
-        className="container w-4/5 max-w-[600px] md:w-3/5"
-        data-cy="create-collection-modal"
-      >
+      <DialogContent className="w-4/5 max-w-[600px] md:w-3/5" data-cy="create-collection-modal">
         {!props.fetching && (
           <Form {...props.form}>
             <form className="space-y-8" onSubmit={props.form.handleSubmit(props.onSubmit)}>

packages/web/app/src/components/target/laboratory/create-operation-modal.tsx

@@ -190,10 +190,7 @@ export function CreateOperationModalContent(props: {
         props.form.reset();
       }}
     >
-      <DialogContent
-        className="container w-4/5 max-w-[600px] md:w-3/5"
-        data-cy="create-operation-modal"
-      >
+      <DialogContent className="w-4/5 max-w-[600px] md:w-3/5" data-cy="create-operation-modal">
         {!props.fetching && (
           <Form {...props.form}>
             <form className="space-y-8" onSubmit={props.form.handleSubmit(props.onSubmit)}>
@@ -231,7 +228,7 @@ export function CreateOperationModalContent(props: {
                             {props.collections.find(c => c.id === field.value)?.name ??
                               'Select a Collection'}
                           </SelectTrigger>
-                          <SelectContent className="w-[--radix-select-trigger-width]">
+                          <SelectContent className="w-(--radix-select-trigger-width)">
                             {props.collections.map(c => (
                               <SelectItem key={c.id} value={c.id} data-cy="collection-select-item">
                                 {c.name}