diff --git a/e2e/angular/src/tailwind.test.ts b/e2e/angular/src/tailwind.test.ts
index 38c7b2ec98a90..135fb63d1204d 100644
--- a/e2e/angular/src/tailwind.test.ts
+++ b/e2e/angular/src/tailwind.test.ts
@@ -72,7 +72,7 @@ describe('Tailwind support', () => {
 
   const createTailwindConfigFile = (
     tailwindConfigFile = 'tailwind.config.js',
-    libSpacing: typeof spacing['projectVariant1']
+    libSpacing: (typeof spacing)['projectVariant1']
   ) => {
     const tailwindConfig = `const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
     const { join } = require('path');
@@ -98,7 +98,7 @@ describe('Tailwind support', () => {
 
   const updateTailwindConfig = (
     tailwindConfigPath: string,
-    projectSpacing: typeof spacing['root']
+    projectSpacing: (typeof spacing)['root']
   ) => {
     const tailwindConfig = readFile(tailwindConfigPath);
 
@@ -173,7 +173,7 @@ describe('Tailwind support', () => {
 
     const assertLibComponentStyles = (
       lib: string,
-      libSpacing: typeof spacing['root']
+      libSpacing: (typeof spacing)['root']
     ) => {
       const builtComponentContent = readFile(
         `dist/${lib}/esm2022/lib/foo.component.mjs`
@@ -327,7 +327,7 @@ describe('Tailwind support', () => {
 
     const assertAppComponentStyles = (
       outputPath: string,
-      appSpacing: typeof spacing['root']
+      appSpacing: (typeof spacing)['root']
     ) => {
       const mainBundlePath = listFiles(outputPath).find((file) =>
         /^main[\.-]/.test(file)
diff --git a/e2e/utils/create-project-utils.ts b/e2e/utils/create-project-utils.ts
index 967d1250dcdeb..8ae7b096c35f1 100644
--- a/e2e/utils/create-project-utils.ts
+++ b/e2e/utils/create-project-utils.ts
@@ -65,7 +65,7 @@ const nxPackages = [
   `@nx/expo`,
 ] as const;
 
-type NxPackage = typeof nxPackages[number];
+type NxPackage = (typeof nxPackages)[number];
 
 /**
  * Sets up a new project in the temporary project path
diff --git a/graph/client/src/app/feature-projects/panels/search-depth.tsx b/graph/client/src/app/feature-projects/panels/search-depth.tsx
index d1762110f325d..351d2702e2cbd 100644
--- a/graph/client/src/app/feature-projects/panels/search-depth.tsx
+++ b/graph/client/src/app/feature-projects/panels/search-depth.tsx
@@ -50,7 +50,7 @@ export const SearchDepth = memo(
             <button
               data-cy="decrement-depth-filter"
               title="Remove ancestor level"
-              className="inline-flex items-center rounded-l-md border border-slate-300 bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+              className="inline-flex items-center rounded-l-md border border-slate-300 bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
               onClick={decrementDepthFilter}
             >
               <MinusIcon className="h-4 w-4"></MinusIcon>
@@ -58,14 +58,14 @@ export const SearchDepth = memo(
             <span
               id="depthFilterValue"
               data-cy="depth-value"
-              className="block w-full flex-1 rounded-none border-t border-b border-slate-300 bg-white p-1.5 text-center font-mono dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+              className="block w-full flex-1 rounded-none border-b border-t border-slate-300 bg-white p-1.5 text-center font-mono dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
             >
               {searchDepth}
             </span>
             <button
               data-cy="increment-depth-filter"
               title="Add ancestor level"
-              className="inline-flex items-center rounded-r-md border border-slate-300 bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+              className="inline-flex items-center rounded-r-md border border-slate-300 bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
               onClick={incrementDepthFilter}
             >
               <PlusIcon className="h-4 w-4"></PlusIcon>
diff --git a/graph/client/src/app/feature-projects/panels/tracing-panel.tsx b/graph/client/src/app/feature-projects/panels/tracing-panel.tsx
index 26be6711f31fb..1b966dcce95ee 100644
--- a/graph/client/src/app/feature-projects/panels/tracing-panel.tsx
+++ b/graph/client/src/app/feature-projects/panels/tracing-panel.tsx
@@ -28,7 +28,7 @@ export const TracingPanel = memo(
     return (
       <div className="mt-10 px-4">
         <div className="transition duration-200 ease-in-out group-hover:opacity-60">
-          <h3 className="cursor-text pb-2 text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs">
+          <h3 className="cursor-text pb-2 text-sm font-semibold uppercase tracking-wide text-slate-800 lg:text-xs dark:text-slate-200">
             Tracing Path
           </h3>
           <div className="mb-3 flex cursor-pointer flex-row rounded-md border text-center text-xs dark:border-slate-600">
@@ -38,7 +38,7 @@ export const TracingPanel = memo(
                 algorithm === 'shortest'
                   ? 'border-blue-500 dark:border-sky-500'
                   : 'border-slate-300 dark:border-slate-600'
-              } flex-1 rounded-l-md border bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
+              } flex-1 rounded-l-md border bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
             >
               <span>Shortest</span>
             </button>
@@ -48,7 +48,7 @@ export const TracingPanel = memo(
                 algorithm === 'all'
                   ? 'border-blue-500 dark:border-sky-500'
                   : 'border-slate-300 dark:border-slate-600'
-              } flex-1 rounded-r-md border bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
+              } flex-1 rounded-r-md border bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
             >
               <span>All</span>
             </button>
@@ -66,7 +66,7 @@ export const TracingPanel = memo(
                   <span>{start}</span>
                 </div>
 
-                <div className="absolute top-2 right-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition-all transition duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
+                <div className="absolute right-2 top-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition transition-all duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
                   Reset
                   <span className="rounded-md p-1">
                     <XCircleIcon className="h-5 w-5"></XCircleIcon>
@@ -95,7 +95,7 @@ export const TracingPanel = memo(
                   <span>{end}</span>
                 </div>
 
-                <div className="absolute top-2 right-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition-all transition duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
+                <div className="absolute right-2 top-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition transition-all duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
                   Reset
                   <span className="rounded-md p-1">
                     <XCircleIcon className="h-5 w-5" />
diff --git a/graph/client/src/app/feature-tasks/task-list.tsx b/graph/client/src/app/feature-tasks/task-list.tsx
index f682666065d31..1bd8935765858 100644
--- a/graph/client/src/app/feature-tasks/task-list.tsx
+++ b/graph/client/src/app/feature-tasks/task-list.tsx
@@ -87,11 +87,11 @@ function SubProjectList({
   return (
     <>
       {headerText !== '' ? (
-        <h3 className="mt-4 cursor-text py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs">
+        <h3 className="mt-4 cursor-text py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 lg:text-xs dark:text-slate-200">
           {headerText}
         </h3>
       ) : null}
-      <ul className="mt-2 -ml-3">
+      <ul className="-ml-3 mt-2">
         {sortedProjects.map((project) => {
           return (
             <ProjectListItem
diff --git a/graph/client/src/app/ui-tooltips/task-node-actions.tsx b/graph/client/src/app/ui-tooltips/task-node-actions.tsx
index 66267ee03559f..6320ba5735967 100644
--- a/graph/client/src/app/ui-tooltips/task-node-actions.tsx
+++ b/graph/client/src/app/ui-tooltips/task-node-actions.tsx
@@ -9,9 +9,9 @@ export function TaskNodeActions(props: TaskNodeTooltipProps) {
   }, [props.id]);
   const project = props.id.split(':')[0];
   return (
-    <div className="overflow-auto w-full min-w-[350px] max-w-full rounded-md border border-slate-200 dark:border-slate-800 w-full">
+    <div className="w-full w-full min-w-[350px] max-w-full overflow-auto rounded-md border border-slate-200 dark:border-slate-800">
       <div
-        className="flex justify-between items-center w-full bg-slate-50 px-4 py-2 text-xs font-medium uppercase text-slate-500 dark:bg-slate-800 dark:text-slate-400"
+        className="flex w-full items-center justify-between bg-slate-50 px-4 py-2 text-xs font-medium uppercase text-slate-500 dark:bg-slate-800 dark:text-slate-400"
         onClick={() => setIsOpen(!isOpen)}
         data-cy="inputs-accordion"
       >
@@ -53,11 +53,11 @@ function InputAccordion({ section, inputs }) {
   return [
     <li
       key={section}
-      className="flex justify-between items-center whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300"
+      className="flex items-center justify-between whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300"
       onClick={() => setIsOpen(!isOpen)}
       data-cy="input-section-entry"
     >
-      <span className="block truncate font-normal font-bold">{section}</span>
+      <span className="block truncate font-bold font-normal">{section}</span>
       <span>
         {isOpen ? (
           <ChevronUpIcon className="h-4 w-4" />
diff --git a/graph/ui-code-block/src/lib/json-code-block.tsx b/graph/ui-code-block/src/lib/json-code-block.tsx
index 67f257e7a2256..e335df75bdb82 100644
--- a/graph/ui-code-block/src/lib/json-code-block.tsx
+++ b/graph/ui-code-block/src/lib/json-code-block.tsx
@@ -47,7 +47,7 @@ export function JsonCodeBlock(props: JsonCodeBlockProps): JSX.Element {
   }, [copied]);
   return (
     <div className="code-block group relative w-full">
-      <div className="absolute top-0 right-0 z-10 flex">
+      <div className="absolute right-0 top-0 z-10 flex">
         <CopyToClipboard
           text={jsonString}
           onCopy={() => {
@@ -104,12 +104,12 @@ export function sourcesRenderer(
       }
       return (
         <span
-          className="flex group/line min-w-0 flex shrink-1"
+          className="group/line shrink-1 flex flex min-w-0"
           key={`code-group${idx}`}
         >
           <span>{element}</span>
           {sourceElement && (
-            <span className="opacity-0 min-w-0 flex shrink-1 group-hover/line:opacity-100 transition-opacity duration-150 ease-in-out inline pl-2">
+            <span className="shrink-1 inline flex min-w-0 pl-2 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
               {sourceElement}
             </span>
           )}
diff --git a/graph/ui-components/src/lib/debounced-text-input.tsx b/graph/ui-components/src/lib/debounced-text-input.tsx
index 56b7079a372e6..5a625f399eb6b 100644
--- a/graph/ui-components/src/lib/debounced-text-input.tsx
+++ b/graph/ui-components/src/lib/debounced-text-input.tsx
@@ -75,7 +75,7 @@ export function DebouncedTextInput({
           data-cy="textFilterReset"
           type="reset"
           onClick={resetClicked}
-          className="absolute top-1 right-1 inline-block rounded-md bg-slate-50 p-1 text-slate-400 dark:bg-slate-800"
+          className="absolute right-1 top-1 inline-block rounded-md bg-slate-50 p-1 text-slate-400 dark:bg-slate-800"
         >
           <BackspaceIcon className="h-5 w-5"></BackspaceIcon>
         </button>
diff --git a/graph/ui-components/src/lib/dropdown.tsx b/graph/ui-components/src/lib/dropdown.tsx
index f7a1d8323dabe..2954f258f4926 100644
--- a/graph/ui-components/src/lib/dropdown.tsx
+++ b/graph/ui-components/src/lib/dropdown.tsx
@@ -9,7 +9,7 @@ export function Dropdown(props: DropdownProps) {
   const { className, children, ...rest } = props;
   return (
     <select
-      className={`form-select flex items-center rounded-md rounded-md border border-slate-300 bg-white pl-4 pr-8 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}`}
+      className={`form-select flex items-center rounded-md rounded-md border border-slate-300 bg-white py-2 pl-4 pr-8 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}`}
       {...rest}
     >
       {children}
diff --git a/graph/ui-project-details/src/lib/pill.tsx b/graph/ui-project-details/src/lib/pill.tsx
index febfb96f15bcb..c68b180d37943 100644
--- a/graph/ui-project-details/src/lib/pill.tsx
+++ b/graph/ui-project-details/src/lib/pill.tsx
@@ -17,9 +17,9 @@ export function Pill({
         color === 'grey' &&
           'bg-slate-400/10 text-slate-600 ring-slate-400/40 dark:text-slate-400 dark:ring-slate-400/30',
         color === 'green' &&
-          'dark:bg-green-500/10 bg-green-400/10 dark:text-green-400 text-green-500 dark:ring-green-500/20 ring-green-500/40',
+          'bg-green-400/10 text-green-500 ring-green-500/40 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20',
         color === 'yellow' &&
-          'bg-yellow-50 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 dark:ring-yellow-500/20 ring-yellow-500/40'
+          'bg-yellow-50 text-yellow-600 ring-yellow-500/40 dark:bg-yellow-900/30 dark:text-yellow-400 dark:ring-yellow-500/20'
       )}
     >
       {text}
diff --git a/graph/ui-project-details/src/lib/target-configuration-details/fading-collapsible.tsx b/graph/ui-project-details/src/lib/target-configuration-details/fading-collapsible.tsx
index deca5ece8ae44..cb12897060f18 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details/fading-collapsible.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details/fading-collapsible.tsx
@@ -43,7 +43,7 @@ export function FadingCollapsible({ children }: { children: ReactNode }) {
       </div>
       {isCollapsible && (
         <div
-          className="h-4 w-4 absolute bottom-2 right-1/2 cursor-pointer"
+          className="absolute bottom-2 right-1/2 h-4 w-4 cursor-pointer"
           onClick={(e) => {
             e.stopPropagation();
             toggleCollapsed();
diff --git a/graph/ui-project-details/src/lib/target-configuration-details/tooltip-trigger-text.tsx b/graph/ui-project-details/src/lib/target-configuration-details/tooltip-trigger-text.tsx
index 00db47c31bb00..d62faf0b55727 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details/tooltip-trigger-text.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details/tooltip-trigger-text.tsx
@@ -6,7 +6,7 @@ export function TooltipTriggerText({
   children: string | ReactNode;
 }) {
   return (
-    <span className="underline cursor-help underline-offset-8 decoration-2 decoration-dotted decoration-slate-700/50 dark:decoration-slate-400/50">
+    <span className="cursor-help underline decoration-slate-700/50 decoration-dotted decoration-2 underline-offset-8 dark:decoration-slate-400/50">
       {children}
     </span>
   );
diff --git a/graph/ui-theme/src/lib/theme-panel.stories.tsx b/graph/ui-theme/src/lib/theme-panel.stories.tsx
index 782c2cc99fc28..91a6036f76186 100644
--- a/graph/ui-theme/src/lib/theme-panel.stories.tsx
+++ b/graph/ui-theme/src/lib/theme-panel.stories.tsx
@@ -5,7 +5,7 @@ const meta: Meta<typeof ThemePanel> = {
   component: ThemePanel,
   decorators: [
     (Story) => (
-      <div className="bg-white dark:bg-slate-800 block h-auto w-auto border-2 px-8 py-4">
+      <div className="block h-auto w-auto border-2 bg-white px-8 py-4 dark:bg-slate-800">
         <div className="flex justify-end">
           <Story className="justify-items-end" />
         </div>
diff --git a/graph/ui-tooltips/src/lib/project-edge-tooltip.tsx b/graph/ui-tooltips/src/lib/project-edge-tooltip.tsx
index c694db94b0589..6f16f67d69e3f 100644
--- a/graph/ui-tooltips/src/lib/project-edge-tooltip.tsx
+++ b/graph/ui-tooltips/src/lib/project-edge-tooltip.tsx
@@ -39,7 +39,7 @@ export function ProjectEdgeNodeTooltip({
                 key={fileDep.fileName}
                 className={`whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300 ${
                   fileClickCallback !== undefined
-                    ? 'hover:underline hover:cursor-pointer'
+                    ? 'hover:cursor-pointer hover:underline'
                     : ''
                 }`}
                 onClick={
diff --git a/graph/ui-tooltips/src/lib/project-node-tooltip.tsx b/graph/ui-tooltips/src/lib/project-node-tooltip.tsx
index a034d977ef71f..2f13226aea355 100644
--- a/graph/ui-tooltips/src/lib/project-node-tooltip.tsx
+++ b/graph/ui-tooltips/src/lib/project-node-tooltip.tsx
@@ -26,10 +26,10 @@ export function ProjectNodeToolTip({
 }: ProjectNodeToolTipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
-      <h4 className="flex justify-between items-center gap-4">
+      <h4 className="flex items-center justify-between gap-4">
         <div className="flex items-center">
           <Tag className="mr-3">{type}</Tag>
-          <span className="font-mono mr-3">{id}</span>
+          <span className="mr-3 font-mono">{id}</span>
         </div>
         {openConfigCallback && (
           <button
diff --git a/graph/ui-tooltips/src/lib/task-node-tooltip.tsx b/graph/ui-tooltips/src/lib/task-node-tooltip.tsx
index d543253e4906c..2f5d4e87cad1e 100644
--- a/graph/ui-tooltips/src/lib/task-node-tooltip.tsx
+++ b/graph/ui-tooltips/src/lib/task-node-tooltip.tsx
@@ -28,11 +28,11 @@ export function TaskNodeTooltip({
 }: TaskNodeTooltipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
-      <h4 className="flex justify-between items-center gap-4 mb-3">
+      <h4 className="mb-3 flex items-center justify-between gap-4">
         <div className="flex grow items-center justify-between">
           <div className="flex items-center">
             <Tag className="mr-3">{executor}</Tag>
-            <span className="font-mono mr-3">{id}</span>
+            <span className="mr-3 font-mono">{id}</span>
           </div>
           {openConfigCallback && (
             <button
diff --git a/nx-dev/feature-ai/src/lib/feed-container.tsx b/nx-dev/feature-ai/src/lib/feed-container.tsx
index 0e5405e9e7ff2..1891a2e2cd72b 100644
--- a/nx-dev/feature-ai/src/lib/feed-container.tsx
+++ b/nx-dev/feature-ai/src/lib/feed-container.tsx
@@ -135,7 +135,7 @@ export function FeedContainer(): JSX.Element {
 
                 <div
                   className={cx(
-                    'fixed bottom-0 left0 right-0 w-full py-4 px-4 lg:py-6 lg:px-0',
+                    'left0 fixed bottom-0 right-0 w-full px-4 py-4 lg:px-0 lg:py-6',
                     'bg-gradient-to-t from-white via-white/75 dark:from-slate-900 dark:via-slate-900/75'
                   )}
                 >
diff --git a/nx-dev/feature-ai/src/lib/feed/feed-question.tsx b/nx-dev/feature-ai/src/lib/feed/feed-question.tsx
index aa9eb84e23285..6754a855b7edf 100644
--- a/nx-dev/feature-ai/src/lib/feed/feed-question.tsx
+++ b/nx-dev/feature-ai/src/lib/feed/feed-question.tsx
@@ -1,7 +1,7 @@
 export function FeedQuestion({ content }: { content: string }) {
   return (
-    <div className="flex justify-end w-full">
-      <p className="px-4 py-2 bg-blue-500 dark:bg-sky-500 selection:bg-sky-900 rounded-lg text-white text-base whitespace-pre-wrap break-words">
+    <div className="flex w-full justify-end">
+      <p className="whitespace-pre-wrap break-words rounded-lg bg-blue-500 px-4 py-2 text-base text-white selection:bg-sky-900 dark:bg-sky-500">
         {content}
       </p>
     </div>
diff --git a/nx-dev/feature-ai/src/lib/feed/feed.tsx b/nx-dev/feature-ai/src/lib/feed/feed.tsx
index aaa313a007063..e27eeb24564ce 100644
--- a/nx-dev/feature-ai/src/lib/feed/feed.tsx
+++ b/nx-dev/feature-ai/src/lib/feed/feed.tsx
@@ -10,12 +10,12 @@ export function Feed({
   onFeedback: (statement: 'bad' | 'good', chatItemUid: string) => void;
 }) {
   return (
-    <div className="flow-root my-12">
+    <div className="my-12 flow-root">
       <ul role="list" className="-mb-8 space-y-12">
         {activity.map((activityItem, activityItemIdx) => (
           <li
             key={[activityItem.role, activityItem.id].join('-')}
-            className="pt-12 relative flex items-start space-x-3 feed-item"
+            className="feed-item relative flex items-start space-x-3 pt-12"
           >
             {activityItem.role === 'assistant' ? (
               <FeedAnswer
diff --git a/nx-dev/feature-ai/src/lib/loading-state.tsx b/nx-dev/feature-ai/src/lib/loading-state.tsx
index 18a859e0af7d6..404d25a464659 100644
--- a/nx-dev/feature-ai/src/lib/loading-state.tsx
+++ b/nx-dev/feature-ai/src/lib/loading-state.tsx
@@ -1,8 +1,8 @@
 export function LoadingState(): JSX.Element {
   return (
-    <div className="w-full flex items-center justify-center px-4 gap-4 py-2 text-blue-500 dark:text-sky-500 transition ease-in-out duration-150">
+    <div className="flex w-full items-center justify-center gap-4 px-4 py-2 text-blue-500 transition duration-150 ease-in-out dark:text-sky-500">
       <svg
-        className="animate-spin h-5 w-5"
+        className="h-5 w-5 animate-spin"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         stroke="currentColor"
diff --git a/nx-dev/feature-ai/src/lib/prompt.tsx b/nx-dev/feature-ai/src/lib/prompt.tsx
index bb771972d5651..3d6a93677c1fc 100644
--- a/nx-dev/feature-ai/src/lib/prompt.tsx
+++ b/nx-dev/feature-ai/src/lib/prompt.tsx
@@ -62,7 +62,7 @@ export function Prompt({
     <form
       ref={formRef}
       onSubmit={handleSubmit}
-      className="relative flex gap-2 max-w-3xl mx-auto py-0 px-2 shadow-lg rounded-md border border-slate-300 bg-white dark:border-slate-900 dark:bg-slate-700"
+      className="relative mx-auto flex max-w-3xl gap-2 rounded-md border border-slate-300 bg-white px-2 py-0 shadow-lg dark:border-slate-900 dark:bg-slate-700"
     >
       <div
         className={cx(
@@ -104,7 +104,7 @@ export function Prompt({
           </Button>
         )}
       </div>
-      <div className="overflow-y-auto w-full h-full max-h-[300px]">
+      <div className="h-full max-h-[300px] w-full overflow-y-auto">
         <Textarea
           onKeyDown={(event) => {
             if (
@@ -123,7 +123,7 @@ export function Prompt({
           name="query"
           maxLength={500}
           disabled={isGenerating}
-          className="block w-full p-0 resize-none bg-transparent text-sm placeholder-slate-500 pl-2 py-[1.3rem] focus-within:outline-none focus:placeholder-slate-400 dark:focus:placeholder-slate-300 dark:text-white focus:outline-none focus:ring-0 border-none disabled:cursor-not-allowed"
+          className="block w-full resize-none border-none bg-transparent p-0 py-[1.3rem] pl-2 text-sm placeholder-slate-500 focus-within:outline-none focus:placeholder-slate-400 focus:outline-none focus:ring-0 disabled:cursor-not-allowed dark:text-white dark:focus:placeholder-slate-300"
           placeholder="How does caching work?"
           rows={1}
         />
@@ -134,7 +134,7 @@ export function Prompt({
           size="small"
           type="submit"
           disabled={isGenerating}
-          className="self-end w-12 h-12 disabled:cursor-not-allowed"
+          className="h-12 w-12 self-end disabled:cursor-not-allowed"
         >
           <div hidden className="sr-only">
             Ask
diff --git a/nx-dev/feature-ai/src/lib/sidebar/activity-limit-reached.tsx b/nx-dev/feature-ai/src/lib/sidebar/activity-limit-reached.tsx
index f597f18b6639c..e9da284d32626 100644
--- a/nx-dev/feature-ai/src/lib/sidebar/activity-limit-reached.tsx
+++ b/nx-dev/feature-ai/src/lib/sidebar/activity-limit-reached.tsx
@@ -2,7 +2,7 @@ import { InformationCircleIcon } from '@heroicons/react/24/outline';
 
 export function ActivityLimitReached(): JSX.Element {
   return (
-    <div className="rounded-md bg-slate-50 dark:bg-slate-800/40 ring-slate-100 dark:ring-slate-700 ring-1 p-4 shadow-sm">
+    <div className="rounded-md bg-slate-50 p-4 shadow-sm ring-1 ring-slate-100 dark:bg-slate-800/40 dark:ring-slate-700">
       <div className="flex">
         <div className="flex-shrink-0">
           <InformationCircleIcon
diff --git a/nx-dev/feature-ai/src/lib/sidebar/sidebar-container.tsx b/nx-dev/feature-ai/src/lib/sidebar/sidebar-container.tsx
index b1cc67f4d2152..c96de1a83acee 100644
--- a/nx-dev/feature-ai/src/lib/sidebar/sidebar-container.tsx
+++ b/nx-dev/feature-ai/src/lib/sidebar/sidebar-container.tsx
@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 export function SidebarContainer({ children }: { children: ReactNode[] }) {
   return (
     <div id="sidebar" data-testid="sidebar">
-      <div className="hidden h-full w-72 flex-col border-r border-slate-200 dark:border-slate-700 dark:bg-slate-900 md:flex">
+      <div className="hidden h-full w-72 flex-col border-r border-slate-200 md:flex dark:border-slate-700 dark:bg-slate-900">
         <div className="relative flex flex-col gap-4 overflow-y-scroll p-4">
           {...children}
         </div>
diff --git a/nx-dev/feature-ai/src/lib/sidebar/warning-message.tsx b/nx-dev/feature-ai/src/lib/sidebar/warning-message.tsx
index c4365fa4354c9..e892143b8485f 100644
--- a/nx-dev/feature-ai/src/lib/sidebar/warning-message.tsx
+++ b/nx-dev/feature-ai/src/lib/sidebar/warning-message.tsx
@@ -2,7 +2,7 @@ import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 
 export function WarningMessage(): JSX.Element {
   return (
-    <div className="rounded-md bg-yellow-50 dark:bg-yellow-900/30 ring-1 ring-yellow-100 dark:ring-yellow-900 p-4">
+    <div className="rounded-md bg-yellow-50 p-4 ring-1 ring-yellow-100 dark:bg-yellow-900/30 dark:ring-yellow-900">
       <h3 className="flex gap-x-3 text-sm font-medium text-yellow-600 dark:text-yellow-400">
         <ExclamationTriangleIcon
           className="h-5 w-5 text-yellow-500 dark:text-yellow-400"
diff --git a/nx-dev/feature-package-schema-viewer/src/lib/content.tsx b/nx-dev/feature-package-schema-viewer/src/lib/content.tsx
index afa43da62ccbb..bd79892d3eb1c 100644
--- a/nx-dev/feature-package-schema-viewer/src/lib/content.tsx
+++ b/nx-dev/feature-package-schema-viewer/src/lib/content.tsx
@@ -115,7 +115,7 @@ export function Content({
   };
 
   return (
-    <div data-document="main" className="min-w-0 flex-auto pt-8 pb-24 lg:pb-16">
+    <div data-document="main" className="min-w-0 flex-auto pb-24 pt-8 lg:pb-16">
       <div className="mb-8 flex w-full items-center space-x-2">
         <div className="w-full flex-grow space-x-4">
           <div
diff --git a/nx-dev/feature-package-schema-viewer/src/lib/ui/headings.tsx b/nx-dev/feature-package-schema-viewer/src/lib/ui/headings.tsx
index c59f25475f1d3..756bb5b11a757 100644
--- a/nx-dev/feature-package-schema-viewer/src/lib/ui/headings.tsx
+++ b/nx-dev/feature-package-schema-viewer/src/lib/ui/headings.tsx
@@ -11,7 +11,7 @@ export const Heading1 = ({ title }: { title: string }) => (
     <Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
       <LinkIcon
         role="img"
-        className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
+        className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100"
       />
     </Link>
   </h1>
@@ -26,7 +26,7 @@ export const Heading2 = ({ title }: { title: string }) => (
     <Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
       <LinkIcon
         role="img"
-        className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
+        className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100"
       />
     </Link>
   </h2>
@@ -41,7 +41,7 @@ export const Heading3 = ({ title }: { title: string }) => (
     <Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
       <LinkIcon
         role="img"
-        className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
+        className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100"
       />
     </Link>
   </h3>
diff --git a/nx-dev/feature-package-schema-viewer/src/lib/ui/package-reference.tsx b/nx-dev/feature-package-schema-viewer/src/lib/ui/package-reference.tsx
index 9179d7abeb73e..39dd88afbf789 100644
--- a/nx-dev/feature-package-schema-viewer/src/lib/ui/package-reference.tsx
+++ b/nx-dev/feature-package-schema-viewer/src/lib/ui/package-reference.tsx
@@ -120,7 +120,7 @@ function EmptyList({
     <li className="relative flex px-2 py-2 transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800/60">
       <div className="flex-shrink-0 self-start rounded-lg border-slate-200 bg-slate-100 p-2 dark:border-slate-600 dark:bg-slate-700">
         <InformationCircleIcon
-          className="h-5 w-5 flex-shrink-0 rounded-md border-slate-200 bg-slate-50 dark:bg-slate-800 dark:bg-slate-700"
+          className="h-5 w-5 flex-shrink-0 rounded-md border-slate-200 bg-slate-50 dark:bg-slate-700 dark:bg-slate-800"
           role="img"
         />
       </div>
diff --git a/nx-dev/feature-search/src/lib/algolia-search.global.css b/nx-dev/feature-search/src/lib/algolia-search.global.css
index bdcccdbe01ee1..c2a4c2fa073b3 100644
--- a/nx-dev/feature-search/src/lib/algolia-search.global.css
+++ b/nx-dev/feature-search/src/lib/algolia-search.global.css
@@ -3,7 +3,7 @@
 }
 
 body .DocSearch-Container {
-  @apply fixed top-0 left-0 z-[50] flex h-screen w-screen cursor-auto flex-col bg-black/10 p-4 backdrop-blur-sm dark:bg-white/10 sm:p-6 md:p-[10vh] lg:p-[12vh];
+  @apply fixed left-0 top-0 z-[50] flex h-screen w-screen cursor-auto flex-col bg-black/10 p-4 backdrop-blur-sm sm:p-6 md:p-[10vh] lg:p-[12vh] dark:bg-white/10;
 }
 
 .DocSearch-LoadingIndicator svg {
@@ -243,11 +243,11 @@ body .DocSearch-Container {
 }
 
 .DocSearch-Hit > a {
-  @apply block py-4 px-6;
+  @apply block px-6 py-4;
 }
 
 .DocSearch-Hit--Result {
-  @apply py-3 px-4 !important;
+  @apply px-4 py-3 !important;
 }
 
 .DocSearch-Hit {
@@ -296,7 +296,7 @@ body .DocSearch-Container {
 }
 
 .DocSearch-Footer {
-  @apply flex flex-none justify-end border-t border-slate-200 py-4 px-6 dark:border-slate-800;
+  @apply flex flex-none justify-end border-t border-slate-200 px-6 py-4 dark:border-slate-800;
 }
 
 .DocSearch-Commands {
@@ -330,11 +330,11 @@ body .DocSearch-Container {
 }
 
 .DocSearch-StartScreen .DocSearch-Help {
-  @apply py-16 px-6 text-center text-slate-400 dark:text-slate-600;
+  @apply px-6 py-16 text-center text-slate-400 dark:text-slate-600;
 }
 
 .DocSearch-NoResults {
-  @apply px-4 pt-10 pb-8;
+  @apply px-4 pb-8 pt-10;
 }
 
 .DocSearch-NoResults .DocSearch-Title {
diff --git a/nx-dev/nx-dev/pages/404.tsx b/nx-dev/nx-dev/pages/404.tsx
index d9cff45530d7f..477a151d62669 100644
--- a/nx-dev/nx-dev/pages/404.tsx
+++ b/nx-dev/nx-dev/pages/404.tsx
@@ -45,7 +45,7 @@ export function FourOhFour(): JSX.Element {
                   src={illustrationUrl}
                   className="drop-shadow"
                 />
-                <h1 className="mt-4 text-4xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100 sm:text-6xl lg:ml-8">
+                <h1 className="mt-4 text-4xl font-extrabold tracking-tight text-slate-900 sm:text-6xl lg:ml-8 dark:text-slate-100">
                   <span className="sr-only">404 - </span>Page not found!
                 </h1>
               </div>
diff --git a/nx-dev/nx-dev/pages/500.tsx b/nx-dev/nx-dev/pages/500.tsx
index b8114730307ae..e265d766c7131 100644
--- a/nx-dev/nx-dev/pages/500.tsx
+++ b/nx-dev/nx-dev/pages/500.tsx
@@ -22,7 +22,7 @@ export default function FiveOhOh(): JSX.Element {
                   src="/images/illustrations/500.svg"
                   className="drop-shadow"
                 />
-                <h1 className="mt-4 text-4xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100 sm:text-6xl lg:ml-8">
+                <h1 className="mt-4 text-4xl font-extrabold tracking-tight text-slate-900 sm:text-6xl lg:ml-8 dark:text-slate-100">
                   <div className="sr-only">500 - </div>Internal Server Error!
                 </h1>
               </div>
diff --git a/nx-dev/nx-dev/pages/community.tsx b/nx-dev/nx-dev/pages/community.tsx
index 1244304652dba..52227f587fe6a 100644
--- a/nx-dev/nx-dev/pages/community.tsx
+++ b/nx-dev/nx-dev/pages/community.tsx
@@ -46,7 +46,7 @@ export default function Community(): JSX.Element {
             <ConnectWithUs />
           </div>
           <article id="nx-champions" className="relative">
-            <div className="mx-auto max-w-7xl items-stretch py-12 px-4 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:py-16 lg:px-8">
+            <div className="mx-auto max-w-7xl items-stretch px-4 py-12 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:px-8 lg:py-16">
               <div className="md:col-span-2">
                 <header>
                   <SectionHeading as="h1" variant="title" id="champions">
diff --git a/nx-dev/nx-dev/pages/conf.tsx b/nx-dev/nx-dev/pages/conf.tsx
index 281481bee62f9..3941e898a14cd 100644
--- a/nx-dev/nx-dev/pages/conf.tsx
+++ b/nx-dev/nx-dev/pages/conf.tsx
@@ -74,9 +74,9 @@ export default function ConfPage(): JSX.Element {
                   <path d="M153.224 267C150.787 267 148.615 266.58 146.707 265.74C144.812 264.899 143.304 263.731 142.184 262.236C141.076 260.729 140.473 258.98 140.375 256.99H145.027C145.126 258.214 145.544 259.27 146.283 260.16C147.021 261.038 147.987 261.717 149.181 262.199C150.375 262.681 151.698 262.922 153.15 262.922C154.775 262.922 156.215 262.638 157.471 262.069C158.726 261.501 159.711 260.71 160.424 259.697C161.138 258.683 161.495 257.51 161.495 256.175C161.495 254.779 161.151 253.549 160.461 252.486C159.772 251.411 158.763 250.571 157.434 249.965C156.104 249.36 154.48 249.057 152.56 249.057H149.532V244.979H152.56C154.061 244.979 155.378 244.707 156.511 244.163C157.655 243.62 158.548 242.854 159.188 241.865C159.84 240.876 160.166 239.715 160.166 238.38C160.166 237.095 159.883 235.977 159.317 235.025C158.751 234.074 157.951 233.332 156.917 232.801C155.895 232.269 154.689 232.004 153.298 232.004C151.993 232.004 150.763 232.245 149.606 232.727C148.461 233.196 147.526 233.882 146.8 234.784C146.073 235.674 145.679 236.749 145.618 238.01H141.187C141.261 236.02 141.858 234.278 142.978 232.782C144.098 231.275 145.563 230.101 147.372 229.26C149.193 228.42 151.193 228 153.372 228C155.711 228 157.717 228.476 159.391 229.427C161.064 230.366 162.351 231.608 163.249 233.153C164.148 234.698 164.597 236.366 164.597 238.158C164.597 240.296 164.037 242.118 162.917 243.626C161.809 245.134 160.301 246.178 158.394 246.759V247.055C160.781 247.451 162.646 248.47 163.988 250.114C165.329 251.745 166 253.765 166 256.175C166 258.239 165.44 260.092 164.32 261.736C163.212 263.367 161.698 264.652 159.778 265.591C157.858 266.53 155.674 267 153.224 267Z" />
                 </svg>
               </div>
-              <div className="mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pl-16 lg:pb-0">
+              <div className="mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pb-0 lg:pl-16">
                 <h2>
-                  <div className="font-input-mono mb-4 inline-block rounded-lg border border-slate-200 bg-white/40 p-4 py-4 px-6 text-xl text-sm font-extrabold leading-none tracking-tight shadow-sm transition hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800 sm:text-2xl lg:text-2xl">
+                  <div className="font-input-mono mb-4 inline-block rounded-lg border border-slate-200 bg-white/40 p-4 px-6 py-4 text-sm text-xl font-extrabold leading-none tracking-tight shadow-sm transition hover:bg-white sm:text-2xl lg:text-2xl dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
                     <span className="sr-only">Announcing Nx Conf on </span>{' '}
                     September 26, 2023
                   </div>
@@ -178,7 +178,7 @@ export default function ConfPage(): JSX.Element {
                   rel="noreferrer"
                   target="_blank"
                   href="https://www.youtube.com/live/IQ5YyEYZw68"
-                  className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
+                  className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
                 >
                   <span className="group-hover:underline">
                     Watch the live stream recording
@@ -228,9 +228,9 @@ export default function ConfPage(): JSX.Element {
         </div>
         <div className="w-full overflow-hidden">
           {/*NAVIGATION*/}
-          <div className="hidden border-t border-b border-slate-200 dark:border-slate-700 md:block">
+          <div className="hidden border-b border-t border-slate-200 md:block dark:border-slate-700">
             <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
-              <div className="font-input-mono grid-cols-7 items-center divide-x divide-slate-200 text-center dark:divide-slate-700 md:grid">
+              <div className="font-input-mono grid-cols-7 items-center divide-x divide-slate-200 text-center md:grid dark:divide-slate-700">
                 <div className="p-8">
                   <svg
                     id="nx-conf-logo"
diff --git a/nx-dev/nx-dev/pages/launch-nx.tsx b/nx-dev/nx-dev/pages/launch-nx.tsx
index 6044497c41943..e339fefae7706 100644
--- a/nx-dev/nx-dev/pages/launch-nx.tsx
+++ b/nx-dev/nx-dev/pages/launch-nx.tsx
@@ -48,9 +48,9 @@ export default function ConfPage(): JSX.Element {
         <Header />
         <LaunchNxIntro />
         {/*NAVIGATION*/}
-        <div className="hidden border-t border-b border-slate-200 dark:border-slate-700 md:block">
+        <div className="hidden border-b border-t border-slate-200 md:block dark:border-slate-700">
           <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
-            <div className="font-input-mono grid-cols-5 items-center divide-x divide-slate-200 text-center dark:divide-slate-700 md:grid">
+            <div className="font-input-mono grid-cols-5 items-center divide-x divide-slate-200 text-center md:grid dark:divide-slate-700">
               <div className="p-6">
                 <svg
                   className="inline-block dark:text-white"
diff --git a/nx-dev/ui-common/src/lib/champion-card.tsx b/nx-dev/ui-common/src/lib/champion-card.tsx
index 93f170622967e..69e49d1318afc 100644
--- a/nx-dev/ui-common/src/lib/champion-card.tsx
+++ b/nx-dev/ui-common/src/lib/champion-card.tsx
@@ -18,8 +18,8 @@ export function ChampionCard({ data }: { data: Champion }): JSX.Element {
     <figure className="relative flex flex-col-reverse rounded-lg border border-slate-200 bg-white/40 p-4 text-sm shadow-sm  transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
       <blockquote className="mt-4 text-slate-600 dark:text-slate-400">
         <p className="mb-4">{data.expertise}</p>
-        <div className="mt-0.5 ml text-xs text-slate-400 dark:text-slate-500 inline">
-          <ChatBubbleLeftIcon className="h-4 w-4 inline" />{' '}
+        <div className="ml mt-0.5 inline text-xs text-slate-400 dark:text-slate-500">
+          <ChatBubbleLeftIcon className="inline h-4 w-4" />{' '}
           {data.contact[0].label}
         </div>
       </blockquote>
@@ -38,7 +38,7 @@ export function ChampionCard({ data }: { data: Champion }): JSX.Element {
             </a>
           </div>
           <div className="mt-0.5 text-xs text-slate-400 dark:text-slate-500">
-            <MapIcon className="h-4 w-4 inline" /> {data.location}
+            <MapIcon className="inline h-4 w-4" /> {data.location}
           </div>
         </div>
       </figcaption>
diff --git a/nx-dev/ui-common/src/lib/champion-perks.tsx b/nx-dev/ui-common/src/lib/champion-perks.tsx
index 6101de193ef05..2f6145695eaf2 100644
--- a/nx-dev/ui-common/src/lib/champion-perks.tsx
+++ b/nx-dev/ui-common/src/lib/champion-perks.tsx
@@ -63,7 +63,7 @@ export function ChampionPerks(): JSX.Element {
                   aria-hidden="true"
                 />
                 <HeartIcon
-                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"
+                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:-translate-y-1 group-hover:translate-x-8 group-hover:opacity-100 dark:text-fuchsia-500"
                   aria-hidden="true"
                 />
                 <GiftIcon
@@ -89,7 +89,7 @@ export function ChampionPerks(): JSX.Element {
                   aria-hidden="true"
                 />
                 <VideoCameraIcon
-                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"
+                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:-translate-y-1 group-hover:translate-x-8 group-hover:opacity-100 dark:text-fuchsia-500"
                   aria-hidden="true"
                 />
                 <MicrophoneIcon
@@ -116,7 +116,7 @@ export function ChampionPerks(): JSX.Element {
                   aria-hidden="true"
                 />
                 <LightBulbIcon
-                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"
+                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:-translate-y-1 group-hover:translate-x-8 group-hover:opacity-100 dark:text-fuchsia-500"
                   aria-hidden="true"
                 />
                 <ChatBubbleBottomCenterTextIcon
@@ -143,7 +143,7 @@ export function ChampionPerks(): JSX.Element {
                   aria-hidden="true"
                 />
                 <UsersIcon
-                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"
+                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:-translate-y-1 group-hover:translate-x-8 group-hover:opacity-100 dark:text-fuchsia-500"
                   aria-hidden="true"
                 />
                 <UserPlusIcon
@@ -159,7 +159,7 @@ export function ChampionPerks(): JSX.Element {
             <dd className="mt-2 text-base text-slate-500 dark:text-slate-400">
               When you're ready to join, fill out the{' '}
               <a
-                className="underline text-slate-900 dark:text-slate-100"
+                className="text-slate-900 underline dark:text-slate-100"
                 href="https://forms.gle/wYd9mC3ka64ki96G7"
               >
                 application form
diff --git a/nx-dev/ui-common/src/lib/flip-card.tsx b/nx-dev/ui-common/src/lib/flip-card.tsx
index 20b7b69469fda..06b6cb561ff33 100644
--- a/nx-dev/ui-common/src/lib/flip-card.tsx
+++ b/nx-dev/ui-common/src/lib/flip-card.tsx
@@ -38,20 +38,20 @@ export function FlipCard({
           }
         }}
         className={cx(
-          'block group perspective',
+          'perspective group block',
           isFlippable && !isFlipped ? 'cursor-pointer' : 'cursor-default'
         )}
       >
         <div
           className={cx(
-            'relative preserve-3d transition w-full h-full duration-200 content-center rounded-lg border-2 shadow-sm focus-within:ring-offset-2 bg-white/60 dark:bg-slate-800/90',
+            'preserve-3d relative h-full w-full content-center rounded-lg border-2 bg-white/60 shadow-sm transition duration-200 focus-within:ring-offset-2 dark:bg-slate-800/90',
             isFlippable && isFlipped
               ? 'my-rotate-y-180 bg-white dark:bg-slate-800'
               : '',
             isFlippable
               ? isFlipped
                 ? 'border-blue-400 dark:border-slate-800'
-                : 'border-blue-400 dark:border-slate-800 hover:[transform:rotateY(10deg)]'
+                : 'border-blue-400 hover:[transform:rotateY(10deg)] dark:border-slate-800'
               : 'border-1 border-slate-300 dark:border-slate-800'
           )}
         >
@@ -65,7 +65,7 @@ export function FlipCard({
 
 export function FlipCardFront({ children }: { children: ReactNode }) {
   return (
-    <div className="absolute backface-hidden w-full h-full flex flex-col justify-center items-center text-center font-bold text-3xl px-2">
+    <div className="backface-hidden absolute flex h-full w-full flex-col items-center justify-center px-2 text-center text-3xl font-bold">
       {children}
     </div>
   );
@@ -75,7 +75,7 @@ export function FlipCardBack({ children }: { children: ReactNode }) {
   return (
     <FlipCardContext.Consumer>
       {() => (
-        <div className="my-rotate-y-180 backface-hidden w-full h-full overflow-hidden rounded-md dark:text-slate-100 text-slate-900 text-3xl dark:bg-slate-800 bg-white">
+        <div className="my-rotate-y-180 backface-hidden h-full w-full overflow-hidden rounded-md bg-white text-3xl text-slate-900 dark:bg-slate-800 dark:text-slate-100">
           <div className="p-4 text-sm sm:text-sm md:text-sm lg:text-lg">
             {children}
           </div>
diff --git a/nx-dev/ui-common/src/lib/headers/default-menu-item.tsx b/nx-dev/ui-common/src/lib/headers/default-menu-item.tsx
index 40f8800bea106..df9213d9b47f8 100644
--- a/nx-dev/ui-common/src/lib/headers/default-menu-item.tsx
+++ b/nx-dev/ui-common/src/lib/headers/default-menu-item.tsx
@@ -19,7 +19,7 @@ export function DefaultMenuItem({
   return (
     <Tag
       className={cx(
-        'relative flex flex-1 gap-4 rounded-lg py-4 px-2 transition duration-150 ease-in-out',
+        'relative flex flex-1 gap-4 rounded-lg px-2 py-4 transition duration-150 ease-in-out',
         item.isHighlight
           ? 'bg-slate-50 hover:bg-slate-100 dark:bg-slate-800/80 dark:hover:bg-slate-700/60'
           : 'hover:bg-slate-50 dark:hover:bg-slate-800/60',
diff --git a/nx-dev/ui-common/src/lib/plugin-card.tsx b/nx-dev/ui-common/src/lib/plugin-card.tsx
index c7496906e2638..79015b6657fee 100644
--- a/nx-dev/ui-common/src/lib/plugin-card.tsx
+++ b/nx-dev/ui-common/src/lib/plugin-card.tsx
@@ -49,7 +49,7 @@ export function PluginCard({
           className="flex grow flex-col focus:outline-none"
         >
           <span className="absolute inset-0" aria-hidden="true" />
-          <p className="line-clamp-3 mb-2 grow text-sm">{description}</p>
+          <p className="mb-2 line-clamp-3 grow text-sm">{description}</p>
 
           <div className="flex flex-wrap items-center justify-between py-0.5 text-xs font-medium capitalize">
             <div className="my-1 mr-1">
diff --git a/nx-dev/ui-common/src/lib/youtube.component.tsx b/nx-dev/ui-common/src/lib/youtube.component.tsx
index 464b7dc62a57e..acd399f6723e9 100644
--- a/nx-dev/ui-common/src/lib/youtube.component.tsx
+++ b/nx-dev/ui-common/src/lib/youtube.component.tsx
@@ -62,10 +62,10 @@ export function YouTube(props: {
         width={props.width || '100%'}
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
         loading="lazy"
-        className="rounded-lg shadow-lg mb-1"
+        className="mb-1 rounded-lg shadow-lg"
       />
       {props.caption && (
-        <p className="md:w-1/2 mx-auto pt-0 text-slate-500 dark:text-slate-400">
+        <p className="mx-auto pt-0 text-slate-500 md:w-1/2 dark:text-slate-400">
           {props.caption}
         </p>
       )}
diff --git a/nx-dev/ui-community/src/lib/plugin-directory.tsx b/nx-dev/ui-community/src/lib/plugin-directory.tsx
index 5c85559be3036..e68809429fd91 100644
--- a/nx-dev/ui-community/src/lib/plugin-directory.tsx
+++ b/nx-dev/ui-community/src/lib/plugin-directory.tsx
@@ -88,56 +88,56 @@ export function PluginDirectory({
               type="search"
             />
           </div>
-          <div className="text-xs my-2 flex whitespace-nowrap">
-            <div className="py-1 mr-1">Order by:</div>
+          <div className="my-2 flex whitespace-nowrap text-xs">
+            <div className="mr-1 py-1">Order by:</div>
             <div className="flex flex-wrap gap-1">
               <button
-                className="rounded-sm border border-slate-200 bg-white py-1 px-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
+                className="rounded-sm border border-slate-200 bg-white px-1 py-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
                 onClick={() => setOrderBy('lastPublishDate')}
               >
-                <ClockIcon className="h-4 w-4 inline-block mr-0.5 align-bottom"></ClockIcon>
+                <ClockIcon className="mr-0.5 inline-block h-4 w-4 align-bottom"></ClockIcon>
                 Release Date
                 {modifiers.orderBy === 'lastPublishDate' &&
                 modifiers.orderDirection === 'ASC' ? (
-                  <ArrowLongUpIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongUpIcon>
+                  <ArrowLongUpIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongUpIcon>
                 ) : null}
                 {modifiers.orderBy === 'lastPublishDate' &&
                 modifiers.orderDirection === 'DESC' ? (
-                  <ArrowLongDownIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongDownIcon>
+                  <ArrowLongDownIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongDownIcon>
                 ) : null}
               </button>
               <button
-                className="rounded-sm border border-slate-200 bg-white py-1 px-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
+                className="rounded-sm border border-slate-200 bg-white px-1 py-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
                 onClick={() => setOrderBy('npmDownloads')}
               >
-                <ArrowDownTrayIcon className="h-4 w-4 inline-block mr-0.5 align-bottom"></ArrowDownTrayIcon>
+                <ArrowDownTrayIcon className="mr-0.5 inline-block h-4 w-4 align-bottom"></ArrowDownTrayIcon>
                 Downloads
                 {modifiers.orderBy === 'npmDownloads' &&
                 modifiers.orderDirection === 'ASC' ? (
-                  <ArrowLongUpIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongUpIcon>
+                  <ArrowLongUpIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongUpIcon>
                 ) : null}
                 {modifiers.orderBy === 'npmDownloads' &&
                 modifiers.orderDirection === 'DESC' ? (
-                  <ArrowLongDownIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongDownIcon>
+                  <ArrowLongDownIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongDownIcon>
                 ) : null}
               </button>
               <button
-                className="rounded-sm border border-slate-200 bg-white py-1 px-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
+                className="rounded-sm border border-slate-200 bg-white px-1 py-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
                 onClick={() => setOrderBy('githubStars')}
               >
-                <StarIcon className="h-4 w-4 inline-block mr-0.5 align-bottom"></StarIcon>
+                <StarIcon className="mr-0.5 inline-block h-4 w-4 align-bottom"></StarIcon>
                 GH Stars
                 {modifiers.orderBy === 'githubStars' &&
                 modifiers.orderDirection === 'ASC' ? (
-                  <ArrowLongUpIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongUpIcon>
+                  <ArrowLongUpIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongUpIcon>
                 ) : null}
                 {modifiers.orderBy === 'githubStars' &&
                 modifiers.orderDirection === 'DESC' ? (
-                  <ArrowLongDownIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongDownIcon>
+                  <ArrowLongDownIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongDownIcon>
                 ) : null}
               </button>
               <button
-                className="rounded-sm border border-slate-200 bg-white py-1 px-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
+                className="rounded-sm border border-slate-200 bg-white px-1 py-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
                 onClick={() => setOrderBy('nxVersion')}
               >
                 {/* Nx Logo */}
@@ -145,7 +145,7 @@ export function PluginDirectory({
                   role="img"
                   viewBox="0 0 24 24"
                   xmlns="http://www.w3.org/2000/svg"
-                  className="h-4 w-4 inline-block mx-0.5 align-bottom"
+                  className="mx-0.5 inline-block h-4 w-4 align-bottom"
                   fill="currentColor"
                 >
                   <title>Nx</title>
@@ -154,11 +154,11 @@ export function PluginDirectory({
                 Nx Version
                 {modifiers.orderBy === 'nxVersion' &&
                 modifiers.orderDirection === 'DESC' ? (
-                  <ArrowLongUpIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongUpIcon>
+                  <ArrowLongUpIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongUpIcon>
                 ) : null}
                 {modifiers.orderBy === 'nxVersion' &&
                 modifiers.orderDirection === 'ASC' ? (
-                  <ArrowLongDownIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongDownIcon>
+                  <ArrowLongDownIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongDownIcon>
                 ) : null}
               </button>
             </div>
diff --git a/nx-dev/ui-conference/src/lib/components/code-of-conduct.tsx b/nx-dev/ui-conference/src/lib/components/code-of-conduct.tsx
index 36ff30681ec74..22d25b82618ca 100644
--- a/nx-dev/ui-conference/src/lib/components/code-of-conduct.tsx
+++ b/nx-dev/ui-conference/src/lib/components/code-of-conduct.tsx
@@ -1,6 +1,6 @@
 export function CodeOfConduct(): JSX.Element {
   return (
-    <div className="border-t border-b border-slate-200 dark:border-slate-700">
+    <div className="border-b border-t border-slate-200 dark:border-slate-700">
       <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
         <article className="grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
           <div className="px-5 py-12 md:pr-12">
@@ -27,7 +27,7 @@ export function CodeOfConduct(): JSX.Element {
           <div className="divide-y divide-slate-200 py-12 dark:divide-slate-700">
             <div className="px-5 py-12 md:pl-12">
               <a
-                className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
+                className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
                 href="https://docs.google.com/document/d/1biFWD08Wrd99gRZNv4Q1tawEYGZEI3bd3J55E5uG2ZU/edit?usp=sharing"
               >
                 <span className="group-hover:underline">
diff --git a/nx-dev/ui-conference/src/lib/components/schedule.tsx b/nx-dev/ui-conference/src/lib/components/schedule.tsx
index 4455776e6d6cd..edb6bc671b802 100644
--- a/nx-dev/ui-conference/src/lib/components/schedule.tsx
+++ b/nx-dev/ui-conference/src/lib/components/schedule.tsx
@@ -11,13 +11,13 @@ export const scheduleRow = (item: ScheduleItem): JSX.Element => (
   <div key={item.title + item.time} className="w-full">
     <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
       <article className="grid w-full grid-cols-1 md:grid-cols-5 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
-        <div className="font-input-mono px-5 pt-12 pb-8 md:py-12">
+        <div className="font-input-mono px-5 pb-8 pt-12 md:py-12">
           <span className="hidden md:block">{item.time}</span>
-          <span className="mb-4 rounded-md py-4 px-6 md:hidden">
+          <span className="mb-4 rounded-md px-6 py-4 md:hidden">
             {item.time}
           </span>
         </div>
-        <div className="font-input-mono col-span-2 px-5 md:py-12 md:px-8">
+        <div className="font-input-mono col-span-2 px-5 md:px-8 md:py-12">
           {item.videoUrl ? (
             <h3 className="mb-4 underline">
               <a href={item.videoUrl} target="_blank" rel="noreferrer">
@@ -29,7 +29,7 @@ export const scheduleRow = (item: ScheduleItem): JSX.Element => (
           )}
           <div className="text-sm">{item.speakers.join(' & ')}</div>
         </div>
-        <p className="col-span-2 px-5 pt-8 pb-12 md:py-12 md:px-8">
+        <p className="col-span-2 px-5 pb-12 pt-8 md:px-8 md:py-12">
           {item.description}
         </p>
       </article>
@@ -40,13 +40,13 @@ export const breakRow = (item: ScheduleItem): JSX.Element => (
   <div key={item.title + item.time} className="w-full">
     <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
       <div className="grid w-full grid-cols-1 md:grid-cols-5">
-        <div className="font-input-mono px-5 pt-12 pb-8 md:py-12">
+        <div className="font-input-mono px-5 pb-8 pt-12 md:py-12">
           <span className="hidden md:block">{item.time}</span>
-          <span className="mb-4 rounded-md py-4 px-6 md:hidden">
+          <span className="mb-4 rounded-md px-6 py-4 md:hidden">
             {item.time}
           </span>
         </div>
-        <div className="px-5 pb-12 md:col-span-4 md:border-l md:border-slate-200 md:py-12 md:px-8 md:dark:border-slate-700">
+        <div className="px-5 pb-12 md:col-span-4 md:border-l md:border-slate-200 md:px-8 md:py-12 md:dark:border-slate-700">
           {item.videoUrl ? (
             <h3 className="font-input-mono underline">
               <a href={item.videoUrl} target="_blank" rel="noreferrer">
diff --git a/nx-dev/ui-conference/src/lib/components/speakers.tsx b/nx-dev/ui-conference/src/lib/components/speakers.tsx
index 9a34543873bb3..3d2e1e6047cea 100644
--- a/nx-dev/ui-conference/src/lib/components/speakers.tsx
+++ b/nx-dev/ui-conference/src/lib/components/speakers.tsx
@@ -21,7 +21,7 @@ export function Speakers(speakers: Array<Member>) {
               {row.map((speaker) => (
                 <div
                   key={speaker.name}
-                  className="border-slate-200 py-8 odd:border-b dark:border-slate-700 md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
+                  className="border-slate-200 py-8 odd:border-b md:odd:border-b-0 md:odd:border-r md:odd:pr-12 md:even:pl-12 dark:border-slate-700"
                 >
                   <div className="px-5">
                     <MemberCard
diff --git a/nx-dev/ui-conference/src/lib/conf-location.tsx b/nx-dev/ui-conference/src/lib/conf-location.tsx
index 34697bc828b05..ad66b16d4be1d 100644
--- a/nx-dev/ui-conference/src/lib/conf-location.tsx
+++ b/nx-dev/ui-conference/src/lib/conf-location.tsx
@@ -1,6 +1,6 @@
 export function ConfLocation(): JSX.Element {
   return (
-    <div className="border-t border-b border-slate-200 dark:border-slate-700">
+    <div className="border-b border-t border-slate-200 dark:border-slate-700">
       <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
         <article className="grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
           <div className="px-5 py-12 md:pr-12">
diff --git a/nx-dev/ui-conference/src/lib/conf-schedule-short.tsx b/nx-dev/ui-conference/src/lib/conf-schedule-short.tsx
index 7f0dd83a2730e..a656b9e7e464c 100644
--- a/nx-dev/ui-conference/src/lib/conf-schedule-short.tsx
+++ b/nx-dev/ui-conference/src/lib/conf-schedule-short.tsx
@@ -184,7 +184,7 @@ export function ConfScheduleShort(): JSX.Element {
           </div>
         </div>
       </div>
-      <section className="w-full divide-y divide-slate-200 border-t border-b border-slate-200 dark:divide-slate-700 dark:border-slate-700">
+      <section className="w-full divide-y divide-slate-200 border-b border-t border-slate-200 dark:divide-slate-700 dark:border-slate-700">
         <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
           <article className="md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
             <div className="px-5 py-12 md:pr-12">
diff --git a/nx-dev/ui-conference/src/lib/conf-sponsors.tsx b/nx-dev/ui-conference/src/lib/conf-sponsors.tsx
index 841bdbd048158..0b35bf03af45e 100644
--- a/nx-dev/ui-conference/src/lib/conf-sponsors.tsx
+++ b/nx-dev/ui-conference/src/lib/conf-sponsors.tsx
@@ -107,7 +107,7 @@ export function ConfSponsors(): JSX.Element {
                   {row.map((speaker) => (
                     <div
                       key={speaker.name}
-                      className="border-slate-600 py-8 odd:border-b md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
+                      className="border-slate-600 py-8 odd:border-b md:odd:border-b-0 md:odd:border-r md:odd:pr-12 md:even:pl-12"
                     >
                       <div className="h-full px-5">
                         <SponsorCard
diff --git a/nx-dev/ui-conference/src/lib/conf-workshop.tsx b/nx-dev/ui-conference/src/lib/conf-workshop.tsx
index 980a8a8a6f551..12cdbd93cb53f 100644
--- a/nx-dev/ui-conference/src/lib/conf-workshop.tsx
+++ b/nx-dev/ui-conference/src/lib/conf-workshop.tsx
@@ -1,13 +1,13 @@
 export function ConfWorkshop(): JSX.Element {
   return (
-    <div className="border-t border-b border-slate-200 dark:border-slate-700">
+    <div className="border-b border-t border-slate-200 dark:border-slate-700">
       <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
         <article className="grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
           <div className="px-5 py-12 md:pr-12">
             <div className="font-input-mono text-slate-700 dark:text-slate-300">
               Day 1 - Sunday, Oct. 16 | Day 2 - Tuesday, Oct. 18
             </div>
-            <h2 className="font-input-mono pt-8 pb-2 text-2xl">
+            <h2 className="font-input-mono pb-2 pt-8 text-2xl">
               Learn from the Creators of Nx, First Hand!
             </h2>
             <p className="text-md mb-8">
@@ -22,7 +22,7 @@ export function ConfWorkshop(): JSX.Element {
               monorepo that not just works initially but scales with your team
               and organization.
             </p>
-            <h4 className="font-input-mono mt-8 mb-4 text-lg">
+            <h4 className="font-input-mono mb-4 mt-8 text-lg">
               $800 All-Inclusive / $400 Day 2 only
             </h4>
             <p className="mb-4">
@@ -152,7 +152,7 @@ export function ConfWorkshop(): JSX.Element {
             </div>*/}
             <div className="px-5 py-12 md:pl-12">
               <a
-                className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
+                className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
                 href="https://ti.to/nx-conf/nx-conf-2022?utm_source=nxdev"
               >
                 <span className="group-hover:underline">Save your ticket!</span>
diff --git a/nx-dev/ui-conference/src/lib/launch-week/agenda.tsx b/nx-dev/ui-conference/src/lib/launch-week/agenda.tsx
index 62dc02226625e..e204112a18e15 100644
--- a/nx-dev/ui-conference/src/lib/launch-week/agenda.tsx
+++ b/nx-dev/ui-conference/src/lib/launch-week/agenda.tsx
@@ -70,7 +70,7 @@ export function LaunchWeekAgenda(): JSX.Element {
 
   return (
     <div className="border-t border-slate-200 dark:border-slate-700">
-      <section className="w-full divide-y divide-slate-200 border-t border-b border-slate-200 dark:divide-slate-700 dark:border-slate-700">
+      <section className="w-full divide-y divide-slate-200 border-b border-t border-slate-200 dark:divide-slate-700 dark:border-slate-700">
         <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
           <article className="md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
             <div className="px-5 py-12 md:pr-12">
@@ -82,7 +82,7 @@ export function LaunchWeekAgenda(): JSX.Element {
                 rel="noreferrer"
                 target="_blank"
                 href="https://youtu.be/fy0K2Smyj5A"
-                className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
+                className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
               >
                 <span className="group-hover:underline">
                   Watch the conference recording
@@ -128,7 +128,7 @@ const launchWeekScheduleRow = (item: ScheduleItem): JSX.Element => (
       <article className="grid w-full grid-cols-1 md:grid-cols-5 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
         <div className="font-input-mono flex items-center px-5 py-6">
           <span className="hidden md:block">{item.time}</span>
-          <span className="mb-4 rounded-md py-4 px-6 md:hidden">
+          <span className="mb-4 rounded-md px-6 py-4 md:hidden">
             {item.time}
           </span>
         </div>
diff --git a/nx-dev/ui-conference/src/lib/launch-week/announcements.tsx b/nx-dev/ui-conference/src/lib/launch-week/announcements.tsx
index 431d50f4297c3..be7f7b2362912 100644
--- a/nx-dev/ui-conference/src/lib/launch-week/announcements.tsx
+++ b/nx-dev/ui-conference/src/lib/launch-week/announcements.tsx
@@ -41,7 +41,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     This is what Nx Project Crystal is all about.
                   </p>
                 </div>
-                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -110,7 +110,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     powerful monorepo capabilities.
                   </p>
                 </div>
-                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -175,7 +175,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     maintaining CI/CD infrastructure.
                   </p>
                 </div>
-                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -237,7 +237,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     and optimize your codebase and pipelines.
                   </p>
                 </div>
-                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -295,7 +295,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     chime in for our live-stream!
                   </p>
                 </div>
-                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
                   <ButtonLink
                     variant="primary"
                     size="default"
diff --git a/nx-dev/ui-conference/src/lib/launch-week/community-partners.tsx b/nx-dev/ui-conference/src/lib/launch-week/community-partners.tsx
index 43111fbc9b782..d6d13cf2c7ee2 100644
--- a/nx-dev/ui-conference/src/lib/launch-week/community-partners.tsx
+++ b/nx-dev/ui-conference/src/lib/launch-week/community-partners.tsx
@@ -59,11 +59,11 @@ export function LaunchNxCommunityPartners(): JSX.Element {
   return (
     <div className="border-t border-slate-200 dark:border-slate-700">
       <div className="mx-auto max-w-7xl py-6">
-        <div className="mx-auto mt-10 px-6 grid max-w-lg grid-cols-1 items-center gap-8 sm:max-w-xl md:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+        <div className="mx-auto mt-10 grid max-w-lg grid-cols-1 items-center gap-8 px-6 sm:max-w-xl md:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
           {partners.map((partner) => (
             <a
               key={partner.name}
-              className="flex justify-center w-full h-full bg-white p-8 rounded-lg"
+              className="flex h-full w-full justify-center rounded-lg bg-white p-8"
               href={partner.linkTarget}
             >
               <img
diff --git a/nx-dev/ui-conference/src/lib/launch-week/intro.tsx b/nx-dev/ui-conference/src/lib/launch-week/intro.tsx
index 971fe64fb11f5..d0baa37002c0a 100644
--- a/nx-dev/ui-conference/src/lib/launch-week/intro.tsx
+++ b/nx-dev/ui-conference/src/lib/launch-week/intro.tsx
@@ -24,9 +24,9 @@ export function LaunchNxIntro() {
             />
           </svg>
         </div>
-        <div className="mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pl-16 lg:pb-0">
+        <div className="mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pb-0 lg:pl-16">
           <h2>
-            <div className="font-input-mono mb-4 inline-block rounded-lg border border-slate-200 bg-white/40 p-4 py-4 px-6 text-xl text-sm font-extrabold leading-none tracking-tight shadow-sm transition hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800 sm:text-2xl lg:text-2xl">
+            <div className="font-input-mono mb-4 inline-block rounded-lg border border-slate-200 bg-white/40 p-4 px-6 py-4 text-sm text-xl font-extrabold leading-none tracking-tight shadow-sm transition hover:bg-white sm:text-2xl lg:text-2xl dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
               <span className="sr-only">Announcing Launch Nx on </span> February
               5-9, 2024
             </div>
@@ -49,7 +49,7 @@ export function LaunchNxIntro() {
 
           <a
             href="#conf"
-            className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
+            className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
           >
             <span className="group-hover:underline">Watch the talks</span>
             <svg
@@ -72,7 +72,7 @@ export function LaunchNxIntro() {
             rel="noreferrer"
             target="_blank"
             href="https://youtu.be/fy0K2Smyj5A"
-            className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
+            className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
           >
             <span className="group-hover:underline">
               Watch the full conference recording
diff --git a/nx-dev/ui-fence/src/lib/fence.tsx b/nx-dev/ui-fence/src/lib/fence.tsx
index 3617ab7183dbe..eab8aa20b8122 100644
--- a/nx-dev/ui-fence/src/lib/fence.tsx
+++ b/nx-dev/ui-fence/src/lib/fence.tsx
@@ -160,7 +160,7 @@ export function Fence({
   return (
     <div className="code-block group relative w-full">
       <div>
-        <div className="absolute top-0 right-0 z-10 flex">
+        <div className="absolute right-0 top-0 z-10 flex">
           {enableCopy && enableCopy === true && (
             <CopyToClipboard
               text={command && command !== '' ? command : children}
diff --git a/nx-dev/ui-fence/src/lib/selector.tsx b/nx-dev/ui-fence/src/lib/selector.tsx
index ad1b0600820b6..625dee13c781e 100644
--- a/nx-dev/ui-fence/src/lib/selector.tsx
+++ b/nx-dev/ui-fence/src/lib/selector.tsx
@@ -22,7 +22,7 @@ export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
             <div className="relative">
               <Listbox.Button
                 className={
-                  'relative w-full cursor-pointer border border-slate-200 dark:border-slate-700 py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm' +
+                  'relative w-full cursor-pointer border border-slate-200 py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm dark:border-slate-700' +
                   (props.className ? ` ${props.className}` : '')
                 }
               >
@@ -51,13 +51,13 @@ export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
               >
                 <Listbox.Options
                   static
-                  className="absolute z-10 mt-1 pl-0 max-h-60 w-full overflow-auto rounded-sm py-1 text-base shadow-md focus:outline-none sm:text-sm bg-white dark:bg-slate-800/60 dark:focus-within:ring-sky-500"
+                  className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-sm bg-white py-1 pl-0 text-base shadow-md focus:outline-none sm:text-sm dark:bg-slate-800/60 dark:focus-within:ring-sky-500"
                 >
                   {props.items.map((item, personIdx) => (
                     <Listbox.Option
                       key={personIdx}
                       className={({ active }) =>
-                        `relative list-none cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 select-none py-2 px-3`
+                        `relative cursor-pointer select-none list-none px-3 py-2 hover:bg-slate-50 dark:hover:bg-slate-800`
                       }
                       value={item}
                     >
diff --git a/nx-dev/ui-home/src/lib/extensible-and-integrated.tsx b/nx-dev/ui-home/src/lib/extensible-and-integrated.tsx
index adf304350d972..84c674c633fd1 100644
--- a/nx-dev/ui-home/src/lib/extensible-and-integrated.tsx
+++ b/nx-dev/ui-home/src/lib/extensible-and-integrated.tsx
@@ -10,7 +10,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
       id="extensible-and-integrated"
       className="overflow-hidden bg-slate-50 pt-28 dark:bg-slate-800/40"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
         <header className="max-w-2xl">
           <SectionHeading
             as="h1"
@@ -80,7 +80,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
           </p>
         </div>
       </div>
-      <div className="relative mx-auto max-w-7xl px-4 pt-6 pb-12 sm:px-6 lg:px-8 lg:pb-4 lg:pt-6">
+      <div className="relative mx-auto max-w-7xl px-4 pb-12 pt-6 sm:px-6 lg:px-8 lg:pb-4 lg:pt-6">
         <Tab.Group>
           <Tab.List>
             <div className="flex justify-between space-x-4 md:justify-start">
diff --git a/nx-dev/ui-home/src/lib/extensible-and-integrated/github-intergration-tab.tsx b/nx-dev/ui-home/src/lib/extensible-and-integrated/github-intergration-tab.tsx
index a6d43d97a71f5..cfbb9409503c7 100644
--- a/nx-dev/ui-home/src/lib/extensible-and-integrated/github-intergration-tab.tsx
+++ b/nx-dev/ui-home/src/lib/extensible-and-integrated/github-intergration-tab.tsx
@@ -45,11 +45,11 @@ export function GitHubIntegrationTab(): JSX.Element {
         </div>
         {/*HORIZONTAL LINK*/}
         <div className="absolute right-0 hidden w-48 translate-x-full translate-y-12 items-center md:flex">
-          <span className="absolute top-0 left-0 -mt-1 -ml-1 flex h-2 w-2">
+          <span className="absolute left-0 top-0 -ml-1 -mt-1 flex h-2 w-2">
             <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
             <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
           </span>
-          <span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-2 w-2">
+          <span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-2 w-2">
             <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
             <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
           </span>
@@ -132,11 +132,11 @@ export function GitHubIntegrationTab(): JSX.Element {
         </div>
         {/*HORIZONTAL LINK*/}
         <div className="absolute bottom-80 right-0 hidden w-24 translate-x-full translate-y-12 items-center md:flex">
-          <span className="absolute top-0 left-0 -mt-1 -ml-1 flex h-2 w-2">
+          <span className="absolute left-0 top-0 -ml-1 -mt-1 flex h-2 w-2">
             <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
             <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
           </span>
-          <span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-2 w-2">
+          <span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-2 w-2">
             <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
             <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
           </span>
@@ -148,7 +148,7 @@ export function GitHubIntegrationTab(): JSX.Element {
         aria-hidden="true"
         className="relative hidden px-4 pr-6 md:flex lg:col-span-2 lg:h-full lg:px-0"
       >
-        <div className="absolute -top-28 left-36 mx-auto h-[510px] w-full w-auto max-w-none overflow-hidden rounded-xl border border-slate-200 shadow-xl dark:border-slate-700">
+        <div className="absolute -top-28 left-36 mx-auto h-[510px] w-auto w-full max-w-none overflow-hidden rounded-xl border border-slate-200 shadow-xl dark:border-slate-700">
           <Image
             src="/images/nx-cloud.webp"
             alt="Nx Cloud app"
@@ -157,7 +157,7 @@ export function GitHubIntegrationTab(): JSX.Element {
             height={510}
           />
         </div>
-        <div className="absolute left-12 -bottom-2 mx-auto flex w-full w-auto max-w-none overflow-hidden rounded-xl border border-slate-200 shadow-xl">
+        <div className="absolute -bottom-2 left-12 mx-auto flex w-auto w-full max-w-none overflow-hidden rounded-xl border border-slate-200 shadow-xl">
           <Image
             src="/images/github-nxcloud.webp"
             alt="Nx Cloud GitHub app"
diff --git a/nx-dev/ui-home/src/lib/extensible-and-integrated/graph-tab.tsx b/nx-dev/ui-home/src/lib/extensible-and-integrated/graph-tab.tsx
index 643fea27146a0..64a20060ecc36 100644
--- a/nx-dev/ui-home/src/lib/extensible-and-integrated/graph-tab.tsx
+++ b/nx-dev/ui-home/src/lib/extensible-and-integrated/graph-tab.tsx
@@ -39,17 +39,17 @@ export function GraphTab(): JSX.Element {
         </div>
       </div>
       <div className="relative -top-5 mr-0.5 hidden grow items-center lg:flex">
-        <span className="absolute top-0 left-0 -mt-1 -ml-1 flex h-2 w-2">
+        <span className="absolute left-0 top-0 -ml-1 -mt-1 flex h-2 w-2">
           <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
           <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
         </span>
-        <span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-2 w-2">
+        <span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-2 w-2">
           <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
           <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
         </span>
         <div className="-m-0.5 h-0.5 w-full bg-slate-200 dark:bg-slate-700" />
       </div>
-      <div className="z-10 h-auto overflow-hidden rounded-lg border border-slate-200 shadow dark:border-slate-700 lg:min-h-[485px] lg:w-[690px]">
+      <div className="z-10 h-auto overflow-hidden rounded-lg border border-slate-200 shadow lg:min-h-[485px] lg:w-[690px] dark:border-slate-700">
         <div className="flex h-7 w-full items-center justify-start space-x-1.5 bg-slate-200 px-3 dark:bg-slate-700">
           <span className="h-2 w-2 rounded-full bg-red-400"></span>
           <span className="h-2 w-2 rounded-full bg-yellow-400"></span>
diff --git a/nx-dev/ui-home/src/lib/extensible-and-integrated/ide-integration-tab.tsx b/nx-dev/ui-home/src/lib/extensible-and-integrated/ide-integration-tab.tsx
index 913ec43ff23da..b6baa3e0715c6 100644
--- a/nx-dev/ui-home/src/lib/extensible-and-integrated/ide-integration-tab.tsx
+++ b/nx-dev/ui-home/src/lib/extensible-and-integrated/ide-integration-tab.tsx
@@ -46,7 +46,7 @@ export function IdeIntegrationTab(): JSX.Element {
       className="wrapper my-8 grid h-full items-center gap-16 md:grid-cols-2 lg:grid-cols-3"
     >
       <div className="lg:col-span-2">
-        <div className="w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow-lg shadow dark:hidden dark:border-slate-700">
+        <div className="w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow shadow-lg dark:hidden dark:border-slate-700">
           <Image
             src="/images/nx-console/vscode-light.webp"
             alt="Nx Console app screenshot"
@@ -55,7 +55,7 @@ export function IdeIntegrationTab(): JSX.Element {
             height={800}
           />
         </div>
-        <div className="hidden w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow-lg shadow dark:block dark:border-slate-700">
+        <div className="hidden w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow shadow-lg dark:block dark:border-slate-700">
           <Image
             src="/images/nx-console/vscode-dark.webp"
             alt="Nx Console app screenshot"
@@ -69,7 +69,7 @@ export function IdeIntegrationTab(): JSX.Element {
         {features.map((feature) => (
           <div
             key={feature.name}
-            className="group relative rounded-lg px-4 py-2 transition hover:bg-slate-100 dark:hover:bg-slate-800/40 sm:flex"
+            className="group relative rounded-lg px-4 py-2 transition hover:bg-slate-100 sm:flex dark:hover:bg-slate-800/40"
           >
             <div
               className={cx(
@@ -77,11 +77,11 @@ export function IdeIntegrationTab(): JSX.Element {
                 feature.connectionWidth
               )}
             >
-              <span className="absolute top-0 left-0 -mt-1 -ml-1 flex h-2 w-2">
+              <span className="absolute left-0 top-0 -ml-1 -mt-1 flex h-2 w-2">
                 <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 transition dark:bg-sky-500" />
                 <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 transition group-hover:bg-blue-600 group-hover:bg-sky-600 dark:bg-slate-700" />
               </span>
-              <span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-2 w-2">
+              <span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-2 w-2">
                 <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 transition dark:bg-sky-500" />
                 <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 transition group-hover:bg-blue-600 group-hover:bg-sky-600 dark:bg-slate-700" />
               </span>
@@ -90,7 +90,7 @@ export function IdeIntegrationTab(): JSX.Element {
             <div className="sm:flex-shrink-0">
               <div className="flow-root">{feature.icon}</div>
             </div>
-            <div className="mt-3 sm:mt-0 sm:ml-3">
+            <div className="mt-3 sm:ml-3 sm:mt-0">
               <h3 className="text-sm font-medium">{feature.name}</h3>
               <Link href={feature.link}>
                 <span className="absolute inset-0" aria-hidden="true" />
diff --git a/nx-dev/ui-home/src/lib/getting-started.tsx b/nx-dev/ui-home/src/lib/getting-started.tsx
index 614c359c81c1b..579f706c839d5 100644
--- a/nx-dev/ui-home/src/lib/getting-started.tsx
+++ b/nx-dev/ui-home/src/lib/getting-started.tsx
@@ -4,9 +4,9 @@ export function GettingStarted(): JSX.Element {
   return (
     <article
       id="getting-started"
-      className="border-t border-b border-slate-200 bg-gradient-to-r from-cyan-500 to-blue-500 shadow-inner dark:border-slate-700"
+      className="border-b border-t border-slate-200 bg-gradient-to-r from-cyan-500 to-blue-500 shadow-inner dark:border-slate-700"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-24 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:px-8 lg:py-24">
         <div>
           <h2 className="text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
             <span className="block">Ready to dive in?</span>
diff --git a/nx-dev/ui-home/src/lib/hero.tsx b/nx-dev/ui-home/src/lib/hero.tsx
index 20f1d63199583..ea7f11627ad20 100644
--- a/nx-dev/ui-home/src/lib/hero.tsx
+++ b/nx-dev/ui-home/src/lib/hero.tsx
@@ -41,7 +41,7 @@ export function Hero(): JSX.Element {
         </div>
         <div className="text-center">
           <h1
-            className="text-3xl font-bold leading-none tracking-tight text-black dark:text-white sm:mt-6 sm:text-5xl md:text-6xl"
+            className="text-3xl font-bold leading-none tracking-tight text-black sm:mt-6 sm:text-5xl md:text-6xl dark:text-white"
             data-cy="primary-heading"
           >
             <span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">
diff --git a/nx-dev/ui-home/src/lib/improve-worst-ci-case.tsx b/nx-dev/ui-home/src/lib/improve-worst-ci-case.tsx
index ec8f6d599a387..4f596cd0dc4ce 100644
--- a/nx-dev/ui-home/src/lib/improve-worst-ci-case.tsx
+++ b/nx-dev/ui-home/src/lib/improve-worst-ci-case.tsx
@@ -4,9 +4,9 @@ export function ImproveWorstCiCase(): JSX.Element {
   return (
     <article
       id="getting-started"
-      className="border-t border-b border-slate-200 bg-gradient-to-r from-cyan-500 to-blue-500 shadow-inner dark:border-slate-700"
+      className="border-b border-t border-slate-200 bg-gradient-to-r from-cyan-500 to-blue-500 shadow-inner dark:border-slate-700"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-24 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:px-8 lg:py-24">
         <div>
           <h2 className="text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
             <span className="block">Taste the performance,</span>
diff --git a/nx-dev/ui-home/src/lib/migrate.tsx b/nx-dev/ui-home/src/lib/migrate.tsx
index 526c184b7d471..f017083f644da 100644
--- a/nx-dev/ui-home/src/lib/migrate.tsx
+++ b/nx-dev/ui-home/src/lib/migrate.tsx
@@ -6,7 +6,7 @@ export function Migrate(): JSX.Element {
       id="getting-started"
       className="bg-gradient-to-r from-pink-500 to-fuchsia-500"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-24 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:px-8 lg:py-24">
         <div>
           <h2 className="text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
             <span className="block">Already have a monorepo?</span>
diff --git a/nx-dev/ui-home/src/lib/migrations-and-code-generation.tsx b/nx-dev/ui-home/src/lib/migrations-and-code-generation.tsx
index 7128bd4dceae8..dfd99c0cfa534 100644
--- a/nx-dev/ui-home/src/lib/migrations-and-code-generation.tsx
+++ b/nx-dev/ui-home/src/lib/migrations-and-code-generation.tsx
@@ -7,7 +7,7 @@ export function MigrationsAndCodeGeneration(): JSX.Element {
       id="affected-and-code-generation"
       className="relative overflow-hidden bg-slate-50 py-28 dark:bg-slate-800/40"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:py-16 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:px-8 lg:py-16">
         <div>
           <header>
             <SectionHeading as="h1" variant="title" id="evergreen-setup">
diff --git a/nx-dev/ui-home/src/lib/monorepo-styles.tsx b/nx-dev/ui-home/src/lib/monorepo-styles.tsx
index b74b7749d320d..2ce592b1294f3 100644
--- a/nx-dev/ui-home/src/lib/monorepo-styles.tsx
+++ b/nx-dev/ui-home/src/lib/monorepo-styles.tsx
@@ -7,7 +7,7 @@ export function MonorepoStyles(): JSX.Element {
       id="monorepo-styles"
       className="relative overflow-hidden bg-slate-50 pt-28 dark:bg-slate-800/40"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:py-16 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:px-8 lg:py-16">
         <div>
           <header>
             <SectionHeading as="h1" variant="title" id="monorepo-styles">
diff --git a/nx-dev/ui-home/src/lib/nx-statistics.tsx b/nx-dev/ui-home/src/lib/nx-statistics.tsx
index c8bc117cba2b1..1d74dd3327792 100644
--- a/nx-dev/ui-home/src/lib/nx-statistics.tsx
+++ b/nx-dev/ui-home/src/lib/nx-statistics.tsx
@@ -3,13 +3,13 @@ import { LogoCloud } from './logo-cloud';
 
 export function NxStatistics(): JSX.Element {
   return (
-    <div className="bg-white pt-12 dark:bg-slate-900 sm:pt-28">
+    <div className="bg-white pt-12 sm:pt-28 dark:bg-slate-900">
       <div className="mx-auto max-w-7xl px-4 pt-12 sm:px-6 lg:px-8">
         <div className="mx-auto max-w-4xl text-center">
           <SectionHeading as="h2" variant="display" id="trusted-by-all">
             Trusted by developers, enterprises and open-source projects.
           </SectionHeading>
-          <p className="sr-only mt-3 text-lg text-slate-700 dark:text-slate-400 sm:mt-4">
+          <p className="sr-only mt-3 text-lg text-slate-700 sm:mt-4 dark:text-slate-400">
             Whether your workspace{' '}
             <span className="font-semibold">
               has a single project or a thousand
@@ -21,13 +21,13 @@ export function NxStatistics(): JSX.Element {
       {/*LOGO CLOUD*/}
       <LogoCloud />
       {/*STATISTICS*/}
-      <div className="mt-10 bg-slate-50 pb-12 dark:bg-slate-800/40 sm:pb-16">
+      <div className="mt-10 bg-slate-50 pb-12 sm:pb-16 dark:bg-slate-800/40">
         <div className="relative">
           <div className="absolute inset-0 h-1/2 border-b border-slate-200 bg-white dark:border-black dark:bg-slate-900"></div>
           <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="mx-auto max-w-4xl">
-              <dl className="overflow-hidden rounded-lg bg-white shadow dark:bg-slate-900 sm:grid sm:grid-cols-3">
-                <div className="flex flex-col border-b border-slate-50 p-6 text-center dark:border-slate-800/40 sm:border-0 sm:border-r">
+              <dl className="overflow-hidden rounded-lg bg-white shadow sm:grid sm:grid-cols-3 dark:bg-slate-900">
+                <div className="flex flex-col border-b border-slate-50 p-6 text-center sm:border-0 sm:border-r dark:border-slate-800/40">
                   <dt className="order-2 mt-2 text-base font-medium leading-6">
                     developers use it every day
                   </dt>
@@ -35,7 +35,7 @@ export function NxStatistics(): JSX.Element {
                     2M+
                   </dd>
                 </div>
-                <div className="flex flex-col border-t border-b border-slate-50 p-6 text-center dark:border-slate-800/40 sm:border-0 sm:border-l sm:border-r">
+                <div className="flex flex-col border-b border-t border-slate-50 p-6 text-center sm:border-0 sm:border-l sm:border-r dark:border-slate-800/40">
                   <dt className="order-2 mt-2 text-base font-medium leading-6">
                     of Fortune 500 companies use Nx for key projects
                   </dt>
@@ -43,7 +43,7 @@ export function NxStatistics(): JSX.Element {
                     50%
                   </dd>
                 </div>
-                <div className="flex flex-col border-t border-slate-50 p-6 text-center dark:border-slate-800/40 sm:border-0 sm:border-l">
+                <div className="flex flex-col border-t border-slate-50 p-6 text-center sm:border-0 sm:border-l dark:border-slate-800/40">
                   <dt className="order-2 mt-2 text-base font-medium leading-6">
                     monthly npm downloads
                   </dt>
diff --git a/nx-dev/ui-home/src/lib/nx-with-ci.tsx b/nx-dev/ui-home/src/lib/nx-with-ci.tsx
index a376241708d67..46dee7742389f 100644
--- a/nx-dev/ui-home/src/lib/nx-with-ci.tsx
+++ b/nx-dev/ui-home/src/lib/nx-with-ci.tsx
@@ -99,7 +99,7 @@ export function NxWithCi(): JSX.Element {
                   whileInView="end"
                   variants={ciBar}
                   viewport={{ once: true }}
-                  className="flex-grow items-center justify-end rounded-r-lg bg-slate-200 py-2 px-4 text-slate-600 dark:bg-slate-700 dark:text-slate-400"
+                  className="flex-grow items-center justify-end rounded-r-lg bg-slate-200 px-4 py-2 text-slate-600 dark:bg-slate-700 dark:text-slate-400"
                 >
                   <Counter value={90}></Counter>
                   <span className="ml-1">minutes</span>
diff --git a/nx-dev/ui-home/src/lib/testimonials.tsx b/nx-dev/ui-home/src/lib/testimonials.tsx
index 99bb547789637..1bcf85d3e02e3 100644
--- a/nx-dev/ui-home/src/lib/testimonials.tsx
+++ b/nx-dev/ui-home/src/lib/testimonials.tsx
@@ -78,7 +78,7 @@ export function Testimonials(): JSX.Element {
       id="next-generation"
       className="relative bg-slate-50 pt-28 dark:bg-slate-800/40"
     >
-      <div className="mx-auto max-w-7xl items-stretch py-12 px-4 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:py-16 lg:px-8">
+      <div className="mx-auto max-w-7xl items-stretch px-4 py-12 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:px-8 lg:py-16">
         <div className="md:col-span-2">
           <header>
             <SectionHeading as="h1" variant="title" id="testimonials">
diff --git a/nx-dev/ui-home/src/lib/why-is-nx-fast.tsx b/nx-dev/ui-home/src/lib/why-is-nx-fast.tsx
index fe0b5cb66c53a..590e4d3e53654 100644
--- a/nx-dev/ui-home/src/lib/why-is-nx-fast.tsx
+++ b/nx-dev/ui-home/src/lib/why-is-nx-fast.tsx
@@ -4,12 +4,12 @@ export function WhyIsNxFast(): JSX.Element {
       id="why-is-nx-fast"
       className="relative bg-slate-50 pt-28 dark:bg-slate-800/40"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
         <header className="max-w-prose">
           <h1 className="text-lg font-semibold tracking-tight text-blue-500 dark:text-sky-500">
             Full monorepo support
           </h1>
-          <p className="mt-4 text-3xl font-semibold tracking-tight text-slate-900 dark:text-slate-100 sm:text-5xl">
+          <p className="mt-4 text-3xl font-semibold tracking-tight text-slate-900 sm:text-5xl dark:text-slate-100">
             How Nx makes your workspace performant
           </p>
         </header>
diff --git a/nx-dev/ui-markdoc/src/lib/nodes/heading.component.tsx b/nx-dev/ui-markdoc/src/lib/nodes/heading.component.tsx
index 2f0cc6b3224f6..7cf07a0354e3f 100644
--- a/nx-dev/ui-markdoc/src/lib/nodes/heading.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/nodes/heading.component.tsx
@@ -22,7 +22,7 @@ export function Heading({
     >
       {children}
       <Link aria-hidden="true" href={`#${id}`}>
-        <LinkIcon className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100" />
+        <LinkIcon className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100" />
       </Link>
     </Component>
   );
