chore(ui): update tailwind (#9049)

Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com>

frontend/hero.ts

@@ -0,0 +1,18 @@
+import { heroui } from "@heroui/react";
+
+export default heroui({
+  defaultTheme: "dark",
+  layout: {
+    radius: {
+      small: "5px",
+      large: "20px",
+    },
+  },
+  themes: {
+    dark: {
+      colors: {
+        primary: "#4465DB",
+      },
+    },
+  },
+});

frontend/package.json

@@ -7,7 +7,7 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "@heroui/react": "2.7.8",
+    "@heroui/react": "^2.8.0-beta.7",
     "@microlink/react-json-view": "^1.26.2",
     "@monaco-editor/react": "^4.7.0-rc.0",
     "@react-router/node": "^7.6.1",
@@ -16,6 +16,8 @@
     "@reduxjs/toolkit": "^2.8.2",
     "@stripe/react-stripe-js": "^3.7.0",
     "@stripe/stripe-js": "^7.3.0",
+    "@tailwindcss/postcss": "^4.1.8",
+    "@tailwindcss/vite": "^4.1.8",
     "@tanstack/react-query": "^5.77.2",
     "@vitejs/plugin-react": "^4.4.0",
     "@xterm/addon-fit": "^0.10.0",
@@ -23,7 +25,7 @@
     "axios": "^1.9.0",
     "clsx": "^2.1.1",
     "eslint-config-airbnb-typescript": "^18.0.0",
-    "framer-motion": "^12.14.0",
+    "framer-motion": "^12.16.0",
     "i18next": "^25.2.1",
     "i18next-browser-languagedetector": "^8.1.0",
     "i18next-http-backend": "^3.0.2",
@@ -115,10 +117,9 @@
     "jsdom": "^26.1.0",
     "lint-staged": "^16.0.0",
     "msw": "^2.6.6",
-    "postcss": "^8.5.2",
     "prettier": "^3.5.3",
     "stripe": "^18.1.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.8",
     "typescript": "^5.8.3",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^5.1.4",

frontend/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
-    autoprefixer: {},
   },
-}
+};

frontend/src/components/features/chat/chat-input.tsx

