update to tw4 - react / html / site

apps/site/package.json

@@ -3,7 +3,7 @@
   "version": "2.0.0",
   "description": "Material Tailwind is an easy-to-use components library for Tailwind CSS inspired by Material Design.",
   "scripts": {
-    "dev": "next dev --port 3001",
+    "dev": "next dev --port 3000",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -57,16 +57,16 @@
     "zod": "3.22.4"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "4.1.11",
     "@types/node": "20.11.24",
     "@types/react": "18.2.61",
     "@types/react-dom": "18.2.19",
-    "autoprefixer": "10.4.13",
     "eslint-config-custom": "workspace:*",
     "next-sitemap": "3.1.44",
     "postcss": "8.4.8",
     "prettier": "3.1.1",
     "prompts": "2.4.2",
-    "tailwindcss": "3.4.13",
+    "tailwindcss": "4.1.11",
     "tailwindcss-animate": "1.0.7",
     "tsconfig": "workspace:*",
     "typescript": "5.2.2"

apps/site/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

apps/site/src/app/docs/[...slug]/page.tsx

@@ -167,7 +167,7 @@ const highlight = {
   name: "highlight",
   MultilineAnnotation: ({ children }) => {
     return (
-      <span className="block border-l-2 border-[#1fff7c] bg-[#1fff7c]/[0.15] bg-opacity-50 text-[#1fff7c]">
+      <span className="block border-l-2 border-[#1fff7c] bg-[#1fff7c]/15 bg-opacity-50 text-[#1fff7c]">
         {children}
       </span>
     );

apps/site/src/app/docs/content/html/accordion.mdx

@@ -208,21 +208,21 @@ export function ControlledAccordion() {
       <div className="mb-4 flex gap-2">
         <Button
           isFullWidth
-          variant={open === "react" ? "solid" : "outline"}
+          variant={open === "react" ? "solid" : "outline-solid"}
           onClick={() => setOpen("react")}
         >
           React Version
         </Button>
         <Button
           isFullWidth
-          variant={open === "html" ? "solid" : "outline"}
+          variant={open === "html" ? "solid" : "outline-solid"}
           onClick={() => setOpen("html")}
         >
           HTML Version
         </Button>
         <Button
           isFullWidth
-          variant={open === "vue" ? "solid" : "outline"}
+          variant={open === "vue" ? "solid" : "outline-solid"}
           onClick={() => setOpen("vue")}
         >
           Vue Version

apps/site/src/app/docs/content/html/alert.mdx

@@ -69,7 +69,7 @@ The alert component comes with 3 different variants that you can change using th
   </div>
   <div
     role="alert"
-    class="relative flex items-start w-full p-2 border rounded-md border-primary bg-gradient-to-tr from-primary-dark to-primary-light text-primary-foreground"
+    class="relative flex items-start w-full p-2 border rounded-md border-primary bg-linear-to-tr from-primary-dark to-primary-light text-primary-foreground"
   >
     <div class="m-1.5 w-full font-sans text-base leading-none">
       A simple alert for showing message. with variant="gradient"
@@ -357,7 +357,7 @@ You can add any element you want for the Alert component, below you can see an e
   </div>
   <div
     role="alert"
-    class="relative flex items-start w-full p-2 border rounded-md border-primary bg-gradient-to-tr from-primary-dark to-primary-light text-primary-foreground"
+    class="relative flex items-start w-full p-2 border rounded-md border-primary bg-linear-to-tr from-primary-dark to-primary-light text-primary-foreground"
   >
     <span class="grid p-1 shrink-0 place-items-center">
       <svg
@@ -457,7 +457,7 @@ You can add any element you want for the Alert component, below you can see an e
   <div class="m-1.5 w-full font-sans text-base leading-none">
     A simple alert for showing message.
   </div>
-  <button id="alert-dismiss-trigger" class="outline-none">
+  <button id="alert-dismiss-trigger" class="outline-hidden">
     <svg
       viewBox="0 0 24 24"
       fill="none"
@@ -593,7 +593,7 @@ Use the example below to use an alert component with content elements like title
   </div>
   <button
     id="content-close-trigger"
-    class="outline-none"
+    class="outline-hidden"
   >
     <svg
       viewBox="0 0 24 24"

apps/site/src/app/docs/content/html/button-group.mdx

@@ -119,19 +119,19 @@ Get inspired by this series of button groups, each with different styling, arran
   <div className="inline-flex flex-row">
     <button
       data-ripple-light="true"
-      className="inline-flex select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       React
     </button>
     <button
       data-ripple-light="true"
-      className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       Vue
     </button>
     <button
       data-ripple-light="true"
-      className="inline-flex select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       Svelte
     </button>
@@ -149,7 +149,7 @@ This button group component example shows you how to create responsive and scala
 <ComponentPreview demo={<HTMLButtonGroup.ButtonGroupSizes />}>
 ```html
 <div class="flex flex-col gap-4">
-  <div class="inline-flex flex-row [&:first-child:not([data-variant=ghost])]:[&_*]:rounded-r-none [&:last-child:not([data-variant=ghost])]:[&_*]:rounded-l-none [&:last-child:not([data-variant=ghost])]:[&_*]:border-l-0 [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:rounded-none [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:border-l-0">
+  <div class="inline-flex flex-row **:[&:first-child:not([data-variant=ghost])]:rounded-r-none **:[&:last-child:not([data-variant=ghost])]:rounded-l-none **:[&:last-child:not([data-variant=ghost])]:border-l-0 **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:rounded-none **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:border-l-0">
     <button
       data-ripple-light="true"
       class="inline-flex select-none items-center justify-center rounded-md border border-primary bg-primary px-2.5 py-1.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:border-primary-light hover:bg-primary-light disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
@@ -169,7 +169,7 @@ This button group component example shows you how to create responsive and scala
       Svelte
     </button>
   </div>
-  <div class="inline-flex flex-row [&:first-child:not([data-variant=ghost])]:[&_*]:rounded-r-none [&:last-child:not([data-variant=ghost])]:[&_*]:rounded-l-none [&:last-child:not([data-variant=ghost])]:[&_*]:border-l-0 [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:rounded-none [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:border-l-0">
+  <div class="inline-flex flex-row **:[&:first-child:not([data-variant=ghost])]:rounded-r-none **:[&:last-child:not([data-variant=ghost])]:rounded-l-none **:[&:last-child:not([data-variant=ghost])]:border-l-0 **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:rounded-none **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:border-l-0">
     <button
       data-ripple-light="true"
       class="inline-flex select-none items-center justify-center rounded-md border border-primary bg-primary px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:border-primary-light hover:bg-primary-light disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
@@ -189,7 +189,7 @@ This button group component example shows you how to create responsive and scala
       Svelte
     </button>
   </div>
-  <div class="inline-flex flex-row [&:first-child:not([data-variant=ghost])]:[&_*]:rounded-r-none [&:last-child:not([data-variant=ghost])]:[&_*]:rounded-l-none [&:last-child:not([data-variant=ghost])]:[&_*]:border-l-0 [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:rounded-none [&:not(:first-child):not(:last-child):not([data-variant=ghost])]:[&_*]:border-l-0 ">
+  <div class="inline-flex flex-row **:[&:first-child:not([data-variant=ghost])]:rounded-r-none **:[&:last-child:not([data-variant=ghost])]:rounded-l-none **:[&:last-child:not([data-variant=ghost])]:border-l-0 **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:rounded-none **:[&:not(:first-child):not(:last-child):not([data-variant=ghost])]:border-l-0 ">
     <button
       data-ripple-light="true"
       class="inline-flex select-none items-center justify-center rounded-lg border border-primary bg-primary px-5 py-3.5 text-center align-middle font-sans text-base font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:border-primary-light hover:bg-primary-light disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
@@ -583,7 +583,7 @@ Use this example to create button groups with icons, you can use any type of ico
   <div className="inline-flex flex-row">
     <button
       data-ripple-light="true"
-      className="inline-flex select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       <svg
         width="1.5em"
@@ -604,7 +604,7 @@ Use this example to create button groups with icons, you can use any type of ico
     </button>
     <button
       data-ripple-light="true"
-      className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       <svg
         width="1.5em"
@@ -627,7 +627,7 @@ Use this example to create button groups with icons, you can use any type of ico
     </button>
     <button
       data-ripple-light="true"
-      className="inline-flex select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       <svg
         width="1.5em"
@@ -731,19 +731,19 @@ This example illustrates a single row of three buttons optimized for a full-widt
   <div className="inline-flex w-full flex-row">
     <button
       data-ripple-light="true"
-      className="inline-flex w-full select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex w-full select-none items-center justify-center rounded-md rounded-r-none border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       React
     </button>
     <button
       data-ripple-light="true"
-      className="inline-flex w-full select-none items-center justify-center rounded-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex w-full select-none items-center justify-center rounded-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       Vue
     </button>
     <button
       data-ripple-light="true"
-      className="inline-flex w-full select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      className="inline-flex w-full select-none items-center justify-center rounded-md rounded-l-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       Svelte
     </button>
@@ -824,19 +824,19 @@ This example illustrates pill button groups in different styles like ghost, outl
   <div class="inline-flex flex-row">
     <button
       data-ripple-light="true"
-      class="inline-flex select-none items-center justify-center rounded-full rounded-r-none border border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      class="inline-flex select-none items-center justify-center rounded-full rounded-r-none border border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       React
     </button>
     <button
       data-ripple-light="true"
-      class="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      class="inline-flex select-none items-center justify-center rounded-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       Vue
     </button>
     <button
       data-ripple-light="true"
-      class="inline-flex select-none items-center justify-center rounded-full rounded-l-none border border-l-0 border-primary bg-gradient-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+      class="inline-flex select-none items-center justify-center rounded-full rounded-l-none border border-l-0 border-primary bg-linear-to-tr from-primary-dark to-primary-light px-3.5 py-2.5 text-center align-middle font-sans text-sm font-medium leading-none text-primary-foreground transition-all duration-300 ease-in hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
     >
       Svelte
     </button>