diff --git a/nx-dev/ui-markdoc/src/lib/tags/disclosure.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/disclosure.component.tsx
index de0bcdaded283..e77eecb9501bf 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/disclosure.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/disclosure.component.tsx
@@ -37,21 +37,21 @@ export function Disclosure({
   return (
     <span
       className={cx(
-        'my-6 block rounded-md flex-col ring-1 bg-slate-50 dark:bg-slate-800/40 ring-slate-100 dark:ring-slate-700',
+        'my-6 block flex-col rounded-md bg-slate-50 ring-1 ring-slate-100 dark:bg-slate-800/40 dark:ring-slate-700',
         ui.backgroundColor,
         ui.borderColor
       )}
     >
       <span
         onClick={() => setCollapsed(!collapsed)}
-        className="flex-shrink-0 cursor-pointer flex p-4"
+        className="flex flex-shrink-0 cursor-pointer p-4"
       >
         {collapsed ? ui.downIcon : ui.upIcon}
         <span className={cx('ml-3 block text-sm font-medium', ui.titleColor)}>
           {title}
         </span>
       </span>
-      <span className={cx('p-4 pl-12 pt-0 block', collapsed ? 'hidden' : '')}>
+      <span className={cx('block p-4 pl-12 pt-0', collapsed ? 'hidden' : '')}>
         <span className={cx('prose-sm block', ui.textColor)}>{children}</span>
       </span>
     </span>
diff --git a/nx-dev/ui-markdoc/src/lib/tags/github-repository.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/github-repository.component.tsx
index e5e2466242cf6..bf4a15a11bfb4 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/github-repository.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/github-repository.component.tsx
@@ -8,7 +8,7 @@ export function GithubRepository({
   title?: string;
 }): JSX.Element {
   return (
-    <div className="not-prose group relative my-12 mx-auto flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
+    <div className="not-prose group relative mx-auto my-12 flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
       <div className="absolute inset-0 z-0 w-2 bg-blue-500 transition-all duration-150 group-hover:w-full dark:bg-sky-500"></div>
       <div className="w-2 bg-blue-500 dark:bg-sky-500"></div>
 
diff --git a/nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx
index 128bf6995e150..dc7fb3cd1fde5 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx
@@ -92,7 +92,7 @@ export function Graph({
 
   return (
     <div className="my-6 w-full place-content-center overflow-hidden rounded-md ring-1 ring-slate-200 dark:ring-slate-700">
-      <div className="relative flex justify-center p-2 border-b border-slate-200 bg-slate-100/50 dark:border-slate-700 dark:bg-slate-700/50 font-bold">
+      <div className="relative flex justify-center border-b border-slate-200 bg-slate-100/50 p-2 font-bold dark:border-slate-700 dark:bg-slate-700/50">
         {title}
       </div>
       {type === 'project' ? (
diff --git a/nx-dev/ui-markdoc/src/lib/tags/pill.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/pill.component.tsx
index e971985192683..de294ded82114 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/pill.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/pill.component.tsx
@@ -9,7 +9,7 @@ export function Pill({
   children: ReactNode;
 }): JSX.Element {
   return (
-    <span className="group relative mr-2 mb-2 inline-flex rounded-md border border-slate-200 bg-slate-50/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
+    <span className="group relative mb-2 mr-2 inline-flex rounded-md border border-slate-200 bg-slate-50/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
       <span className="flex flex-col p-3">
         <Link
           href={url}
diff --git a/nx-dev/ui-markdoc/src/lib/tags/short-embed.tsx b/nx-dev/ui-markdoc/src/lib/tags/short-embed.tsx
index b697f7fb1ea36..de7dcb22f5729 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/short-embed.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/short-embed.tsx
@@ -83,7 +83,7 @@ export function ShortEmbeds({
     <ShortEmbedContext.Provider
       value={{ current: currentVideo, userInteraction }}
     >
-      <aside id="short-embed" className="fixed w-80 bottom-5 right-5 z-50">
+      <aside id="short-embed" className="fixed bottom-5 right-5 z-50 w-80">
         <Transition
           appear={true}
           show={isShowing}
@@ -94,23 +94,23 @@ export function ShortEmbeds({
           leaveFrom="opacity-100 translate-y-0"
           leaveTo="opacity-0 translate-y-full"
         >
-          <div className="relative mt-12 w-full h-full rounded-xl shadow-xl coding flex flex-col border border-slate-200 bg-slate-50 p-2 leading-normal text-slate-800 subpixel-antialiased dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
+          <div className="coding relative mt-12 flex h-full w-full flex-col rounded-xl border border-slate-200 bg-slate-50 p-2 leading-normal text-slate-800 subpixel-antialiased shadow-xl dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
             <Button
               size="small"
               variant="secondary"
               onClick={() => {
                 setTimeout(() => setIsShowing(false), 500);
               }}
-              className="absolute top-2 right-2"
+              className="absolute right-2 top-2"
               title="Close"
             >
-              <XMarkIcon className="w-4 h-4" />
+              <XMarkIcon className="h-4 w-4" />
             </Button>
-            <h3 className="text-center not-prose">Relevant Videos</h3>
-            <div className="grid grid-cols-1 gap-4 justify-items-center w-full">
+            <h3 className="not-prose text-center">Relevant Videos</h3>
+            <div className="grid w-full grid-cols-1 justify-items-center gap-4">
               {children}
               <div>
-                <div className="text-base font-medium pb-1">Continue with:</div>
+                <div className="pb-1 text-base font-medium">Continue with:</div>
                 <div className="flex flex-col gap-2">
                   {videoData
                     .filter(
@@ -127,7 +127,7 @@ export function ShortEmbeds({
                             setUserInteraction(true);
                             setCurrentVideo(config);
                           }}
-                          className="hover:cursor-pointer flex text-sm h-24 rounded-lg overflow-hidden border border-slate-200 bg-white/40 shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
+                          className="flex h-24 overflow-hidden rounded-lg border border-slate-200 bg-white/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:cursor-pointer hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
                         >
                           <div className="w-32 shrink-0">
                             <img
@@ -136,7 +136,7 @@ export function ShortEmbeds({
                               alt={`Another recommendation: ${config.title}`}
                             />
                           </div>
-                          <div className="p-2 shrink overflow-ellipsis h-full w-full grid grid-cols-1 content-center">
+                          <div className="grid h-full w-full shrink grid-cols-1 content-center overflow-ellipsis p-2">
                             {config.title}
                           </div>
                         </div>
@@ -160,7 +160,7 @@ export function ShortVideo({ embedUrl, title }: VideoData) {
   }
 
   return (
-    <div className="w-full h-96 rounded-lg overflow-hidden">
+    <div className="h-96 w-full overflow-hidden rounded-lg">
       <iframe
         className="!m-0 border-0"
         width="100%"
diff --git a/nx-dev/ui-markdoc/src/lib/tags/side-by-side.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/side-by-side.component.tsx
index 6440f8409e96d..941eefffc25cc 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/side-by-side.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/side-by-side.component.tsx
@@ -3,7 +3,7 @@ import { Children, ReactNode } from 'react';
 export function SideBySide({ children }: { children: ReactNode }) {
   const [first, ...rest] = Children.toArray(children);
   return (
-    <div className="not-prose grid items-center divide-x divide-solid divide-slate-50 dark:divide-slate-800 md:grid-cols-2">
+    <div className="not-prose grid items-center divide-x divide-solid divide-slate-50 md:grid-cols-2 dark:divide-slate-800">
       <div className="md:pr-6">{first}</div>
       <div className="md:pl-6">{rest}</div>
     </div>
diff --git a/nx-dev/ui-markdoc/src/lib/tags/stackblitz-button.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/stackblitz-button.component.tsx
index b1d60afb800e9..74c5e663e5652 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/stackblitz-button.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/stackblitz-button.component.tsx
@@ -10,7 +10,7 @@ export function StackblitzButton({
   const resolvedUrl = url.replace('https://', '');
 
   return (
-    <div className="not-prose group relative my-12 mx-auto flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
+    <div className="not-prose group relative mx-auto my-12 flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
       <div className="absolute inset-0 z-0 w-2 bg-blue-500 transition-all duration-150 group-hover:w-full dark:bg-sky-500"></div>
       <div className="w-2 bg-blue-500 dark:bg-sky-500"></div>
 
diff --git a/nx-dev/ui-markdoc/src/lib/tags/video-link.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/video-link.component.tsx
index abd51fd99cdcf..703d1d9a9864f 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/video-link.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/video-link.component.tsx
@@ -20,7 +20,7 @@ const youtubeIcon = (
     role="img"
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
-    className="w-6 h-6"
+    className="h-6 w-6"
   >
     <path d="M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14c-1.88-.5-9.38-.5-9.38-.5s-7.5 0-9.38.5A3.02 3.02 0 0 0 .5 6.19C0 8.07 0 12 0 12s0 3.93.5 5.81a3.02 3.02 0 0 0 2.12 2.14c1.87.5 9.38.5 9.38.5s7.5 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.81zM9.54 15.57V8.43L15.82 12l-6.28 3.57z" />
   </svg>
@@ -28,16 +28,16 @@ const youtubeIcon = (
 
 export function VideoLink({ text, link }: { text: string; link: string }) {
   return (
-    <div className="flex no-prose">
+    <div className="no-prose flex">
       <a
         href={link}
         target="_blank"
         rel="noopener noreferrer"
-        className="flex items-center no-underline space-x-2 border-transparent"
+        className="flex items-center space-x-2 border-transparent no-underline"
       >
-        <div className="flex items-center justify-between pl-2 pr-2 space-x-2 border rounded-md border-slate-200 py-1 pl-3 transition hover:border-slate-500 dark:border-slate-700/40 dark:hover:border-slate-700">
+        <div className="flex items-center justify-between space-x-2 rounded-md border border-slate-200 py-1 pl-2 pl-3 pr-2 transition hover:border-slate-500 dark:border-slate-700/40 dark:hover:border-slate-700">
           {youtubeIcon}
-          <span className="font-semibold text-md hover:text-slate-900 dark:hover:text-sky-400">
+          <span className="text-md font-semibold hover:text-slate-900 dark:hover:text-sky-400">
             {text || 'Jump to section in video'}
           </span>
         </div>
diff --git a/nx-dev/ui-markdoc/src/lib/tags/video-loop.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/video-loop.component.tsx
index c46d8dae6a19a..1d3b3e9d8fee4 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/video-loop.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/video-loop.component.tsx
@@ -43,8 +43,8 @@ export function VideoLoop({
   return (
     <video ref={videoRef} autoPlay muted loop>
       <source src={src} type="video/mp4" />
-      <div className="text-center p-4">
-        <p className="font-bold pb-3">
+      <div className="p-4 text-center">
+        <p className="pb-3 font-bold">
           Your browser does not support the video tag. Here is a description of
           the video:
         </p>
diff --git a/nx-dev/ui-theme/src/lib/theme-switcher.component.tsx b/nx-dev/ui-theme/src/lib/theme-switcher.component.tsx
index 56ffec357ba49..65b652d259083 100644
--- a/nx-dev/ui-theme/src/lib/theme-switcher.component.tsx
+++ b/nx-dev/ui-theme/src/lib/theme-switcher.component.tsx
@@ -67,7 +67,7 @@ export function ThemeSwitcher(): JSX.Element {
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Listbox.Options className="absolute top-full -right-10 z-50 mt-2 w-36 origin-top-right divide-y divide-slate-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none dark:divide-slate-800 dark:bg-slate-900 dark:ring-white/5">
+            <Listbox.Options className="absolute -right-10 top-full z-50 mt-2 w-36 origin-top-right divide-y divide-slate-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none dark:divide-slate-800 dark:bg-slate-900 dark:ring-white/5">
               {availableThemes.map((t) => (
                 <Listbox.Option key={t.value} value={t.value} as={Fragment}>
                   {({ active, selected }) => (
diff --git a/packages/create-nx-workspace/bin/types/bundler-list.ts b/packages/create-nx-workspace/bin/types/bundler-list.ts
index 6e241bd33974c..858b635f9f581 100644
--- a/packages/create-nx-workspace/bin/types/bundler-list.ts
+++ b/packages/create-nx-workspace/bin/types/bundler-list.ts
@@ -1,4 +1,4 @@
 // Bundler to be used to build the application
 export const bundlerList = ['webpack', 'vite', 'rspack'];
 
-export type Bundler = typeof bundlerList[number];
+export type Bundler = (typeof bundlerList)[number];
diff --git a/packages/create-nx-workspace/bin/types/framework-list.ts b/packages/create-nx-workspace/bin/types/framework-list.ts
index 1b66f3097e0f6..10a339602292e 100644
--- a/packages/create-nx-workspace/bin/types/framework-list.ts
+++ b/packages/create-nx-workspace/bin/types/framework-list.ts
@@ -1,4 +1,4 @@
 // Framework option to be used when the node-standalone preset is selected
 export const frameworkList = ['express', 'fastify', 'koa', 'nest'];
 
-export type Framework = typeof frameworkList[number];
+export type Framework = (typeof frameworkList)[number];
diff --git a/packages/create-nx-workspace/src/utils/nx/ab-testing.ts b/packages/create-nx-workspace/src/utils/nx/ab-testing.ts
index e9f0b5f2dca35..1de4cd0ae01a7 100644
--- a/packages/create-nx-workspace/src/utils/nx/ab-testing.ts
+++ b/packages/create-nx-workspace/src/utils/nx/ab-testing.ts
@@ -54,7 +54,7 @@ const messageOptions = {
 } as const;
 
 export type MessageKey = keyof typeof messageOptions;
-type MessageData = typeof messageOptions[MessageKey][number];
+type MessageData = (typeof messageOptions)[MessageKey][number];
 
 export class PromptMessages {
   private selectedMessages: { [key in MessageKey]?: number } = {};
diff --git a/packages/create-nx-workspace/src/utils/package-manager.ts b/packages/create-nx-workspace/src/utils/package-manager.ts
index cf4aecd118ff6..bb8394d26f6bb 100644
--- a/packages/create-nx-workspace/src/utils/package-manager.ts
+++ b/packages/create-nx-workspace/src/utils/package-manager.ts
@@ -9,7 +9,7 @@ import { join } from 'path';
 
 export const packageManagerList = ['pnpm', 'yarn', 'npm', 'bun'] as const;
 
-export type PackageManager = typeof packageManagerList[number];
+export type PackageManager = (typeof packageManagerList)[number];
 
 export function detectPackageManager(dir: string = ''): PackageManager {
   return existsSync(join(dir, 'bun.lockb'))
diff --git a/packages/devkit/src/utils/convert-nx-executor.spec.ts b/packages/devkit/src/utils/convert-nx-executor.spec.ts
index c61f00ac7fcef..65fc1d654b3bb 100644
--- a/packages/devkit/src/utils/convert-nx-executor.spec.ts
+++ b/packages/devkit/src/utils/convert-nx-executor.spec.ts
@@ -23,7 +23,8 @@ describe('Convert Nx Executor', () => {
     const {
       TestingArchitectHost,
       // nx-ignore-next-line
-    } = require('@angular-devkit/architect/testing') as typeof import('@angular-devkit/architect/testing');
+    } =
+      require('@angular-devkit/architect/testing') as typeof import('@angular-devkit/architect/testing');
     const { Architect } = require('@angular-devkit/architect');
 
     const registry = new schema.CoreSchemaRegistry();
diff --git a/packages/jest/src/utils/config/config-file.ts b/packages/jest/src/utils/config/config-file.ts
index 76d1e7d664f00..de3ff51915ac0 100644
--- a/packages/jest/src/utils/config/config-file.ts
+++ b/packages/jest/src/utils/config/config-file.ts
@@ -8,10 +8,10 @@ export const jestConfigExtensions = [
   'mts',
   'cts',
 ] as const;
-export type JestConfigExtension = typeof jestConfigExtensions[number];
+export type JestConfigExtension = (typeof jestConfigExtensions)[number];
 
 export const jestPresetExtensions = ['js', 'cjs', 'mjs'] as const;
-export type JestPresetExtension = typeof jestPresetExtensions[number];
+export type JestPresetExtension = (typeof jestPresetExtensions)[number];
 
 export function getPresetExt(tree: Tree): JestPresetExtension {
   const ext = jestPresetExtensions.find((ext) =>
diff --git a/packages/js/src/generators/release-version/release-version.ts b/packages/js/src/generators/release-version/release-version.ts
index 475bb53fc941d..fb0be31d6a573 100644
--- a/packages/js/src/generators/release-version/release-version.ts
+++ b/packages/js/src/generators/release-version/release-version.ts
@@ -205,7 +205,7 @@ To fix this you will either need to add a package.json file at that location, or
               )}Resolving the current version for tag "${tag}" on ${registry}`
             );
             spinner.color =
-              color.spinnerColor as typeof colors[number]['spinnerColor'];
+              color.spinnerColor as (typeof colors)[number]['spinnerColor'];
             spinner.start();
 
             try {
diff --git a/packages/nx/release/changelog-renderer/index.ts b/packages/nx/release/changelog-renderer/index.ts
index 5d7038d042399..04eb7f7879ccc 100644
--- a/packages/nx/release/changelog-renderer/index.ts
+++ b/packages/nx/release/changelog-renderer/index.ts
@@ -10,7 +10,7 @@ import type { ProjectGraph } from '../../src/config/project-graph';
 
 // axios types and values don't seem to match
 import _axios = require('axios');
-const axios = _axios as any as typeof _axios['default'];
+const axios = _axios as any as (typeof _axios)['default'];
 
 /**
  * The ChangelogRenderOptions are specific to each ChangelogRenderer implementation, and are taken
diff --git a/packages/nx/src/command-line/release/utils/github.ts b/packages/nx/src/command-line/release/utils/github.ts
index 6bfc992ce3468..a166e8e6776e7 100644
--- a/packages/nx/src/command-line/release/utils/github.ts
+++ b/packages/nx/src/command-line/release/utils/github.ts
@@ -16,7 +16,7 @@ import { ReleaseVersion, noDiffInChangelogMessage } from './shared';
 
 // axios types and values don't seem to match
 import _axios = require('axios');
-const axios = _axios as any as typeof _axios['default'];
+const axios = _axios as any as (typeof _axios)['default'];
 
 export type RepoSlug = `${string}/${string}`;
 
diff --git a/packages/nx/src/command-line/release/version.ts b/packages/nx/src/command-line/release/version.ts
index d1d0d4d063e6c..8ffc2e789e657 100644
--- a/packages/nx/src/command-line/release/version.ts
+++ b/packages/nx/src/command-line/release/version.ts
@@ -72,7 +72,7 @@ export interface ReleaseVersionGeneratorSchema {
   fallbackCurrentVersionResolver?: 'disk';
   firstRelease?: boolean;
   // auto means the existing prefix will be preserved, and is the default behavior
-  versionPrefix?: typeof validReleaseVersionPrefixes[number];
+  versionPrefix?: (typeof validReleaseVersionPrefixes)[number];
   skipLockFileUpdate?: boolean;
   installArgs?: string;
   installIgnoreScripts?: boolean;
diff --git a/packages/nx/src/command-line/show/project.ts b/packages/nx/src/command-line/show/project.ts
index c7286a3640d22..5cb1b7bcf211d 100644
--- a/packages/nx/src/command-line/show/project.ts
+++ b/packages/nx/src/command-line/show/project.ts
@@ -26,7 +26,7 @@ export async function showProjectHandler(
     );
   } else {
     const chalk = require('chalk') as typeof import('chalk');
-    const logIfExists = (label, key: keyof typeof node['data']) => {
+    const logIfExists = (label, key: keyof (typeof node)['data']) => {
       if (node.data[key]) {
         console.log(`${chalk.bold(label)}: ${node.data[key]}`);
       }
diff --git a/packages/nx/src/command-line/yargs-utils/shared-options.ts b/packages/nx/src/command-line/yargs-utils/shared-options.ts
index bc200ecd5802a..3196074425adf 100644
--- a/packages/nx/src/command-line/yargs-utils/shared-options.ts
+++ b/packages/nx/src/command-line/yargs-utils/shared-options.ts
@@ -247,7 +247,7 @@ const allOutputStyles = [
   'compact',
 ] as const;
 
-export type OutputStyle = typeof allOutputStyles[number];
+export type OutputStyle = (typeof allOutputStyles)[number];
 
 export function withOutputStyleOption(
   yargs: Argv,
diff --git a/packages/nx/src/utils/ab-testing.ts b/packages/nx/src/utils/ab-testing.ts
index 80f084937f29e..3f5d25eba540b 100644
--- a/packages/nx/src/utils/ab-testing.ts
+++ b/packages/nx/src/utils/ab-testing.ts
@@ -40,7 +40,7 @@ const messageOptions = {
 } as const;
 
 export type MessageKey = keyof typeof messageOptions;
-export type MessageData = typeof messageOptions[MessageKey][number];
+export type MessageData = (typeof messageOptions)[MessageKey][number];
 
 export class PromptMessages {
   private selectedMessages = {};
diff --git a/packages/nx/src/utils/find-matching-projects.ts b/packages/nx/src/utils/find-matching-projects.ts
index 2b17d8703c63d..497e2ab13ee1a 100644
--- a/packages/nx/src/utils/find-matching-projects.ts
+++ b/packages/nx/src/utils/find-matching-projects.ts
@@ -7,7 +7,7 @@ const validPatternTypes = [
   'directory', // Pattern is based on the project's root directory
   'unlabeled', // Pattern was passed without specifying a type
 ] as const;
-type ProjectPatternType = typeof validPatternTypes[number];
+type ProjectPatternType = (typeof validPatternTypes)[number];
 
 interface ProjectPattern {
   // If true, the pattern is an exclude pattern