chore(misc): migrate tailwind v3 to v4

graph apps and nx-dev pin tailwindcss 3.4.4 with JS configs and v3 directives.

tailwindcss 4.1.11 via @tailwindcss/postcss. Configs converted to CSS via @import 'tailwindcss', @plugin, @source, @custom-variant. JS tailwind.config.js files removed. Drops @tailwindcss/aspect-ratio (built-in).

NXC-4430

Author: jaysoo

graph/client/postcss.config.js

@@ -1,6 +1,3 @@
 module.exports = {
-  plugins: [
-    require('tailwindcss')({ config: './tailwind.config.js' }),
-    require('autoprefixer'),
-  ],
+  plugins: [require('@tailwindcss/postcss'), require('autoprefixer')],
 };

graph/client/src/styles.css

@@ -2,9 +2,49 @@
 @import './syntax-highlight.css';
 /*! purgecss end ignore */
 
-@tailwind components;
-@tailwind base;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/typography';
+@plugin '@tailwindcss/forms' {
+  strategy: class;
+}
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@source '../src';
+@source '../../ui-code-block/src';
+@source '../../ui-common/src';
+@source '../../ui-icons/src';
+@source '../../ui-project-details/src';
+@source '../../ui-render-config/src';
+@source '../../shared/src';
+@source '../../../node_modules/@nx/graph';
+
+@source not '../../**/*.{spec,test,stories}.*';
+@source not '../../**/eslint.config.*';
+
+/* v3 compat: default border color was gray-200, v4 is currentColor. */
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+/* Strip default quote characters around inline code and blockquote. */
+.prose :where(code):not(:where([class~='not-prose'] *))::before,
+.prose :where(code):not(:where([class~='not-prose'] *))::after,
+.prose
+  :where(blockquote p:first-of-type):not(
+    :where([class~='not-prose'] *)
+  )::before,
+.prose
+  :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
+  content: '';
+}
 
 /** Scrollbars **/
 .dark {

graph/client/tailwind.config.js

@@ -1,6 +1,26 @@
-@tailwind components;
-@tailwind base;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@source '../src';
+@source '../../ui-code-block/src';
+@source '../../ui-common/src';
+@source '../../ui-icons/src';
+@source '../../ui-project-details/src';
+@source '../../ui-render-config/src';
+@source '../../shared/src';
+
+@source not '../../**/*.spec.*';
+@source not '../../**/eslint.config.*';
+
+/* v3 compat: default border color was gray-200, v4 is currentColor. */
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 @keyframes fadeIn {
   from {

graph/migrate/.storybook/tailwind.css

@@ -1,15 +1,6 @@
-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
-
 module.exports = {
   plugins: {
-    tailwindcss: {
-      config: join(__dirname, 'tailwind.config.js'),
-    },
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 };

graph/migrate/postcss.config.js

@@ -245,7 +245,7 @@ export const MigrationCard = forwardRef<
           )}
           {onRunMigration && !isStopped && (
             <span
-              className={`rounded-md p-1 text-sm ring-1 ring-inset transition-colors ${
+              className={`rounded-md p-1 text-sm ring-1 transition-colors ring-inset ${
                 isSucceeded
                   ? 'bg-green-50 text-green-700 ring-green-200 hover:bg-green-100 dark:bg-green-900/20 dark:text-green-500 dark:ring-green-900/30 dark:hover:bg-green-900/30'
                   : isFailed
@@ -295,14 +295,14 @@ export const MigrationCard = forwardRef<
       <div className="mt-4 flex justify-end gap-2">
         <button
           onClick={() => onViewImplementation()}
-          className="flex items-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+          className="flex items-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-xs transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
         >
           <CodeBracketIcon className="h-4 w-4" />
           View Source
         </button>
         {isFailed && (
           <button
-            className="flex items-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+            className="flex items-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-xs transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
             onClick={() => {
               setIsExpanded(!isExpanded);
             }}
@@ -313,7 +313,7 @@ export const MigrationCard = forwardRef<
         )}
         {isSucceeded && hasChanges && (
           <button
-            className="flex items-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+            className="flex items-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-xs transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
             onClick={() => {
               setIsExpanded(!isExpanded);
             }}

graph/migrate/src/lib/components/migration-card.tsx

@@ -62,7 +62,7 @@ export function MigrationDone({
           animate={{ opacity: 1 }}
           transition={{ delay: 0.8 }}
           onClick={onCancel}
-          className="flex w-full items-center rounded-md border border-slate-300 bg-white px-6 py-3 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+          className="flex w-full items-center rounded-md border border-slate-300 bg-white px-6 py-3 text-sm font-medium text-slate-700 shadow-xs transition-colors hover:bg-slate-50 focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:outline-none dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
         >
           Cancel
         </motion.button>
@@ -79,7 +79,7 @@ export function MigrationDone({
                 ? PrimaryAction.FinishSquashingCommits
                 : PrimaryAction.FinishWithoutSquashingCommits
             }
-            className="whitespace-nowrap rounded-l-md border border-blue-700 bg-blue-500 px-6 py-3 text-sm font-medium text-white shadow-sm hover:bg-blue-600 dark:border-blue-700 dark:bg-blue-600 dark:text-white hover:dark:bg-blue-700"
+            className="rounded-l-md border border-blue-700 bg-blue-500 px-6 py-3 text-sm font-medium whitespace-nowrap text-white shadow-xs hover:bg-blue-600 dark:border-blue-700 dark:bg-blue-600 dark:text-white hover:dark:bg-blue-700"
           >
             {squashCommits
               ? PrimaryAction.FinishSquashingCommits
@@ -93,7 +93,7 @@ export function MigrationDone({
               transition={{ delay: 0.8 }}
               type="button"
               onClick={() => setIsOpen((prev) => !prev)}
-              className="border-l-1 flex items-center rounded-r-md border border-blue-700 bg-blue-500 px-2 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 dark:border-blue-700 dark:bg-blue-700 dark:text-white hover:dark:bg-blue-800"
+              className="flex items-center rounded-r-md border border-l-1 border-blue-700 bg-blue-500 px-2 py-2 text-sm font-medium text-white shadow-xs hover:bg-blue-700 dark:border-blue-700 dark:bg-blue-700 dark:text-white hover:dark:bg-blue-800"
             >
               <ChevronDownIcon className="h-4 w-4" />
             </motion.button>

graph/migrate/src/lib/components/migration-done.tsx

@@ -131,7 +131,7 @@ export function MigrationList(props: {
           </label>
           {anySelected && (
             <button
-              className="flex items-center gap-2 rounded-md border border-slate-300 bg-white px-2 py-0.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+              className="flex items-center gap-2 rounded-md border border-slate-300 bg-white px-2 py-0.5 text-sm font-medium text-slate-700 shadow-xs hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
               onClick={handleRunMany}
             >
               <PlayIcon className="h-5 w-5"></PlayIcon>
@@ -140,7 +140,7 @@ export function MigrationList(props: {
           )}
           {numberFailed > 0 && (
             <button
-              className="flex items-center gap-2 rounded-md border border-slate-300 bg-white px-2 py-0.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+              className="flex items-center gap-2 rounded-md border border-slate-300 bg-white px-2 py-0.5 text-sm font-medium text-slate-700 shadow-xs hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
               onClick={handleRerunFailed}
             >
               <PlayIcon className="h-5 w-5"></PlayIcon>

graph/migrate/src/lib/components/migration-list.tsx

@@ -21,7 +21,7 @@ export function MigrationSettingsPanel({
       <button
         type="button"
         onClick={() => setIsOpen((prev) => !prev)}
-        className="flex w-full items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+        className="flex w-full items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-xs hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
       >
         Settings
       </button>