feat: migrate to Tailwind 4

package.json

@@ -64,10 +64,10 @@
   },
   "devDependencies": {
     "@playwright/test": "1.45.0",
+    "@tailwindcss/postcss": "^4.0.8",
     "@types/node": "22",
     "@typescript-eslint/eslint-plugin": "8.23.0",
     "@typescript-eslint/parser": "8.23.0",
-    "autoprefixer": "10.4.20",
     "clsx": "2.1.1",
     "dotenv": "16.4.5",
     "eslint": "9.14.0",
@@ -81,8 +81,8 @@
     "postcss": "8",
     "prettier": "3.3.3",
     "schema-dts": "1.1.2",
-    "tailwind-merge": "2.3.0",
-    "tailwindcss": "3.4.4",
+    "tailwind-merge": "3.0.2",
+    "tailwindcss": "4.0.8",
     "typescript": "5.7.3"
   },
   "packageManager": "[email protected]",

postcss.config.mjs

@@ -1,8 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

src/app/[locale]/_components/Home/HomeTitle.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useMemo } from "react";
 import { Button, InkIcon } from "@inkonchain/ink-kit";
 import { useTranslations } from "next-intl";
 
@@ -39,8 +40,19 @@ const TagLineWithHighlight: React.FC<{
   text?: string;
   disableRotating?: boolean;
 }> = ({ text }) => {
-  const [first, second] = text?.split("|") || [];
-  const sections = second?.split(",") || [];
+  const [first, second] = useMemo(() => text?.split("|") || [], [text]);
+  const allSections = useMemo(() => {
+    const sections = second?.split(",") || [];
+    return sections.map((s, i) => {
+      return i === sections.length - 1 ? (
+        <ColoredText key={s} variant="reverse-purple">
+          {s}
+        </ColoredText>
+      ) : (
+        <span key={s}>{s}</span>
+      );
+    });
+  }, [second]);
   return (
     <div className="flex items-baseline ink:text-h3 flex-wrap justify-start ink:text-button-primary">
       {/** Height should match the height of the PillContainer+Rotating text for the text to be aligned. */}
@@ -51,15 +63,7 @@ const TagLineWithHighlight: React.FC<{
       >
         {first}
       </ColoredText>
-      <RotatingText
-        sections={sections.map((s, i) => {
-          return i === sections.length - 1 ? (
-            <ColoredText variant="reverse-purple">{s}</ColoredText>
-          ) : (
-            s
-          );
-        })}
-      />
+      <RotatingText sections={allSections} />
     </div>
   );
 };

src/app/[locale]/_components/PageHeader.tsx

@@ -26,8 +26,8 @@ export const PageHeader = ({
     >
       <div
         className={classNames("flex flex-col items-start gap-4", {
-          "max-w-screen-lg": size === "default" || size === "section",
-          "max-w-screen-2xl": size === "home",
+          "max-w-(--breakpoint-lg)": size === "default" || size === "section",
+          "max-w-(--breakpoint-2xl)": size === "home",
         })}
       >
         <ColoredText
@@ -42,7 +42,7 @@ export const PageHeader = ({
           <h2>{title}</h2>
         </ColoredText>
         <div
-          className={classNames("max-w-screen-lg", {
+          className={classNames("max-w-(--breakpoint-lg)", {
             "ink:text-body-2-regular sm:text-[length:var(--ink-text-body-1-regular)] sm:leading-[var(--ink-text-body-1-regular--line-height)] ink:text-text-muted":
               size === "default" || size === "section",
             "ink:text-h5 lg:text-[length:var(--ink-text-h3)] lg:leading-[var(--ink-text-h3--line-height)]":

src/app/[locale]/apps/_components/AppLinks.tsx

@@ -85,7 +85,7 @@ function AppLink({
   return (
     <a
       href={href}
-      className="text-sm hover:text-krakenPurple hover:border-krakenPurple hover:dark:border-krakenPurple transition-colors font-medium p-2 rounded-2xl"
+      className="text-sm hover:text-krakenPurple hover:border-krakenPurple dark:hover:border-krakenPurple transition-colors font-medium p-2 rounded-2xl"
       target="_blank"
       rel="noopener noreferrer"
       draggable={false}

src/app/[locale]/apps/_components/AppMainnetToggle.tsx

@@ -29,7 +29,7 @@ export function AppMainnetToggle({ value, onChange }: AppMainnetToggleProps) {
     <Listbox value={selectedItem} onChange={(option) => onChange(option.value)}>
       <ListboxButton
         variant="muted"
-        className="backdrop-blur-xl ink:text-body-3-bold w-min whitespace-nowrap h-10"
+        className="backdrop-blur-xl ink:text-body-3-bold w-min whitespace-nowrap"
       >
         <span
           className={classNames(

src/app/[locale]/apps/_components/AppsContent.tsx

@@ -197,7 +197,7 @@ export function AppsContent({ currentCategory }: AppsContentProps) {
               });
             }}
           />
-          <div className="flex gap-2">
+          <div className="flex items-center gap-2">
             <AppsTagsFilter
               selected={filters.tags}
               setSelected={(value) => {

src/app/[locale]/apps/_components/SubmitAppButton.css

@@ -1,6 +1,6 @@
 .gradient-border {
   position: relative;
-  --border-width: 2px;
+  --gradient-border-width: 2px;
 }
 
 .gradient-border:hover::before {
@@ -16,12 +16,16 @@
   z-index: 1;
 
   box-sizing: border-box;
-  padding: var(--border-width);
+  padding: var(--gradient-border-width);
   border-radius: 999px;
   background: linear-gradient(to right, #fff 0%, #fff 50%, #8049f2 100%);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
   mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
   mask-composite: exclude, xor;
 
   background-position: 100% 100%;

src/app/[locale]/faucet/_components/Faucet.tsx

@@ -56,7 +56,7 @@ export function Faucet() {
                     value={address}
                     onChange={(e) => setAddress(e.target.value)}
                     placeholder={t("enterAddress")}
-                    className="w-full bg-transparent text-black/50 [&:not(:placeholder-shown)]:text-[#101114] focus:outline-none font-[Plus_Jakarta_Sans] font-bold text-[18px]"
+                    className="w-full bg-transparent text-black/50 not-placeholder-shown:text-[#101114] focus:outline-hidden font-[Plus_Jakarta_Sans] font-bold text-[18px]"
                   />
                 </div>
                 <div className="pr-1">

src/app/[locale]/faucet/_components/FaucetRequestButton.tsx

@@ -418,15 +418,15 @@ export const FaucetRequestButton = forwardRef<
         )}
 
         {showTweetPrompt && (
-          <CenteredModalContainer className="fixed inset-0 isolate z-[9999]">
+          <CenteredModalContainer className="fixed inset-0 isolate z-9999">
             <Backdrop
               isVisible={showTweetPrompt}
               onClick={() => setShowTweetPrompt(false)}
             />
             <CenteredModal
               isOpen={showTweetPrompt}
               closeModal={() => setShowTweetPrompt(false)}
-              contentClassName="max-w-[536px] flex-1 relative z-[10000]"
+              contentClassName="max-w-[536px] flex-1 relative z-10000"
             >
               <div className="flex flex-col gap-8 items-center w-full p-8">
                 <div className="flex flex-col gap-4 items-center">

src/app/[locale]/get-verified/_components/VerificationContent.tsx

@@ -21,7 +21,7 @@ export function VerificationContent() {
           <div className="flex-1 flex flex-col ink:bg-container-background ink:rounded-lg min-h-full relative shadow-[0px_3px_34px_-10px_#B4B4B466] dark:shadow-[0px_3px_34px_-10px_rgba(0,0,0,0.7)]">
             {/* Add background noise div with matching rounded corners */}
             <div
-              className="absolute inset-0 opacity-50 rounded-events dark:hidden mix-blend-soft-light dark:mix-blend-multiply"
+              className="absolute inset-0 opacity-50 dark:hidden mix-blend-soft-light dark:mix-blend-multiply"
               style={{
                 backgroundImage: 'url("/bg/bg-noise.png")',
                 backgroundRepeat: "repeat",
@@ -90,7 +90,7 @@ export function VerificationContent() {
       </div>
 
       {/* Benefits section */}
-      <div className="bg-softDarkPurple rounded-spotlight-mobile lg:rounded-spotlight p-8 lg:p-16">
+      <div className="bg-softDarkPurple p-8 lg:p-16">
         <div className="flex justify-center mb-8 lg:mb-16">
           <ColoredText
             variant="purple-light"
@@ -106,7 +106,7 @@ export function VerificationContent() {
             <div className="lg:w-1/2">
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 {/* QuickNode */}
-                <div className="bg-gradient-to-b from-[#B9AAEF] to-[#9680E5] rounded-3xl p-5">
+                <div className="bg-linear-to-b from-[#B9AAEF] to-[#9680E5] rounded-3xl p-5">
                   <div className="flex items-center gap-3 mb-3">
                     <Image
                       src="/icons/quicknode.png"
@@ -124,7 +124,7 @@ export function VerificationContent() {
                 </div>
 
                 {/* Tenderly */}
-                <div className="bg-gradient-to-b from-[#B9AAEF] to-[#9680E5] rounded-3xl p-5">
+                <div className="bg-linear-to-b from-[#B9AAEF] to-[#9680E5] rounded-3xl p-5">
                   <div className="flex items-center gap-3 mb-3">
                     <Image
                       src="/icons/tenderly.png"
@@ -142,7 +142,7 @@ export function VerificationContent() {
                 </div>
 
                 {/* Goldsky */}
-                <div className="bg-gradient-to-b from-[#B9AAEF] to-[#9680E5] rounded-3xl p-5">
+                <div className="bg-linear-to-b from-[#B9AAEF] to-[#9680E5] rounded-3xl p-5">
                   <div className="flex items-center gap-3 mb-3">
                     <Image
                       src="/icons/goldsky.png"
@@ -221,7 +221,7 @@ export function VerificationContent() {
       </div>
 
       {/* Request a feature section */}
-      <div className="flex flex-col lg:flex-row items-center bg-krakenPurple rounded-spotlight-mobile lg:rounded-spotlight p-8 lg:p-16 relative overflow-hidden">
+      <div className="flex flex-col lg:flex-row items-center bg-krakenPurple p-8 lg:p-16 relative overflow-hidden">
         {/* Left side content */}
         <div className="flex flex-col gap-6 z-10 w-full lg:w-1/2">
           <ColoredText

src/app/[locale]/newsletter/resubscribe/_components/ResubscribeForm.tsx

@@ -64,7 +64,7 @@ export const ResubscribeForm: React.FC<ResubscribeFormProps> = ({
             type="checkbox"
             id="generalWailist"
             name="generalWailist"
-            className="h-4 w-4 rounded border-gray-300 text-whiteMagic"
+            className="h-4 w-4 rounded-sm border-gray-300 text-whiteMagic"
           />
         </div>
 
@@ -79,7 +79,7 @@ export const ResubscribeForm: React.FC<ResubscribeFormProps> = ({
             type="checkbox"
             id="developerWailist"
             name="developerWailist"
-            className="h-4 w-4 rounded border-gray-300 text-whiteMagic"
+            className="h-4 w-4 rounded-sm border-gray-300 text-whiteMagic"
           />
         </div>
 

src/app/[locale]/newsletter/unsubscribe/_components/UnsubscribeForm.tsx

@@ -64,7 +64,7 @@ export const UnsubscribeForm: React.FC<UnsubscribeFormProps> = ({
             type="checkbox"
             id="generalWailist"
             name="generalWailist"
-            className="h-4 w-4 rounded border-gray-300 text-whiteMagic"
+            className="h-4 w-4 rounded-sm border-gray-300 text-whiteMagic"
           />
         </div>
 
@@ -79,7 +79,7 @@ export const UnsubscribeForm: React.FC<UnsubscribeFormProps> = ({
             type="checkbox"
             id="developerWailist"
             name="developerWailist"
-            className="h-4 w-4 rounded border-gray-300 text-whiteMagic"
+            className="h-4 w-4 rounded-sm border-gray-300 text-whiteMagic"
           />
         </div>
 

src/app/[locale]/testnet-bridge/_components/Bridge.tsx

@@ -283,7 +283,7 @@ export function Bridge() {
               <div
                 className={classNames(
                   "rounded-3xl sm:px-12 px-6 py-4 sm:py-6 inline-block mx-auto w-full sm:min-w-[700px]",
-                  "[.light_&]:bg-[#EDF1F9]/50",
+                  "in-[.light]:bg-[#EDF1F9]/50",
                   "dark:bg-[#160F1F]"
                 )}
               >
@@ -424,7 +424,7 @@ export function Bridge() {
                     </div>
 
                     <div
-                      className="bg-white rounded-xl p-3 shadow-sm w-full cursor-pointer"
+                      className="bg-white rounded-xl p-3 shadow-xs w-full cursor-pointer"
                       onClick={() =>
                         document.getElementById("amount-input")?.focus()
                       }
@@ -435,7 +435,7 @@ export function Bridge() {
                             id="amount-input"
                             type="number"
                             placeholder="0"
-                            className={`dark:bg-white text-black w-full outline-none text-4xl font-medium [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none ${error ? "border-red-500 border-b" : ""}`}
+                            className={`dark:bg-white text-black w-full outline-hidden text-4xl font-medium [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none ${error ? "border-red-500 border-b" : ""}`}
                             min="0"
                             step="any"
                             value={amount}
@@ -445,7 +445,7 @@ export function Bridge() {
                             }}
                           />
                           <div
-                            className="flex items-center gap-2 rounded-full px-4 py-2 flex-shrink-0 ml-4"
+                            className="flex items-center gap-2 rounded-full px-4 py-2 shrink-0 ml-4"
                             style={{
                               backgroundColor: "rgba(221, 220, 240, 0.75)",
                             }}

src/app/[locale]/testnet-bridge/_components/BridgeTransactionModal/BridgeTransactionModal.tsx

@@ -35,12 +35,12 @@ export const BridgeTransactionModal: React.FC<
   if (!txHash) return null;
 
   return (
-    <CenteredModalContainer className="fixed inset-0 isolate z-[9999]">
+    <CenteredModalContainer className="fixed inset-0 isolate z-9999">
       <Backdrop isVisible={isOpen} onClick={closeModal} />
       <CenteredModal
         isOpen={isOpen}
         closeModal={closeModal}
-        contentClassName="max-w-[390px] flex-1 relative z-[10000] dark:text-white/50 shadow-[0px_4px_45px_0px_rgba(0,0,0,0.25)] dark:bg-softDarkPurple"
+        contentClassName="max-w-[390px] flex-1 relative z-10000 dark:text-white/50 shadow-[0px_4px_45px_0px_rgba(0,0,0,0.25)] dark:bg-softDarkPurple"
       >
         <div className="flex flex-col gap-2 items-center">
           <Lottie