chore(deps): upgrade to Tailwind CSS v4 (#1104)

apps/knowii/postcss.config.js

@@ -1,15 +1,8 @@
-const { join } = require('path');
-
-// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
-// option from your application's configuration (i.e. project.json).
-//
-// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
-
+// Tailwind CSS v4 uses a dedicated PostCSS plugin (`@tailwindcss/postcss`).
+// The Tailwind configuration is loaded from the `@config` directive in
+// `src/styles.css`. Vendor prefixing (previously `autoprefixer`) is built in.
 module.exports = {
   plugins: {
-    tailwindcss: {
-      config: join(__dirname, 'tailwind.config.ts'),
-    },
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

apps/knowii/src/Components/Banner.tsx

@@ -71,10 +71,10 @@ export default function Banner() {
                 <p className="ml-3 font-medium text-sm text-white truncate">{message}</p>
               </div>
 
-              <div className="flex-shrink-0 sm:ml-3">
+              <div className="shrink-0 sm:ml-3">
                 <button
                   type="button"
-                  className={classNames('-mr-1 flex p-2 rounded-md focus:outline-none sm:-mr-2 transition', {
+                  className={classNames('-mr-1 flex p-2 rounded-md focus:outline-hidden sm:-mr-2 transition', {
                     'hover:bg-indigo-600 focus:bg-indigo-600': style === 'success',
                     'hover:bg-red-600 focus:bg-red-600': style === 'danger',
                   })}

apps/knowii/src/Components/Communities/CommunityBox.tsx

@@ -58,7 +58,7 @@ export default function CommunityBox(props: Props) {
       <span className="text-xl font-bold">New</span>
     </div>
   ) : (
-    <div className="w-full sm:w-[450px] h-[250px] rounded-lg hover:outline hover:outline-primary-500 hover:outline-offset-2 hover:rounded-md shadow-lg overflow-hidden flex-shrink-0">
+    <div className="w-full sm:w-[450px] h-[250px] rounded-lg hover:outline hover:outline-primary-500 hover:outline-offset-2 hover:rounded-md shadow-lg overflow-hidden shrink-0">
       {props.link ? (
         <Link href={props.link} preserveState={true}>
           {normalModeCard}

apps/knowii/src/Components/PageTitle.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 export default function PageTitle(props: Props) {
   return props.pageTitle ? (
-    <h1 className="text-white text-2xl sm:text-3xl font-bold tracking-wide uppercase shadow-sm">{props.pageTitle}</h1>
+    <h1 className="text-white text-2xl sm:text-3xl font-bold tracking-wide uppercase shadow-xs">{props.pageTitle}</h1>
   ) : props.breadcrumbItems ? (
     <div className="w-full flex flex-col sm:flex-row gap-2 items-center justify-between">
       <BreadCrumb

apps/knowii/src/Components/ResourceCollections/CommunityResourceCollectionBox.tsx

@@ -19,11 +19,11 @@ const CommunityResourceCollectionBox: React.FC<Props> = ({ resourceCollection, c
 
   const content = (
     <div className="flex items-center justify-between p-3 h-20">
-      <div className="flex-grow pr-2 min-w-0 overflow-hidden">
+      <div className="grow pr-2 min-w-0 overflow-hidden">
         <h3 className="text-base font-semibold text-primary-500 leading-tight truncate mb-1">{resourceCollection.name}</h3>
         <p className="text-xs text-gray-600 line-clamp-2">{resourceCollection.description}</p>
       </div>
-      <div className="flex-shrink-0 w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center text-white ml-2">
+      <div className="shrink-0 w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center text-white ml-2">
         <FaChevronRight className="w-3 h-3" />
       </div>
     </div>
@@ -40,7 +40,7 @@ const CommunityResourceCollectionBox: React.FC<Props> = ({ resourceCollection, c
   );
 
   return (
-    <div className="w-full min-w-full md:w-72 lg:w-96 h-20 shadow-sm hover:shadow-md border border-gray-200 hover:border-primary-500 cursor-pointer rounded-md overflow-hidden transition-all duration-200">
+    <div className="w-full min-w-full md:w-72 lg:w-96 h-20 shadow-xs hover:shadow-md border border-gray-200 hover:border-primary-500 cursor-pointer rounded-md overflow-hidden transition-all duration-200">
       {boxContent}
     </div>
   );

apps/knowii/src/Layouts/AppLayout.tsx

@@ -129,7 +129,7 @@ export default function AppLayout(props: Props) {
           </div>
         </PageHeader>
 
-        <div className="bg-gradient-to-r from-gray-700 via-gray-500 to-gray-700">
+        <div className="bg-linear-to-r from-gray-700 via-gray-500 to-gray-700">
           <div className="px-4 py-3 mx-auto sm:px-6 lg:px-8 flex justify-center">
             <PageTitle
               pageTitle={props.pageTitle}

apps/knowii/src/Pages/Communities/Show.tsx

@@ -221,7 +221,7 @@ export default function CommunityPage(props: Props) {
                 {recentResources.map((recentResource) => (
                   <div
                     key={recentResource.cuid}
-                    className="p-2 overflow-hidden rounded-md border border-gray-200 shadow-sm hover:shadow-md hover:border-primary-500 flex-shrink-0 cursor-pointer transition-all duration-200"
+                    className="p-2 overflow-hidden rounded-md border border-gray-200 shadow-xs hover:shadow-md hover:border-primary-500 shrink-0 cursor-pointer transition-all duration-200"
                   >
                     <div
                       className="flex justify-between items-center"

apps/knowii/src/Pages/Profile/Partials/UpdateProfileInformationForm.tsx

@@ -234,7 +234,7 @@ export default function UpdateProfileInformationForm(props: Props) {
                 href={route(EMAIL_VERIFICATION_URL)}
                 method="post"
                 as="button"
-                className="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                className="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                 onClick={sendEmailVerification}
               >
                 Click here to re-send the verification email.

apps/knowii/src/styles.css

@@ -4,15 +4,31 @@
  */
 @layer tailwind-base, primereact, tailwind-utilities;
 
+/*
+ * Tailwind CSS v4: import the individual layers so the PrimeReact theme can be
+ * interleaved between Tailwind's base (preflight) and utilities, keeping the
+ * specificity order the app relies on (utilities win over PrimeReact).
+ */
+@import 'tailwindcss/theme.css' layer(tailwind-base);
+@import 'tailwindcss/preflight.css' layer(tailwind-base);
 @import 'primereact/resources/themes/lara-light-pink/theme.css' layer(primereact);
+@import 'tailwindcss/utilities.css' layer(tailwind-utilities);
 
-@layer tailwind-base {
-  @tailwind base;
-}
+/* Keep using the existing JavaScript-based theme configuration. */
+@config '../tailwind.config.ts';
 
-@layer tailwind-utilities {
-  @tailwind components;
-  @tailwind utilities;
+/*
+  The default border color changed to `currentcolor` in Tailwind CSS v4, so we
+  restore the v3 default (gray-200) to keep the existing look.
+*/
+@layer tailwind-base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
 }
 
 /* Reference: https://alpinejs.dev/directives/cloak */
@@ -84,15 +100,15 @@ h2 {
 }
 
 .user-menu-entry {
-  @apply hover:cursor-pointer flex flex-row p-4 rounded-md bg-gray-50 hover:outline hover:outline-primary-600;
+  @apply hover:cursor-pointer flex flex-row p-4 rounded-md bg-gray-50 hover:outline-solid hover:outline-primary-600;
 }
 
 .page-content-boundaries {
   @apply px-4 mt-8 md:mt-12 lg:mt-16 sm:mx-4 md:mx-8 lg:mx-16 xl:mx-24;
 }
 
 #waitlist-container > div.inline-container {
-  @apply rounded-lg outline outline-4 outline-offset-[-4px] outline-primary-500 shadow-md transition-all duration-300 ease-in-out hover:outline-offset-[-2px] hover:shadow-lg mb-0 pb-0 !important;
+  @apply rounded-lg! outline-solid! outline-4! -outline-offset-4! outline-primary-500! shadow-md! transition-all! duration-300! ease-in-out! hover:-outline-offset-2! hover:shadow-lg! mb-0! pb-0!;
 }
 
 /**