@@ -132,7 +132,7 @@ export function ChatInput({
         maxRows={maxRows}
         data-dragging-over={isDraggingOver}
         className={cn(
-          "grow text-sm self-center placeholder:text-neutral-400 text-white resize-none outline-none ring-0",
+          "grow text-sm self-center placeholder:text-neutral-400 text-white resize-none outline-hidden ring-0",
           "transition-all duration-200 ease-in-out",
           isDraggingOver
             ? "bg-neutral-600/50 rounded-lg px-2"

frontend/src/components/features/chat/expandable-message.tsx

@@ -114,7 +114,7 @@ export function ExpandableMessage({
             {t(I18nKey.STATUS$ERROR_LLM_OUT_OF_CREDITS)}
           </div>
           <Link
-            className="mt-2 mb-2 w-full h-10 rounded flex items-center justify-center gap-2 bg-primary text-[#0D0F11]"
+            className="mt-2 mb-2 w-full h-10 rounded-sm flex items-center justify-center gap-2 bg-primary text-[#0D0F11]"
             to="/settings/billing"
           >
             {t(I18nKey.BILLING$CLICK_TO_TOP_UP)}

frontend/src/components/features/feedback/feedback-form.tsx

@@ -101,7 +101,7 @@ export function FeedbackForm({ onClose, polarity }: FeedbackFormProps) {
           name="email"
           type="email"
           placeholder={t(I18nKey.FEEDBACK$EMAIL_PLACEHOLDER)}
-          className="bg-[#27272A] px-3 py-[10px] rounded"
+          className="bg-[#27272A] px-3 py-[10px] rounded-sm"
         />
       </label>
 

frontend/src/components/features/home/repository-selection/branch-error-state.tsx

@@ -6,7 +6,7 @@ export function BranchErrorState() {
   return (
     <div
       data-testid="branch-dropdown-error"
-      className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded text-red-500"
+      className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded-sm text-red-500"
     >
       <span className="text-sm">{t("HOME$FAILED_TO_LOAD_BRANCHES")}</span>
     </div>

frontend/src/components/features/home/repository-selection/branch-loading-state.tsx

@@ -7,7 +7,7 @@ export function BranchLoadingState() {
   return (
     <div
       data-testid="branch-dropdown-loading"
-      className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded"
+      className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded-sm"
     >
       <Spinner size="sm" />
       <span className="text-sm">{t("HOME$LOADING_BRANCHES")}</span>

frontend/src/components/features/home/repository-selection/repository-error-state.tsx

@@ -6,7 +6,7 @@ export function RepositoryErrorState() {
   return (
     <div
       data-testid="repo-dropdown-error"
-      className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded text-red-500"
+      className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded-sm text-red-500"
     >
       <span className="text-sm">{t("HOME$FAILED_TO_LOAD_REPOSITORIES")}</span>
     </div>

frontend/src/components/features/home/repository-selection/repository-loading-state.tsx

@@ -7,7 +7,7 @@ export function RepositoryLoadingState() {
   return (
     <div
       data-testid="repo-dropdown-loading"
-      className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded"
+      className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded-sm"
     >
       <Spinner size="sm" />
       <span className="text-sm">{t("HOME$LOADING_REPOSITORIES")}</span>

frontend/src/components/features/images/thumbnail.tsx

@@ -12,7 +12,7 @@ export function Thumbnail({ src, size = "small" }: ThumbnailProps) {
       alt=""
       src={src}
       className={cn(
-        "rounded object-cover",
+        "rounded-sm object-cover",
         size === "small" && "w-[62px] h-[62px]",
         size === "large" && "w-[100px] h-[100px]",
       )}

frontend/src/components/features/payment/payment-form.tsx

@@ -43,7 +43,7 @@ export function PaymentForm() {
     >
       <div
         className={cn(
-          "flex items-center justify-between w-[680px] bg-[#7F7445] rounded px-3 py-2",
+          "flex items-center justify-between w-[680px] bg-[#7F7445] rounded-sm px-3 py-2",
           "text-[28px] leading-8 -tracking-[0.02em] font-bold",
         )}
       >

frontend/src/components/features/settings/brand-button.tsx

@@ -32,7 +32,7 @@ export function BrandButton({
       type={type}
       onClick={onClick}
       className={cn(
-        "w-fit p-2 text-sm rounded disabled:opacity-30 disabled:cursor-not-allowed hover:opacity-80",
+        "w-fit p-2 text-sm rounded-sm disabled:opacity-30 disabled:cursor-not-allowed hover:opacity-80",
         variant === "primary" && "bg-primary text-[#0D0F11]",
         variant === "secondary" && "border border-primary text-primary",
         variant === "danger" && "bg-red-600 text-white hover:bg-red-700",

frontend/src/components/features/settings/mcp-settings/mcp-json-editor.tsx

@@ -69,7 +69,7 @@ export function MCPJsonEditor({ mcpConfig, onChange }: MCPJsonEditorProps) {
         {t(I18nKey.SETTINGS$MCP_CONFIG_DESCRIPTION)}
       </div>
       <textarea
-        className="w-full h-64 p-2 text-sm font-mono bg-base-tertiary rounded-md focus:border-blue-500 focus:outline-none"
+        className="w-full h-64 p-2 text-sm font-mono bg-base-tertiary rounded-md focus:border-blue-500 focus:outline-hidden"
         value={configText}
         onChange={handleTextChange}
         spellCheck="false"

frontend/src/components/features/settings/secrets-settings/secret-form.tsx

@@ -158,7 +158,7 @@ export function SecretForm({
             required
             className={cn(
               "resize-none",
-              "bg-tertiary border border-[#717888] rounded p-2 placeholder:italic placeholder:text-tertiary-alt",
+              "bg-tertiary border border-[#717888] rounded-sm p-2 placeholder:italic placeholder:text-tertiary-alt",
               "disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
             )}
             rows={8}
@@ -177,7 +177,7 @@ export function SecretForm({
           defaultValue={secretDescription}
           className={cn(
             "resize-none",
-            "bg-tertiary border border-[#717888] rounded p-2 placeholder:italic placeholder:text-tertiary-alt",
+            "bg-tertiary border border-[#717888] rounded-sm p-2 placeholder:italic placeholder:text-tertiary-alt",
             "disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
           )}
         />

frontend/src/components/features/settings/settings-dropdown-input.tsx

@@ -63,7 +63,7 @@ export function SettingsDropdownInput({
         inputProps={{
           classNames: {
             inputWrapper:
-              "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
+              "bg-tertiary border border-[#717888] h-10 w-full rounded-sm p-2 placeholder:italic",
           },
         }}
         defaultFilter={defaultFilter}

frontend/src/components/features/settings/settings-input.tsx

@@ -62,7 +62,7 @@ export function SettingsInput({
         required={required}
         pattern={pattern}
         className={cn(
-          "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic placeholder:text-tertiary-alt",
+          "bg-tertiary border border-[#717888] h-10 w-full rounded-sm p-2 placeholder:italic placeholder:text-tertiary-alt",
           "disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
         )}
       />

frontend/src/components/features/suggestions/replay-suggestion-box.tsx

@@ -16,7 +16,7 @@ export function ReplaySuggestionBox({ onChange }: ReplaySuggestionBoxProps) {
           htmlFor="import-trajectory"
           className="w-full flex justify-center"
         >
-          <span className="border-2 border-dashed border-neutral-600 rounded px-2 py-1 cursor-pointer">
+          <span className="border-2 border-dashed border-neutral-600 rounded-sm px-2 py-1 cursor-pointer">
             {t(I18nKey.LANDING$UPLOAD_TRAJECTORY)}
           </span>
           <input

frontend/src/components/shared/buttons/editor-action-button.tsx

@@ -18,7 +18,7 @@ export function EditorActionButton({
       onClick={onClick}
       disabled={disabled}
       className={cn(
-        "text-sm py-0.5 rounded w-20",
+        "text-sm py-0.5 rounded-sm w-20",
         "hover:bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed",
         className,
       )}

frontend/src/components/shared/buttons/modal-button.tsx

@@ -31,7 +31,7 @@ export function ModalButton({
       disabled={disabled}
       onClick={onClick}
       className={clsx(
-        variant === "default" && "text-sm font-[500] py-[10px] rounded",
+        variant === "default" && "text-sm font-[500] py-[10px] rounded-sm",
         variant === "text-like" && "text-xs leading-4 font-normal",
         icon && "flex items-center justify-center gap-2",
         disabled && "opacity-50 cursor-not-allowed",

frontend/src/components/shared/custom-input.tsx

@@ -36,7 +36,7 @@ export function CustomInput({
         required={required}
         defaultValue={defaultValue}
         type={type}
-        className="bg-[#27272A] text-xs py-[10px] px-3 rounded"
+        className="bg-[#27272A] text-xs py-[10px] px-3 rounded-sm"
       />
     </label>
   );

frontend/src/components/shared/error-toast.tsx

@@ -16,7 +16,7 @@ export function ErrorToast({ id, error }: ErrorToastProps) {
       <button
         type="button"
         onClick={() => toast.dismiss(id)}
-        className="bg-neutral-500 px-1 rounded h-full"
+        className="bg-neutral-500 px-1 rounded-sm h-full"
       >
         {t(I18nKey.ERROR_TOAST$CLOSE_BUTTON_LABEL)}
       </button>

frontend/src/components/shared/modals/security/invariant/invariant.tsx

@@ -269,19 +269,19 @@ function SecurityInvariant() {
         <hr className="border-t border-neutral-600 my-2" />
         <ul className="space-y-2">
           <div
-            className={`cursor-pointer p-2 rounded ${activeSection === "logs" && "bg-neutral-600"}`}
+            className={`cursor-pointer p-2 rounded-sm ${activeSection === "logs" && "bg-neutral-600"}`}
             onClick={() => setActiveSection("logs")}
           >
             {t(I18nKey.INVARIANT$LOG_LABEL)}
           </div>
           <div
-            className={`cursor-pointer p-2 rounded ${activeSection === "policy" && "bg-neutral-600"}`}
+            className={`cursor-pointer p-2 rounded-sm ${activeSection === "policy" && "bg-neutral-600"}`}
             onClick={() => setActiveSection("policy")}
           >
             {t(I18nKey.INVARIANT$POLICY_LABEL)}
           </div>
           <div
-            className={`cursor-pointer p-2 rounded ${activeSection === "settings" && "bg-neutral-600"}`}
+            className={`cursor-pointer p-2 rounded-sm ${activeSection === "settings" && "bg-neutral-600"}`}
             onClick={() => setActiveSection("settings")}
           >
             {t(I18nKey.INVARIANT$SETTINGS_LABEL)}

frontend/src/components/shared/modals/settings/model-selector.tsx

@@ -92,7 +92,7 @@ export function ModelSelector({
           inputProps={{
             classNames: {
               inputWrapper:
-                "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
+                "bg-tertiary border border-[#717888] h-10 w-full rounded-sm p-2 placeholder:italic",
             },
           }}
         >
@@ -142,7 +142,7 @@ export function ModelSelector({
           inputProps={{
             classNames: {
               inputWrapper:
-                "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
+                "bg-tertiary border border-[#717888] h-10 w-full rounded-sm p-2 placeholder:italic",
             },
           }}
         >

frontend/src/routes/user-settings.tsx

@@ -41,11 +41,11 @@ function EmailInputSection({
             type="email"
             value={email}
             onChange={onEmailChange}
-            className={`text-base text-white p-2 bg-base-tertiary rounded border ${
+            className={`text-base text-white p-2 bg-base-tertiary rounded-sm border ${
               isEmailChanged && !isEmailValid
                 ? "border-red-500"
                 : "border-tertiary"
-            } flex-grow focus:outline-none focus:border-transparent focus:ring-0`}
+            } flex-grow focus:outline-hidden focus:border-transparent focus:ring-0`}
             placeholder={t("SETTINGS$USER_EMAIL_LOADING")}
             data-testid="email-input"
           />
@@ -65,7 +65,7 @@ function EmailInputSection({
             type="button"
             onClick={onSaveEmail}
             disabled={!isEmailChanged || isSaving || !isEmailValid}
-            className="px-4 py-2 rounded bg-primary text-white hover:opacity-80 disabled:opacity-30 disabled:cursor-not-allowed disabled:text-[#0D0F11]"
+            className="px-4 py-2 rounded-sm bg-primary text-white hover:opacity-80 disabled:opacity-30 disabled:cursor-not-allowed disabled:text-[#0D0F11]"
             data-testid="save-email-button"
           >
             {isSaving ? t("SETTINGS$SAVING") : t("SETTINGS$SAVE")}
@@ -76,7 +76,7 @@ function EmailInputSection({
               type="button"
               onClick={onResendVerification}
               disabled={isResendingVerification}
-              className="px-4 py-2 rounded bg-primary text-white hover:opacity-80 disabled:opacity-30 disabled:cursor-not-allowed disabled:text-[#0D0F11]"
+              className="px-4 py-2 rounded-sm bg-primary text-white hover:opacity-80 disabled:opacity-30 disabled:cursor-not-allowed disabled:text-[#0D0F11]"
               data-testid="resend-verification-button"
             >
               {isResendingVerification
@@ -96,7 +96,7 @@ function VerificationAlert() {
   const { t } = useTranslation();
   return (
     <div
-      className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mt-4"
+      className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-sm mt-4"
       role="alert"
     >
       <p className="font-bold">{t("SETTINGS$EMAIL_VERIFICATION_REQUIRED")}</p>
@@ -205,7 +205,7 @@ function UserSettingsScreen() {
     <div data-testid="user-settings-screen" className="flex flex-col h-full">
       <div className="p-9 flex flex-col gap-6">
         {isLoading ? (
-          <div className="animate-pulse h-8 w-64 bg-tertiary rounded" />
+          <div className="animate-pulse h-8 w-64 bg-tertiary rounded-sm" />
         ) : (
           <EmailInputSection
             email={email}

frontend/src/routes/vscode-tab.tsx

@@ -76,7 +76,7 @@ function VSCodeTab() {
         <button
           type="button"
           onClick={handleOpenInNewTab}
-          className="px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark transition-colors"
+          className="px-4 py-2 bg-primary text-white rounded-sm hover:bg-primary-dark transition-colors"
         >
           {t("VSCODE$OPEN_IN_NEW_TAB")}
         </button>

frontend/src/tailwind.css

@@ -1,9 +1,12 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+
-@tailwind utilities;
+@plugin '../hero.ts';
+@config "../tailwind.config.js";
+@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
+
 
 .button-base {
-  @apply bg-tertiary border border-neutral-600 rounded;
+  @apply bg-tertiary border border-neutral-600 rounded-xs;
 }
 
 .skeleton {

frontend/tailwind.config.js

@@ -2,10 +2,6 @@
 import { heroui } from "@heroui/react";
 import typography from "@tailwindcss/typography";
 export default {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
-  ],
   theme: {
     extend: {
       colors: {
@@ -24,24 +20,5 @@ export default {
     },
   },
   darkMode: "class",
-  plugins: [
+  plugins: [typography],
-    heroui({
-      defaultTheme: "dark",
-      layout: {
-        radius: {
-          small: "5px",
-          large: "20px",
-        },
-      },
-      themes: {
-        dark: {
-          colors: {
-            primary: "#4465DB",
-            logo: "#CFB755",
-          },
-        },
-      },
-    }),
-    typography,
-  ],
 };

frontend/vite.config.ts

@@ -5,6 +5,7 @@ import viteTsconfigPaths from "vite-tsconfig-paths";
 import svgr from "vite-plugin-svgr";
 import { reactRouter } from "@react-router/dev/vite";
 import { configDefaults } from "vitest/config";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig(({ mode }) => {
   const {
@@ -28,6 +29,7 @@ export default defineConfig(({ mode }) => {
       !process.env.VITEST && reactRouter(),
       viteTsconfigPaths(),
       svgr(),
+      tailwindcss(),
     ],
     server: {
       port: FE_PORT,
@@ -54,7 +56,7 @@ export default defineConfig(({ mode }) => {
         },
       },
       watch: {
-        ignored: ['**/node_modules/**', '**/.git/**'],
+        ignored: ["**/node_modules/**", "**/.git/**"],
       },
     },
     ssr: {