From 045c8dc9ebfa92cb28e17928d16657d3fe77d59e Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Fri, 4 Feb 2022 15:38:06 -0500
Subject: [PATCH] chore(core): use prettier tailwindcss plugin (#8856)

---
 dep-graph/client/src/app/debugger-panel.tsx   |  22 +-
 dep-graph/client/src/app/shell.tsx            |  18 +-
 .../src/app/sidebar/focused-project-panel.tsx |   8 +-
 .../src/app/sidebar/group-by-folder-panel.tsx |   4 +-
 .../client/src/app/sidebar/project-list.tsx   |  18 +-
 .../client/src/app/sidebar/search-depth.tsx   |  12 +-
 .../src/app/sidebar/show-hide-projects.tsx    |   6 +-
 dep-graph/client/src/app/sidebar/sidebar.tsx  |  22 +-
 .../src/app/sidebar/text-filter-panel.tsx     |  14 +-
 nx-dev/feature-conf/src/lib/conf-schedule.tsx |  42 ++--
 nx-dev/feature-conf/src/lib/conf-speakers.tsx |   4 +-
 nx-dev/feature-conf/src/lib/conf-sponsors.tsx |   6 +-
 nx-dev/feature-conf/src/lib/conf-workshop.tsx |  28 +--
 .../feature-doc-viewer/src/lib/code-block.tsx |   4 +-
 nx-dev/feature-doc-viewer/src/lib/content.tsx |   2 +-
 .../feature-doc-viewer/src/lib/doc-viewer.tsx |  16 +-
 nx-dev/feature-doc-viewer/src/lib/sidebar.tsx |  20 +-
 .../feature-search/src/lib/algolia-search.tsx |   4 +-
 nx-dev/nx-dev/pages/[...segments].tsx         |  10 +-
 nx-dev/nx-dev/pages/_app.tsx                  |   2 +-
 nx-dev/nx-dev/pages/_document.tsx             |   2 +-
 nx-dev/nx-dev/pages/community.tsx             |  94 ++++----
 nx-dev/nx-dev/pages/conf.tsx                  |  60 ++---
 nx-dev/nx-dev/pages/index.tsx                 |  54 ++---
 nx-dev/ui-commands/src/lib/inline-command.tsx |   6 +-
 nx-dev/ui-common/src/lib/footer.tsx           |  18 +-
 nx-dev/ui-common/src/lib/header.tsx           |  20 +-
 .../src/lib/npx-create-nx-workspace.tsx       |  60 ++---
 .../ui-common/src/lib/nx-users-showcase.tsx   |   4 +-
 nx-dev/ui-common/src/lib/plugin-card.tsx      |   8 +-
 nx-dev/ui-common/src/lib/selector.tsx         |  16 +-
 nx-dev/ui-common/src/lib/testimonials.tsx     |  26 +--
 nx-dev/ui-home/src/lib/affected-command.tsx   |  38 ++--
 nx-dev/ui-home/src/lib/cloud-support.tsx      |  14 +-
 nx-dev/ui-home/src/lib/dependency-graph.tsx   |  12 +-
 nx-dev/ui-home/src/lib/ecosystem-features.tsx |  16 +-
 nx-dev/ui-home/src/lib/egghead-courses.tsx    |  12 +-
 nx-dev/ui-home/src/lib/event-banner.tsx       |  10 +-
 .../ui-home/src/lib/experience-features.tsx   |  16 +-
 nx-dev/ui-home/src/lib/getting-started.tsx    | 212 +++++++++---------
 nx-dev/ui-home/src/lib/monorepo-features.tsx  |  14 +-
 nx-dev/ui-home/src/lib/nx-playbook.tsx        |  14 +-
 nx-dev/ui-home/src/lib/open-platform.tsx      |  18 +-
 .../ui-home/src/lib/open-source-projects.tsx  |  28 +--
 nx-dev/ui-home/src/lib/performance.tsx        |  12 +-
 nx-dev/ui-home/src/lib/vscode-plugin.tsx      |  12 +-
 nx-dev/ui-home/src/lib/youtube-channel.tsx    |  12 +-
 nx-dev/ui-member-card/src/lib/member-card.tsx |   8 +-
 .../ui-sponsor-card/src/lib/sponsor-card.tsx  |   4 +-
 package.json                                  |   3 +-
 yarn.lock                                     |   5 +
 51 files changed, 548 insertions(+), 542 deletions(-)

diff --git a/dep-graph/client/src/app/debugger-panel.tsx b/dep-graph/client/src/app/debugger-panel.tsx
index 056509815d..860d83b871 100644
--- a/dep-graph/client/src/app/debugger-panel.tsx
+++ b/dep-graph/client/src/app/debugger-panel.tsx
@@ -19,20 +19,20 @@ export const DebuggerPanel = memo(function ({
     <div
       id="debugger-panel"
       className="
+          flex-column
+          flex
           w-auto
-          text-gray-700
-          bg-gray-50
-          border-b border-gray-200
-          p-4
-          flex flex-column
-          items-center
-          justify-items-center
+          items-center justify-items-center
           gap-4
+          border-b border-gray-200
+          bg-gray-50
+          p-4
+          text-gray-700
         "
     >
-      <h4 className="text-lg font-bold mr-4">Debugger</h4>
+      <h4 className="mr-4 text-lg font-bold">Debugger</h4>
       <select
-        className="w-auto flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white"
+        className="flex w-auto items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
         data-cy="project-select"
         onChange={(event) => projectGraphChange(event.target.value)}
         value={selectedProjectGraph}
@@ -47,9 +47,9 @@ export const DebuggerPanel = memo(function ({
       </select>
       <p className="text-sm">
         Last render took {lastPerfReport.renderTime}ms:{' '}
-        <b className="font-mono text-medium">{lastPerfReport.numNodes} nodes</b>{' '}
+        <b className="text-medium font-mono">{lastPerfReport.numNodes} nodes</b>{' '}
         |{' '}
-        <b className="font-mono text-medium">{lastPerfReport.numEdges} edges</b>
+        <b className="text-medium font-mono">{lastPerfReport.numEdges} edges</b>
         .
       </p>
     </div>
diff --git a/dep-graph/client/src/app/shell.tsx b/dep-graph/client/src/app/shell.tsx
index ac020a6bb2..100b56d836 100644
--- a/dep-graph/client/src/app/shell.tsx
+++ b/dep-graph/client/src/app/shell.tsx
@@ -111,7 +111,7 @@ export function Shell() {
           <div id="no-projects-chosen" className="flex text-gray-700">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              className="h-6 w-6 mr-4"
+              className="mr-4 h-6 w-6"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -132,20 +132,20 @@ export function Shell() {
             <button
               type="button"
               className={`
+            bg-green-nx-base
             fixed
-            z-50
             bottom-4
             right-4
-            w-16
-            h-16
-            rounded-full
-            bg-green-nx-base
-            shadow-sm
-            text-white
+            z-50
             block
+            h-16
+            w-16
+            transform
+            rounded-full
+            text-white
+            shadow-sm
             transition
             duration-300
-            transform
             ${!projectIsSelected ? 'opacity-0' : ''}
           `}
               data-cy="downloadImageButton"
diff --git a/dep-graph/client/src/app/sidebar/focused-project-panel.tsx b/dep-graph/client/src/app/sidebar/focused-project-panel.tsx
index 0803c59b77..f283506cc7 100644
--- a/dep-graph/client/src/app/sidebar/focused-project-panel.tsx
+++ b/dep-graph/client/src/app/sidebar/focused-project-panel.tsx
@@ -10,14 +10,14 @@ export const FocusedProjectPanel = memo(
     return (
       <div className="mt-10 px-4">
         <div
-          className="p-2 shadow-sm bg-green-nx-base text-gray-50 border border-gray-200 rounded-md flex items-center group relative cursor-pointer overflow-hidden"
+          className="bg-green-nx-base group relative flex cursor-pointer items-center overflow-hidden rounded-md border border-gray-200 p-2 text-gray-50 shadow-sm"
           data-cy="unfocusButton"
           onClick={() => resetFocus()}
         >
           <p className="truncate transition duration-200 ease-in-out group-hover:opacity-60">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              className="h-6 w-6 inline -mt-1 mr-1"
+              className="-mt-1 mr-1 inline h-6 w-6"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -31,9 +31,9 @@ export const FocusedProjectPanel = memo(
             </svg>
             <span id="focused-project-name">Focused on {focusedProject}</span>
           </p>
-          <div className="absolute right-2 flex transition-all translate-x-32 transition duration-200 ease-in-out group-hover:translate-x-0 pl-2 rounded-md text-gray-700 items-center text-sm font-medium bg-white shadow-sm ring-1 ring-gray-500">
+          <div className="absolute right-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-gray-500 transition-all transition duration-200 ease-in-out group-hover:translate-x-0">
             Reset
-            <span className="p-1 rounded-md">
+            <span className="rounded-md p-1">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 className="h-5 w-5"
diff --git a/dep-graph/client/src/app/sidebar/group-by-folder-panel.tsx b/dep-graph/client/src/app/sidebar/group-by-folder-panel.tsx
index d27578972a..35a3cf569b 100644
--- a/dep-graph/client/src/app/sidebar/group-by-folder-panel.tsx
+++ b/dep-graph/client/src/app/sidebar/group-by-folder-panel.tsx
@@ -10,13 +10,13 @@ export const GroupByFolderPanel = memo(
     return (
       <div className="mt-8 px-4">
         <div className="flex items-start">
-          <div className="flex items-center h-5">
+          <div className="flex h-5 items-center">
             <input
               id="displayOptions"
               name="displayOptions"
               value="groupByFolder"
               type="checkbox"
-              className="h-4 w-4 border-gray-300 rounded"
+              className="h-4 w-4 rounded border-gray-300"
               onChange={(event) => groupByFolderChanged(event.target.checked)}
               checked={groupByFolder}
             ></input>
diff --git a/dep-graph/client/src/app/sidebar/project-list.tsx b/dep-graph/client/src/app/sidebar/project-list.tsx
index 6a8f604148..3c8c3e43c1 100644
--- a/dep-graph/client/src/app/sidebar/project-list.tsx
+++ b/dep-graph/client/src/app/sidebar/project-list.tsx
@@ -61,7 +61,7 @@ function ProjectListItem({
   focusProject: (projectId: string) => void;
 }) {
   return (
-    <li className="text-xs text-gray-600 block cursor-default select-none relative py-1 pl-3 pr-9">
+    <li className="relative block cursor-default select-none py-1 pl-3 pr-9 text-xs text-gray-600">
       <div className="flex items-center">
         <button
           type="button"
@@ -69,7 +69,7 @@ function ProjectListItem({
           title="Focus on this library"
           onClick={() => focusProject(project.projectGraphNode.name)}
         >
-          <span className="p-1 rounded-md flex items-center font-medium bg-white transition hover:bg-gray-50 shadow-sm ring-1 ring-gray-200">
+          <span className="flex items-center rounded-md bg-white p-1 font-medium shadow-sm ring-1 ring-gray-200 transition hover:bg-gray-50">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               className="h-5 w-5"
@@ -86,7 +86,7 @@ function ProjectListItem({
           </span>
         </button>
         <label
-          className="font-mono font-normal ml-3 p-2 transition hover:bg-gray-50 cursor-pointer block rounded-md truncate w-full"
+          className="ml-3 block w-full cursor-pointer truncate rounded-md p-2 font-mono font-normal transition hover:bg-gray-50"
           data-project={project.projectGraphNode.name}
           data-active={project.isSelected.toString()}
           onClick={() =>
@@ -100,7 +100,7 @@ function ProjectListItem({
       {project.isSelected ? (
         <span
           title="This library is visible"
-          className="text-green-nx-base absolute inset-y-0 right-0 flex items-center cursor-pointer"
+          className="text-green-nx-base absolute inset-y-0 right-0 flex cursor-pointer items-center"
           onClick={() =>
             toggleProject(project.projectGraphNode.name, project.isSelected)
           }
@@ -159,7 +159,7 @@ function SubProjectList({
 
   return (
     <>
-      <h3 className="mt-4 py-2 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900 cursor-text">
+      <h3 className="mt-4 cursor-text py-2 text-sm font-semibold uppercase tracking-wide text-gray-900 lg:text-xs">
         {headerText}
       </h3>
       <ul className="mt-2 -ml-3">
@@ -222,8 +222,8 @@ export function ProjectList() {
   const sortedE2EDirectories = Object.keys(e2eDirectoryGroups).sort();
 
   return (
-    <div id="project-lists" className="mt-8 px-4 border-t border-gray-200">
-      <h2 className="mt-8 text-lg font-bold border-b border-gray-50 border-solid">
+    <div id="project-lists" className="mt-8 border-t border-gray-200 px-4">
+      <h2 className="mt-8 border-b border-solid border-gray-50 text-lg font-bold">
         app projects
       </h2>
 
@@ -240,7 +240,7 @@ export function ProjectList() {
         );
       })}
 
-      <h2 className="mt-8 text-lg font-bold border-b border-gray-50 border-solid">
+      <h2 className="mt-8 border-b border-solid border-gray-50 text-lg font-bold">
         e2e projects
       </h2>
 
@@ -257,7 +257,7 @@ export function ProjectList() {
         );
       })}
 
-      <h2 className="mt-8 text-lg font-bold border-b border-gray-50 border-solid">
+      <h2 className="mt-8 border-b border-solid border-gray-50 text-lg font-bold">
         lib projects
       </h2>
 
diff --git a/dep-graph/client/src/app/sidebar/search-depth.tsx b/dep-graph/client/src/app/sidebar/search-depth.tsx
index e46a3b9fc8..41af479595 100644
--- a/dep-graph/client/src/app/sidebar/search-depth.tsx
+++ b/dep-graph/client/src/app/sidebar/search-depth.tsx
@@ -19,13 +19,13 @@ export const SearchDepth = memo(
     return (
       <div className="mt-4 px-4">
         <div className="mt-4 flex items-start">
-          <div className="flex items-center h-5">
+          <div className="flex h-5 items-center">
             <input
               id="depthFilter"
               name="depthFilter"
               value="depthFilterActivated"
               type="checkbox"
-              className="h-4 w-4 border-gray-300 rounded"
+              className="h-4 w-4 rounded border-gray-300"
               checked={searchDepthEnabled}
               onChange={(event) =>
                 searchDepthFilterEnabledChange(event.target.checked)
@@ -45,10 +45,10 @@ export const SearchDepth = memo(
           </div>
         </div>
         <div className="mt-3 px-10">
-          <div className="flex rounded-md shadow-sm text-gray-500">
+          <div className="flex rounded-md text-gray-500 shadow-sm">
             <button
               title="Remove ancestor level"
-              className="inline-flex items-center py-2 px-4 rounded-l-md border border-gray-300 bg-gray-50 text-gray-500 hover:bg-gray-100"
+              className="inline-flex items-center rounded-l-md border border-gray-300 bg-gray-50 py-2 px-4 text-gray-500 hover:bg-gray-100"
               onClick={decrementDepthFilter}
             >
               <svg
@@ -68,13 +68,13 @@ export const SearchDepth = memo(
             </button>
             <span
               id="depthFilterValue"
-              className="p-1.5 bg-white flex-1 block w-full rounded-none border-t border-b border-gray-300 text-center font-mono"
+              className="block w-full flex-1 rounded-none border-t border-b border-gray-300 bg-white p-1.5 text-center font-mono"
             >
               {searchDepth}
             </span>
             <button
               title="Add ancestor level"
-              className="inline-flex items-center py-2 px-4 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 hover:bg-gray-100"
+              className="inline-flex items-center rounded-r-md border border-gray-300 bg-gray-50 py-2 px-4 text-gray-500 hover:bg-gray-100"
               onClick={incrementDepthFilter}
             >
               <svg
diff --git a/dep-graph/client/src/app/sidebar/show-hide-projects.tsx b/dep-graph/client/src/app/sidebar/show-hide-projects.tsx
index b2a27e3b1f..2d784eb3d6 100644
--- a/dep-graph/client/src/app/sidebar/show-hide-projects.tsx
+++ b/dep-graph/client/src/app/sidebar/show-hide-projects.tsx
@@ -19,7 +19,7 @@ export const ShowHideAllProjects = memo(
         <button
           onClick={showAllProjects}
           type="button"
-          className="w-full flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
+          className="flex w-full items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
           data-cy="selectAllButton"
         >
           <svg
@@ -49,7 +49,7 @@ export const ShowHideAllProjects = memo(
           <button
             onClick={showAffectedProjects}
             type="button"
-            className="mt-3 w-full flex items-center px-4 py-2 border border-red-300 rounded-md shadow-sm text-sm font-medium text-red-500 bg-white hover:bg-red-50"
+            className="mt-3 flex w-full items-center rounded-md border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-500 shadow-sm hover:bg-red-50"
             data-cy="affectedButton"
           >
             <svg
@@ -73,7 +73,7 @@ export const ShowHideAllProjects = memo(
         <button
           onClick={hideAllProjects}
           type="button"
-          className="mt-3 w-full flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
+          className="mt-3 flex w-full items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
           data-cy="deselectAllButton"
         >
           <svg
diff --git a/dep-graph/client/src/app/sidebar/sidebar.tsx b/dep-graph/client/src/app/sidebar/sidebar.tsx
index 8e932a4a38..9477aaddd6 100644
--- a/dep-graph/client/src/app/sidebar/sidebar.tsx
+++ b/dep-graph/client/src/app/sidebar/sidebar.tsx
@@ -81,19 +81,19 @@ export function Sidebar() {
   return (
     <div
       className="
-    flex flex-col
+    relative flex
     h-full
-    overflow-scroll
     w-72
+    flex-col
+    overflow-scroll
     pb-10
-    shadow-lg
-    ring-1 ring-gray-400 ring-opacity-10
-    relative
+    shadow-lg ring-1 ring-gray-400
+    ring-opacity-10
   "
       id="sidebar"
     >
       <div className="bg-blue-nx-base">
-        <div className="flex items-center justify-start mx-4 my-5 text-white">
+        <div className="mx-4 my-5 flex items-center justify-start text-white">
           <svg
             className="h-10 w-auto"
             viewBox="0 0 24 24"
@@ -111,11 +111,11 @@ export function Sidebar() {
         id="help"
         className="
       mt-3
-      px-4
-      text-xs text-gray-500
       flex
-      items-center
-      cursor-pointer
+      cursor-pointer items-center
+      px-4
+      text-xs
+      text-gray-500
       hover:underline
     "
         href="https://nx.dev/structure/dependency-graph"
@@ -124,7 +124,7 @@ export function Sidebar() {
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          className="h-4 w-4 mr-2"
+          className="mr-2 h-4 w-4"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
diff --git a/dep-graph/client/src/app/sidebar/text-filter-panel.tsx b/dep-graph/client/src/app/sidebar/text-filter-panel.tsx
index e008d9557b..1549ab0244 100644
--- a/dep-graph/client/src/app/sidebar/text-filter-panel.tsx
+++ b/dep-graph/client/src/app/sidebar/text-filter-panel.tsx
@@ -50,10 +50,10 @@ export function TextFilterPanel({
     <div>
       <div className="mt-10 px-4">
         <form
-          className="flex rounded-md shadow-sm relative"
+          className="relative flex rounded-md shadow-sm"
           onSubmit={(event) => event.preventDefault()}
         >
-          <span className="inline-flex items-center p-2 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
+          <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 p-2 text-gray-500">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               className="h-4 w-4"
@@ -71,7 +71,7 @@ export function TextFilterPanel({
           </span>
           <input
             type="text"
-            className="p-1.5 bg-white text-gray-600 flex-1 block w-full rounded-none rounded-r-md border border-gray-300"
+            className="block w-full flex-1 rounded-none rounded-r-md border border-gray-300 bg-white p-1.5 text-gray-600"
             placeholder="lib name, other lib name"
             data-cy="textFilterInput"
             name="filter"
@@ -84,7 +84,7 @@ export function TextFilterPanel({
               data-cy="textFilterReset"
               type="reset"
               onClick={resetClicked}
-              className="p-1 top-1 right-1 absolute bg-white inline-block rounded-md text-gray-500"
+              className="absolute top-1 right-1 inline-block rounded-md bg-white p-1 text-gray-500"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -107,14 +107,14 @@ export function TextFilterPanel({
 
       <div className="mt-4 px-4">
         <div className="flex items-start">
-          <div className="flex items-center h-5">
+          <div className="flex h-5 items-center">
             <input
               disabled={textFilter.length === 0}
               id="includeInPath"
               name="textFilterCheckbox"
               type="checkbox"
               value="includeInPath"
-              className="h-4 w-4 border-gray-300 rounded"
+              className="h-4 w-4 rounded border-gray-300"
               checked={includePath}
               onChange={toggleIncludeLibsInPathChange}
             ></input>
@@ -122,7 +122,7 @@ export function TextFilterPanel({
           <div className="ml-3 text-sm">
             <label
               htmlFor="includeInPath"
-              className="font-medium text-gray-700 cursor-pointer"
+              className="cursor-pointer font-medium text-gray-700"
             >
               Include related libraries
             </label>
diff --git a/nx-dev/feature-conf/src/lib/conf-schedule.tsx b/nx-dev/feature-conf/src/lib/conf-schedule.tsx
index 811ccbf6ff..c8f0e4e171 100644
--- a/nx-dev/feature-conf/src/lib/conf-schedule.tsx
+++ b/nx-dev/feature-conf/src/lib/conf-schedule.tsx
@@ -311,18 +311,18 @@ export function ConfSchedule(): JSX.Element {
 
   return activeDay === 1 ? (
     <div className="border-t border-gray-600">
-      <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
-        <div className="date-container-l grid grid-cols-2 font-input-mono divide-x divide-gray-600">
-          <div className="p-8 text-center bg-blue-nx-dark">September 16</div>
+      <div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
+        <div className="date-container-l font-input-mono grid grid-cols-2 divide-x divide-gray-600">
+          <div className="bg-blue-nx-dark p-8 text-center">September 16</div>
           <div
-            className="p-8 text-center cursor-pointer"
+            className="cursor-pointer p-8 text-center"
             onClick={() => setActiveDay(2)}
           >
             September 17
           </div>
         </div>
       </div>
-      <section className="w-full border-t border-b border-gray-600 divide-y divide-gray-600">
+      <section className="w-full divide-y divide-gray-600 border-t border-b border-gray-600">
         {scheduleItemsFor16.map((item) =>
           item.type === 'event' ? scheduleRow(item) : breakRow(item)
         )}
@@ -331,18 +331,18 @@ export function ConfSchedule(): JSX.Element {
   ) : (
     <div>
       <div className="border-t border-gray-600">
-        <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
-          <div className="date-container-r grid grid-cols-2 font-input-mono divide-x divide-gray-600">
+        <div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
+          <div className="date-container-r font-input-mono grid grid-cols-2 divide-x divide-gray-600">
             <div
-              className="p-8 text-center cursor-pointer"
+              className="cursor-pointer p-8 text-center"
               onClick={() => setActiveDay(1)}
             >
               September 16
             </div>
-            <div className="p-8 text-center bg-blue-nx-dark">September 17</div>
+            <div className="bg-blue-nx-dark p-8 text-center">September 17</div>
           </div>
         </div>
-        <section className="w-full border-t border-b border-gray-600 divide-y divide-gray-600">
+        <section className="w-full divide-y divide-gray-600 border-t border-b border-gray-600">
           {scheduleItemsFor17.map((item) =>
             item.type === 'event' ? scheduleRow(item) : breakRow(item)
           )}
@@ -354,15 +354,15 @@ export function ConfSchedule(): JSX.Element {
 
 const scheduleRow = (item: ScheduleItem): JSX.Element => (
   <div key={item.title + item.time} className="w-full">
-    <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
-      <article className="w-full grid grid-cols-1 md:grid-cols-5 md:divide-x md:divide-gray-600">
-        <div className="px-5 pt-12 pb-8 md:py-12 font-input-mono">
+    <div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
+      <article className="grid w-full grid-cols-1 md:grid-cols-5 md:divide-x md:divide-gray-600">
+        <div className="font-input-mono px-5 pt-12 pb-8 md:py-12">
           <span className="hidden md:block">{item.time}</span>
-          <span className="py-4 px-6 mb-4 bg-blue-nx-dark rounded-md md:hidden">
+          <span className="bg-blue-nx-dark mb-4 rounded-md py-4 px-6 md:hidden">
             {item.time}
           </span>
         </div>
-        <div className="px-5 md:py-12 md:px-8 col-span-2 font-input-mono">
+        <div className="font-input-mono col-span-2 px-5 md:py-12 md:px-8">
           {item.videoUrl ? (
             <h3 className="mb-4 underline">
               <a href={item.videoUrl} target="_blank">
@@ -376,7 +376,7 @@ const scheduleRow = (item: ScheduleItem): JSX.Element => (
             {item.speakers.join(' & ')}
           </div>
         </div>
-        <p className="px-5 pt-8 pb-12 md:py-12 md:px-8 col-span-2 text-gray-400">
+        <p className="col-span-2 px-5 pt-8 pb-12 text-gray-400 md:py-12 md:px-8">
           {item.description}
         </p>
       </article>
@@ -386,15 +386,15 @@ const scheduleRow = (item: ScheduleItem): JSX.Element => (
 
 const breakRow = (item: ScheduleItem): JSX.Element => (
   <div key={item.title + item.time} className="w-full">
-    <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
-      <div className="w-full grid grid-cols-1 md:grid-cols-5">
-        <div className="px-5 pt-12 pb-8 md:py-12 font-input-mono">
+    <div className="mx-auto max-w-screen-lg text-white 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">
           <span className="hidden md:block">{item.time}</span>
-          <span className="py-4 px-6 mb-4 bg-blue-nx-dark rounded-md md:hidden">
+          <span className="bg-blue-nx-dark mb-4 rounded-md py-4 px-6 md:hidden">
             {item.time}
           </span>
         </div>
-        <div className="pb-12 md:py-12 px-5 md:px-8 md:col-span-4 md:border-l md:border-gray-600">
+        <div className="px-5 pb-12 md:col-span-4 md:border-l md:border-gray-600 md:py-12 md:px-8">
           {item.videoUrl ? (
             <h3 className="font-input-mono underline">
               <a href={item.videoUrl} target="_blank">
diff --git a/nx-dev/feature-conf/src/lib/conf-speakers.tsx b/nx-dev/feature-conf/src/lib/conf-speakers.tsx
index f12da71d96..7cb110577e 100644
--- a/nx-dev/feature-conf/src/lib/conf-speakers.tsx
+++ b/nx-dev/feature-conf/src/lib/conf-speakers.tsx
@@ -122,12 +122,12 @@ export function ConfSpeakers(): JSX.Element {
           key={'speaker-row--' + rowIndex}
           className="border-b border-gray-600"
         >
-          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
+          <div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
             <div className="grid grid-cols-1 md:grid-cols-2">
               {row.map((speaker) => (
                 <div
                   key={speaker.name}
-                  className="py-8 md:odd:pr-12 md:even:pl-12 odd:border-b md:odd:border-r md:odd:border-b-0 border-gray-600"
+                  className="border-gray-600 py-8 odd:border-b md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
                 >
                   <div className="px-5">
                     <MemberCard
diff --git a/nx-dev/feature-conf/src/lib/conf-sponsors.tsx b/nx-dev/feature-conf/src/lib/conf-sponsors.tsx
index c76dc79da8..f18013a371 100644
--- a/nx-dev/feature-conf/src/lib/conf-sponsors.tsx
+++ b/nx-dev/feature-conf/src/lib/conf-sponsors.tsx
@@ -102,14 +102,14 @@ export function ConfSponsors(): JSX.Element {
                 sponsorLevelList.length === levelIndex + 1 && 'border-b'
               )}
             >
-              <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
+              <div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
                 <div className="grid grid-cols-1 md:grid-cols-2">
                   {row.map((speaker) => (
                     <div
                       key={speaker.name}
-                      className="py-8 md:odd:pr-12 md:even:pl-12 odd:border-b md:odd:border-r md:odd:border-b-0 border-gray-600"
+                      className="border-gray-600 py-8 odd:border-b md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
                     >
-                      <div className="px-5 h-full">
+                      <div className="h-full px-5">
                         <SponsorCard
                           imageUrl={speaker.imageUrl}
                           name={speaker.name}
diff --git a/nx-dev/feature-conf/src/lib/conf-workshop.tsx b/nx-dev/feature-conf/src/lib/conf-workshop.tsx
index 58358844d8..4180e735c5 100644
--- a/nx-dev/feature-conf/src/lib/conf-workshop.tsx
+++ b/nx-dev/feature-conf/src/lib/conf-workshop.tsx
@@ -4,16 +4,16 @@ import { MemberCard } from '@nrwl/nx-dev/ui-member-card';
 export function ConfWorkshop(): JSX.Element {
   return (
     <div className="border-t border-b border-gray-600">
-      <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
+      <div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
         <article className="grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-gray-600">
           <div className="px-5 py-12 md:pr-12">
             <div className="font-input-mono text-green-nx-base">
               September 14 & 15
             </div>
-            <h2 className="pt-8 pb-2 text-2xl font-input-mono">
+            <h2 className="font-input-mono pt-8 pb-2 text-2xl">
               Develop at Scale with Nx Monorepos
             </h2>
-            <p className="mb-8 text-md text-gray-400">
+            <p className="text-md mb-8 text-gray-400">
               Presented by Nrwl on September 14th and 15th, 10:30am - 5:30pm ET
             </p>
             <p className="text-gray-400">
@@ -24,7 +24,7 @@ export function ConfWorkshop(): JSX.Element {
               needed for any tech lead or individual contributor to be
               successful working in an Nx workspace.
             </p>
-            <h4 className="mt-8 mb-4 text-lg font-input-mono">
+            <h4 className="font-input-mono mt-8 mb-4 text-lg">
               $800 All-Inclusive
             </h4>
             <p className="mb-4 text-gray-400">
@@ -38,7 +38,7 @@ export function ConfWorkshop(): JSX.Element {
               codelabs.
             </p>
 
-            <h4 className="mb-2 text-lg font-input-mono">Day 1</h4>
+            <h4 className="font-input-mono mb-2 text-lg">Day 1</h4>
             <ul className="mb-4 text-sm text-gray-400">
               <li>
                 <span role="img" aria-label="emojii">
@@ -111,7 +111,7 @@ export function ConfWorkshop(): JSX.Element {
               </li>
             </ul>
 
-            <h4 className="mb-2 text-lg font-input-mono">Day 2</h4>
+            <h4 className="font-input-mono mb-2 text-lg">Day 2</h4>
             <ul className="text-sm text-gray-400">
               <li>
                 <span role="img" aria-label="emojii">
@@ -162,9 +162,9 @@ export function ConfWorkshop(): JSX.Element {
               </li>
             </ul>
           </div>
-          <div className="py-12 divide-y divide-gray-600">
-            <div className="px-5 pb-12 md:pl-12 md:w-4/5">
-              <h3 className="mb-8 text-xl font-input-mono">Instructors</h3>
+          <div className="divide-y divide-gray-600 py-12">
+            <div className="px-5 pb-12 md:w-4/5 md:pl-12">
+              <h3 className="font-input-mono mb-8 text-xl">Instructors</h3>
               <MemberCard
                 imageUrl="/images/conf/kirils-ladovs.webp"
                 name="Kirils Ladovs"
@@ -182,7 +182,7 @@ export function ConfWorkshop(): JSX.Element {
               /> */}
             </div>
             <div className="workshop-border-r px-5 py-12 md:pl-12">
-              <h3 className="mb-8 text-xl font-input-mono">
+              <h3 className="font-input-mono mb-8 text-xl">
                 What you'll learn
               </h3>
               <p className="text-gray-400">
@@ -195,11 +195,11 @@ export function ConfWorkshop(): JSX.Element {
                 plugins that allow for the smooth integration of frameworks and
                 libraries.
               </p>
-              <div className="my-12 m-auto w-2/3 grid grid-cols-3 justify-items-center gap-4">
+              <div className="m-auto my-12 grid w-2/3 grid-cols-3 justify-items-center gap-4">
                 <svg viewBox="0 0 24 24" className="w-18 h-18" fill="#52C1DE">
                   <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
                 </svg>
-                <div className="text-6xl font-input-mono">||</div>
+                <div className="font-input-mono text-6xl">||</div>
                 <svg viewBox="0 0 24 24" className="w-18 h-18" fill="#E23236">
                   <path d="M9.931 12.645h4.138l-2.07-4.908m0-7.737L.68 3.982l1.726 14.771L12 24l9.596-5.242L23.32 3.984 11.999.001zm7.064 18.31h-2.638l-1.422-3.503H8.996l-1.422 3.504h-2.64L12 2.65z" />
                 </svg>
@@ -211,7 +211,7 @@ export function ConfWorkshop(): JSX.Element {
             </div>
             <div className="px-5 pt-12 md:pl-12">
               <a
-                className="flex items-center font-input-mono group w-full sm:text-xl"
+                className="font-input-mono group flex w-full items-center sm:text-xl"
                 href="https://nrwl.io/contact-us?utm_source=nxdev"
               >
                 <span className="group-hover:underline">
@@ -219,7 +219,7 @@ export function ConfWorkshop(): JSX.Element {
                 </span>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="ml-1 h-8 w-8 transform-gpu transition ease-out duration-200 group-hover:translate-x-2 "
+                  className="ml-1 h-8 w-8 transform-gpu transition duration-200 ease-out group-hover:translate-x-2 "
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
diff --git a/nx-dev/feature-doc-viewer/src/lib/code-block.tsx b/nx-dev/feature-doc-viewer/src/lib/code-block.tsx
index eb1412abe4..035a55d79a 100644
--- a/nx-dev/feature-doc-viewer/src/lib/code-block.tsx
+++ b/nx-dev/feature-doc-viewer/src/lib/code-block.tsx
@@ -27,7 +27,7 @@ export function CodeBlock({
     };
   }, [copied]);
   return (
-    <div className="relative group code-block">
+    <div className="group code-block relative">
       <CopyToClipboard
         text={text}
         onCopy={() => {
@@ -37,7 +37,7 @@ export function CodeBlock({
       >
         <button
           type="button"
-          className="flex absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
+          className="absolute top-2 right-2 flex opacity-0 transition-opacity group-hover:opacity-100"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
diff --git a/nx-dev/feature-doc-viewer/src/lib/content.tsx b/nx-dev/feature-doc-viewer/src/lib/content.tsx
index ab42f4cf02..2b1d5d468b 100644
--- a/nx-dev/feature-doc-viewer/src/lib/content.tsx
+++ b/nx-dev/feature-doc-viewer/src/lib/content.tsx
@@ -43,7 +43,7 @@ const components: any = (config: ComponentsConfig) => ({
 
 export function Content(props: ContentProps) {
   return (
-    <div className="min-w-0 flex-auto px-4 sm:px-6 xl:px-8 pt-8 pb-24 lg:pb-16">
+    <div className="min-w-0 flex-auto px-4 pt-8 pb-24 sm:px-6 lg:pb-16 xl:px-8">
       <ReactMarkdown
         remarkPlugins={[gfm]}
         rehypePlugins={[
diff --git a/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx b/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
index e7b42432e4..120bf3c4d0 100644
--- a/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
+++ b/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
@@ -44,27 +44,27 @@ export function DocViewer({
           type: 'website',
         }}
       />
-      <div className="w-full max-w-screen-lg mx-auto">
+      <div className="mx-auto w-full max-w-screen-lg">
         <div className="lg:flex">
           <Sidebar menu={menu} navIsOpen={navIsOpen} />
           <div
             id="content-wrapper"
             className={cx(
-              'min-w-0 w-full flex-auto flex-col lg:static lg:max-h-full lg:overflow-visible pt-16 md:pl-4',
-              navIsOpen && 'overflow-hidden max-h-screen fixed'
+              'w-full min-w-0 flex-auto flex-col pt-16 md:pl-4 lg:static lg:max-h-full lg:overflow-visible',
+              navIsOpen && 'fixed max-h-screen overflow-hidden'
             )}
           >
             <Content document={document} />
-            <div className="flex items-center space-x-2 w-full px-4 sm:px-6 xl:px-8 pt-24 pb-24 lg:pb-16">
-              <div className="ml-4 flex flex-grow h-0.5 w-full bg-slate-50 rounded" />
-              <div className="flex-shrink-0 relative z-0 inline-flex shadow-sm rounded-md">
+            <div className="flex w-full items-center space-x-2 px-4 pt-24 pb-24 sm:px-6 lg:pb-16 xl:px-8">
+              <div className="ml-4 flex h-0.5 w-full flex-grow rounded bg-slate-50" />
+              <div className="relative z-0 inline-flex flex-shrink-0 rounded-md shadow-sm">
                 <a
                   aria-hidden="true"
                   href="https://github.com/nrwl/nx/issues/new?assignees=&labels=type%3A+docs&template=3-documentation.md"
                   target="_blank"
                   rel="noreferrer"
                   title="Report an issue on Github"
-                  className="relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-200 bg-white text-xs font-medium text-gray-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-nx-base focus:border-blue-nx-base"
+                  className="focus:ring-blue-nx-base focus:border-blue-nx-base relative inline-flex items-center rounded-l-md border border-gray-200 bg-white px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1"
                 >
                   Report an issue
                 </a>
@@ -80,7 +80,7 @@ export function DocViewer({
                   target="_blank"
                   rel="noreferrer"
                   title="Edit this page on Github"
-                  className="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-200 bg-white text-xs font-medium text-gray-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-nx-base focus:border-blue-nx-base"
+                  className="focus:ring-blue-nx-base focus:border-blue-nx-base relative -ml-px inline-flex items-center rounded-r-md border border-gray-200 bg-white px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1"
                 >
                   Edit this page
                 </a>
diff --git a/nx-dev/feature-doc-viewer/src/lib/sidebar.tsx b/nx-dev/feature-doc-viewer/src/lib/sidebar.tsx
index bb97553509..27bfdf4872 100644
--- a/nx-dev/feature-doc-viewer/src/lib/sidebar.tsx
+++ b/nx-dev/feature-doc-viewer/src/lib/sidebar.tsx
@@ -18,21 +18,21 @@ export function Sidebar({ menu, navIsOpen }: SidebarProps) {
     <div
       data-testid="sidebar"
       className={cx(
-        'fixed z-20 inset-0 flex-none h-full bg-black bg-opacity-25 w-full lg:bg-white lg:static lg:h-auto lg:overflow-y-visible lg:pt-o lg:w-64 lg:block border-r border-gray-50',
+        'lg:pt-o fixed inset-0 z-20 h-full w-full flex-none border-r border-gray-50 bg-black bg-opacity-25 lg:static lg:block lg:h-auto lg:w-64 lg:overflow-y-visible lg:bg-white',
         !navIsOpen && 'hidden',
         navIsOpen && 'block'
       )}
     >
       <div
         data-testid="navigation-wrapper"
-        className="h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:relative lg:sticky lg:bg-transparent overflow-auto lg:top-18 bg-white mr-24 lg:mr-0 px-2 sm:pr-4 xl:pr-6"
+        className="scrolling-touch lg:top-18 mr-24 h-full overflow-auto overflow-y-auto bg-white px-2 sm:pr-4 lg:relative lg:sticky lg:mr-0 lg:block lg:h-auto lg:bg-transparent xl:pr-6"
       >
-        <div className="hidden lg:block h-12 pointer-events-none absolute inset-x-0 z-10 bg-gradient-to-b from-white" />
+        <div className="pointer-events-none absolute inset-x-0 z-10 hidden h-12 bg-gradient-to-b from-white lg:block" />
 
         <nav
           id="nav"
           data-testid="navigation"
-          className="px-1 pt-16 font-medium text-base sm:px-3 xl:px-5 lg:text-sm pb-10 lg:pb-14 sticky?lg:h-(screen-18)"
+          className="sticky?lg:h-(screen-18) px-1 pt-16 pb-10 text-base font-medium sm:px-3 lg:pb-14 lg:text-sm xl:px-5"
         >
           {menu.sections.map((section, index) => (
             <SidebarSection key={section.id + '-' + index} section={section} />
@@ -49,7 +49,7 @@ function SidebarSection({ section }: { section: MenuSection }) {
       {section.hideSectionHeader ? null : (
         <h4
           data-testid={`section-h4:${section.id}`}
-          className="mt-8 text-lg font-bold border-b border-gray-50 border-solid"
+          className="mt-8 border-b border-solid border-gray-50 text-lg font-bold"
         >
           {section.name}
         </h4>
@@ -87,7 +87,7 @@ function SidebarSectionItems({ item }: { item: MenuItem }) {
         data-testid={`section-h5:${item.id}`}
         className={cx(
           'flex py-2',
-          'uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900',
+          'text-sm font-semibold uppercase tracking-wide text-gray-900 lg:text-xs',
           item.disableCollapsible ? 'cursor-text' : 'cursor-pointer'
         )}
         onClick={handleCollapseToggle}
@@ -108,11 +108,11 @@ function SidebarSectionItems({ item }: { item: MenuItem }) {
               <Link href={item.url as string}>
                 <a
                   className={cx(
-                    'py-1 transition-colors duration-200 relative block text-gray-500 hover:text-gray-900'
+                    'relative block py-1 text-gray-500 transition-colors duration-200 hover:text-gray-900'
                   )}
                 >
                   {isActiveLink ? (
-                    <span className="rounded-md absolute h-full w-1 -right-2 sm:-right-4 top-0 bg-blue-nx-base" />
+                    <span className="bg-blue-nx-base absolute -right-2 top-0 h-full w-1 rounded-md sm:-right-4" />
                   ) : null}
                   <span
                     className={cx('relative', {
@@ -136,8 +136,8 @@ function CollapsibleIcon({ isCollapsed }: { isCollapsed: boolean }) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       className={cx(
-        'transition-all h-3.5 w-3.5 text-gray-500',
-        !isCollapsed && 'transform rotate-90'
+        'h-3.5 w-3.5 text-gray-500 transition-all',
+        !isCollapsed && 'rotate-90 transform'
       )}
       fill="none"
       viewBox="0 0 24 24"
diff --git a/nx-dev/feature-search/src/lib/algolia-search.tsx b/nx-dev/feature-search/src/lib/algolia-search.tsx
index 33875f18f2..90e45685aa 100644
--- a/nx-dev/feature-search/src/lib/algolia-search.tsx
+++ b/nx-dev/feature-search/src/lib/algolia-search.tsx
@@ -72,7 +72,7 @@ export function AlgoliaSearch() {
         type="button"
         ref={searchButtonRef}
         onClick={handleOpen}
-        className="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 text-white opacity-90 hover:opacity-100 transition-colors duration-200 w-full py-2"
+        className="group flex w-full items-center space-x-3 py-2 font-medium leading-6 text-white opacity-90 transition-colors duration-200 hover:opacity-100 sm:space-x-4"
       >
         <svg width="24" height="24" fill="none" className="text-white">
           <path
@@ -88,7 +88,7 @@ export function AlgoliaSearch() {
         </span>
         <span
           style={{ opacity: browserDetected ? '1' : '0' }}
-          className="hidden sm:block text-sm leading-5 py-0.5 px-1.5 border border-white rounded-md"
+          className="hidden rounded-md border border-white py-0.5 px-1.5 text-sm leading-5 sm:block"
         >
           <span className="sr-only">Press </span>
           <kbd className="font-sans">
diff --git a/nx-dev/nx-dev/pages/[...segments].tsx b/nx-dev/nx-dev/pages/[...segments].tsx
index df244034d1..ef9892f126 100644
--- a/nx-dev/nx-dev/pages/[...segments].tsx
+++ b/nx-dev/nx-dev/pages/[...segments].tsx
@@ -51,7 +51,7 @@ export default function DocumentationPage({
         />
         <button
           type="button"
-          className="fixed z-50 bottom-4 right-4 w-16 h-16 rounded-full bg-green-nx-base shadow-sm text-white block lg:hidden"
+          className="bg-green-nx-base fixed bottom-4 right-4 z-50 block h-16 w-16 rounded-full text-white shadow-sm lg:hidden"
           onClick={toggleNav}
         >
           <span className="sr-only">Open site navigation</span>
@@ -60,9 +60,9 @@ export default function DocumentationPage({
             height="24"
             fill="none"
             className={cx(
-              'absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform',
+              'absolute top-1/2 left-1/2 -mt-3 -ml-3 transform transition duration-300',
               {
-                'opacity-0 scale-80': navIsOpen,
+                'scale-80 opacity-0': navIsOpen,
               }
             )}
           >
@@ -79,9 +79,9 @@ export default function DocumentationPage({
             height="24"
             fill="none"
             className={cx(
-              'absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform',
+              'absolute top-1/2 left-1/2 -mt-3 -ml-3 transform transition duration-300',
               {
-                'opacity-0 scale-80': !navIsOpen,
+                'scale-80 opacity-0': !navIsOpen,
               }
             )}
           >
diff --git a/nx-dev/nx-dev/pages/_app.tsx b/nx-dev/nx-dev/pages/_app.tsx
index d1ef3cf553..50eacc3b8f 100644
--- a/nx-dev/nx-dev/pages/_app.tsx
+++ b/nx-dev/nx-dev/pages/_app.tsx
@@ -72,7 +72,7 @@ export default function CustomApp({ Component, pageProps }: AppProps) {
         <meta name="theme-color" content="#ffffff" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <div className="documentation-app text-gray-700 antialiased bg-white">
+      <div className="documentation-app bg-white text-gray-700 antialiased">
         <Component {...pageProps} />
       </div>
       {/* Global Site Tag (gtag.js) - Google Analytics */}
diff --git a/nx-dev/nx-dev/pages/_document.tsx b/nx-dev/nx-dev/pages/_document.tsx
index 00a07dafdc..4163c01a20 100644
--- a/nx-dev/nx-dev/pages/_document.tsx
+++ b/nx-dev/nx-dev/pages/_document.tsx
@@ -3,7 +3,7 @@ import { Html, Head, Main, NextScript } from 'next/document';
 export default function Document() {
   return (
     <Html
-      className="scroll-smooth selection:bg-blue-nx-base selection:text-white"
+      className="selection:bg-blue-nx-base scroll-smooth selection:text-white"
       lang="en"
     >
       <Head />
diff --git a/nx-dev/nx-dev/pages/community.tsx b/nx-dev/nx-dev/pages/community.tsx
index 493f085cda..28102eca59 100644
--- a/nx-dev/nx-dev/pages/community.tsx
+++ b/nx-dev/nx-dev/pages/community.tsx
@@ -57,12 +57,12 @@ export function Community(props: CommunityProps) {
         <div className="w-full">
           {/*Intro component*/}
           <div className="bg-gray-50">
-            <div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
+            <div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
               <div className="mt-40">
-                <h1 className="text-4xl sm:text-6xl lg:text-7xl leading none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10">
+                <h1 className="leading none mt-10 mb-8 text-4xl font-extrabold tracking-tight text-gray-900 sm:mt-14 sm:mb-10 sm:text-6xl lg:text-7xl">
                   It's always better when we're together.
                 </h1>
-                <p className="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11">
+                <p className="mb-10 max-w-screen-lg text-lg font-medium sm:mb-11 sm:text-2xl sm:leading-10">
                   There are many ways you can connect with the open-source Nx
                   community. Below, you’ll find details about various connection
                   points.
@@ -71,20 +71,20 @@ export function Community(props: CommunityProps) {
             </div>
           </div>
           {/*Community*/}
-          <div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
-            <div className="mt-32 flex md:flex-row flex-col justify-center">
-              <div className="w-full md:w-1/2 flex flex-col justify-between items-start md:pb-0 pb-10 mt-8 md:mt-0">
-                <h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
+          <div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
+            <div className="mt-32 flex flex-col justify-center md:flex-row">
+              <div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:w-1/2 md:pb-0">
+                <h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
                   GitHub & Slack
                 </h2>
 
-                <p className="sm:text-lg mb-6">
+                <p className="mb-6 sm:text-lg">
                   At the <a href="https://github.com/nrwl/nx">Nx GitHub repo</a>
                   , you can file issues or contribute code back to the project.
                 </p>
-                <p className="sm:text-lg mb-6">
+                <p className="mb-6 sm:text-lg">
                   <a
-                    className="underline cursor-pointer"
+                    className="cursor-pointer underline"
                     target="_blank"
                     title="Join the Nx Community Slack"
                     href="https://go.nrwl.io/join-slack"
@@ -99,14 +99,14 @@ export function Community(props: CommunityProps) {
                   community plugins can be reached there.
                 </p>
 
-                <h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
+                <h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
                   Livestreams & Twitter
                 </h2>
-                <p className="sm:text-lg mb-6">
+                <p className="mb-6 sm:text-lg">
                   The Nx Show takes place every second and fourth Monday, from
                   1:00 - 2:00 PM EST on the{' '}
                   <a
-                    className="underline cursor-pointer"
+                    className="cursor-pointer underline"
                     target="_blank"
                     href="https://www.youtube.com/nrwl_io"
                     rel="noreferrer"
@@ -115,7 +115,7 @@ export function Community(props: CommunityProps) {
                   </a>
                   . Info about upcoming sessions is shared on the{' '}
                   <a
-                    className="underline cursor-pointer"
+                    className="cursor-pointer underline"
                     target="_blank"
                     href="https://twitter.com/NxDevTools"
                     rel="noreferrer"
@@ -125,7 +125,7 @@ export function Community(props: CommunityProps) {
                   Twitter account and the Nrwl+Nx Newsletter. You can find past
                   live-streams on the{' '}
                   <a
-                    className="underline cursor-pointer"
+                    className="cursor-pointer underline"
                     target="_blank"
                     rel="noreferrer"
                     href="https://www.youtube.com/watch?v=JS3m1wIwRBg&list=PLakNactNC1dH8LCp2mvx5lbO6maNrlBVN"
@@ -135,13 +135,13 @@ export function Community(props: CommunityProps) {
                   .
                 </p>
 
-                <p className="sm:text-lg mb-6">
+                <p className="mb-6 sm:text-lg">
                   In each session, members of the Nx core team answer your
                   questions, help get you up and running with Nx, and address
                   particular challenges. If you have a question or topic you’d
                   like to see covered during The Nx Show, you can{' '}
                   <a
-                    className="underline cursor-pointer"
+                    className="cursor-pointer underline"
                     target="_blank"
                     rel="noreferrer"
                     aria-label="Nx Show Questions and Suggestions Form"
@@ -152,10 +152,10 @@ export function Community(props: CommunityProps) {
                   </a>
                 </p>
 
-                <p className="sm:text-lg mb-6">
+                <p className="mb-6 sm:text-lg">
                   For the latest news about Nx,{' '}
                   <a
-                    className="underline cursor-pointer"
+                    className="cursor-pointer underline"
                     target="_blank"
                     rel="noreferrer"
                     href="https://twitter.com/NxDevTools"
@@ -165,13 +165,13 @@ export function Community(props: CommunityProps) {
                   .
                 </p>
 
-                <h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
+                <h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
                   We also have a newsletter
                 </h2>
-                <p className="sm:text-lg mb-6">
+                <p className="mb-6 sm:text-lg">
                   You can also{' '}
                   <a
-                    className="underline cursor-pointer"
+                    className="cursor-pointer underline"
                     target="_blank"
                     rel="noreferrer"
                     href="https://go.nrwl.io/nx-newsletter"
@@ -184,7 +184,7 @@ export function Community(props: CommunityProps) {
                   resources, and additional Nx content.
                 </p>
               </div>
-              <div className="w-full md:w-1/2 flex flex-col justify-between items-start md:pl-16 md:pb-0 pb-10 mt-8 md:mt-0">
+              <div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:w-1/2 md:pl-16 md:pb-0">
                 <Image
                   src="/images/community.svg"
                   width={555}
@@ -195,22 +195,22 @@ export function Community(props: CommunityProps) {
             </div>
           </div>
           {/*How to plugin*/}
-          <div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
-            <div className="my-32 flex flex-col  md:flex-row items-start justify-center">
-              <div className="w-full lg:w-2/5 flex flex-col justify-between items-start md:pb-0 pb-10 mt-8 md:mt-0">
-                <h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
+          <div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
+            <div className="my-32 flex flex-col  items-start justify-center md:flex-row">
+              <div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:pb-0 lg:w-2/5">
+                <h2 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
                   Community plugin
                 </h2>
-                <p className="sm:text-lg mb-6">
+                <p className="mb-6 sm:text-lg">
                   Core Nx plugins are created and maintained by the Nx team at
                   Nrwl and you can see all the available plugins when you run
                   the{' '}
-                  <code className="text-sm bg-gray-50 text-gray-600 font-mono leading-6 px-2 py-1 border border-gray-200 rounded">
+                  <code className="rounded border border-gray-200 bg-gray-50 px-2 py-1 font-mono text-sm leading-6 text-gray-600">
                     nx list
                   </code>{' '}
                   command in your workspace.
                 </p>
-                <p className="sm:text-lg mb-6">
+                <p className="mb-6 sm:text-lg">
                   <b>The community plugins listed below</b> are created and
                   maintained by members of the Nx community, will allow you to
                   use the full power of the workspace while using different
@@ -219,26 +219,26 @@ export function Community(props: CommunityProps) {
                 <div className="mb-6">
                   <a
                     href="#community-plugin-list"
-                    className="underline cursor-pointer"
+                    className="cursor-pointer underline"
                   >
                     Check the community plugins right now!
                   </a>
                 </div>
-                <h3 className="text-xl leading-none font-bold text-gray-800 tracking-tight mb-4">
+                <h3 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800">
                   How to Install
                 </h3>
-                <p className="sm:text-lg mb-6">
+                <p className="mb-6 sm:text-lg">
                   Each of the plugins listed below have a yarn and an npm icon.
                   Clicking on either of these copies the relevant command to
                   install the dependency for your project.
                 </p>
               </div>
-              <div className="w-full lg:w-3/5 flex flex-col justify-between items-start md:pl-16 pb-10 mt-8 md:mt-0">
-                <div className="py-4 px-6 w-full bg-gray-50 border border-gray-100">
-                  <h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
+              <div className="mt-8 flex w-full flex-col items-start justify-between pb-10 md:mt-0 md:pl-16 lg:w-3/5">
+                <div className="w-full border border-gray-100 bg-gray-50 py-4 px-6">
+                  <h3 className="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 sm:text-2xl lg:text-2xl">
                     How to Create Your Own
                   </h3>
-                  <p className="sm:text-lg mb-6">
+                  <p className="mb-6 sm:text-lg">
                     Get started with building your own plugin!
                   </p>
                   <iframe
@@ -256,8 +256,8 @@ export function Community(props: CommunityProps) {
             </div>
           </div>
           {/*Call out*/}
-          <div className="text-white bg-blue-nx-base">
-            <div className="max-w-7xl mx-auto my-12 py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
+          <div className="bg-blue-nx-base text-white">
+            <div className="mx-auto my-12 max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
               <h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
                 <span className="block">Ready to dive in?</span>
                 <span className="block text-gray-200">
@@ -267,7 +267,7 @@ export function Community(props: CommunityProps) {
               <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
                 <div className="inline-flex rounded-md shadow">
                   <Link href="/getting-started/intro">
-                    <a className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-nx-base bg-white">
+                    <a className="text-blue-nx-base inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium">
                       Get started with Nx
                     </a>
                   </Link>
@@ -276,26 +276,26 @@ export function Community(props: CommunityProps) {
             </div>
           </div>
           {/*Plugins*/}
-          <div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
-            <div className="my-32 flex sm:flex-row flex-col justify-center">
-              <div className="w-full lg:w-3/5 py-6 mt-8">
+          <div className="max-w-screen mx-auto px-5 py-5 xl:max-w-screen-xl">
+            <div className="my-32 flex flex-col justify-center sm:flex-row">
+              <div className="mt-8 w-full py-6 lg:w-3/5">
                 <h2
                   id="community-plugin-list"
-                  className="text-xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4"
+                  className="mb-4 text-xl font-extrabold leading-none tracking-tight text-gray-900 sm:text-2xl lg:text-3xl"
                 >
                   Community Plugins Directory
                 </h2>
               </div>
-              <div className="w-full lg:w-2/5 py-6 mt-8 text-right">
+              <div className="mt-8 w-full py-6 text-right lg:w-2/5">
                 <a
                   href="/nx-plugin/overview#listing-your-nx-plugin"
-                  className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-nx-base"
+                  className="bg-blue-nx-base inline-flex items-center justify-center rounded-md border border-transparent px-5 py-3 text-base font-medium text-white"
                 >
                   Add your Nx plugin to the list!
                 </a>
               </div>
             </div>
-            <div className="my-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <div className="my-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
               {props.pluginList.map((plugin) => (
                 <PluginCard
                   key={plugin.name}
diff --git a/nx-dev/nx-dev/pages/conf.tsx b/nx-dev/nx-dev/pages/conf.tsx
index cce241a086..763d953bd8 100644
--- a/nx-dev/nx-dev/pages/conf.tsx
+++ b/nx-dev/nx-dev/pages/conf.tsx
@@ -42,19 +42,19 @@ export function ConfPage() {
         }}
       >
         <div
-          className="w-full overflow-hidden bg-blue-nx-base"
+          className="bg-blue-nx-base w-full overflow-hidden"
           style={{
             background:
               "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Crect width='2' height='2' fill='white' fill-opacity='0.15'/%3E%3C/svg%3E\")",
           }}
         >
           {/*INTRO*/}
-          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 text-white">
-            <div className="mt-24 py-48 flex lg:flex-row flex-col items-start">
-              <div className="w-full lg:w-2/5 flex flex-col lg:pb-0 pb-10 mt-8 lg:mt-0 relative">
+          <div className="mx-auto max-w-screen-lg px-5 py-5 text-white xl:max-w-screen-xl">
+            <div className="mt-24 flex flex-col items-start py-48 lg:flex-row">
+              <div className="relative mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-2/5 lg:pb-0">
                 <svg
                   id="nx-conf-glow"
-                  className="z-0 absolute w-full"
+                  className="absolute z-0 w-full"
                   style={{
                     transform: 'scale(1.5, 1.5) translate3d(-12%, -25%, 0)',
                   }}
@@ -143,7 +143,7 @@ export function ConfPage() {
                 </svg>
                 <svg
                   id="nx-conf-logo"
-                  className="z-10 -left-60 -top-60 w-full"
+                  className="-left-60 -top-60 z-10 w-full"
                   role="img"
                   width="446"
                   height="86"
@@ -179,16 +179,16 @@ export function ConfPage() {
                   />
                 </svg>
               </div>
-              <div className="w-full lg:w-3/5 flex flex-col lg:pl-16 lg:pb-0 pb-10 mt-8 lg:mt-0 z-50">
+              <div className="z-50 mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pl-16 lg:pb-0">
                 <h2 className="my-6">
-                  <div className="inline-block py-4 px-6 text-xl sm:text-2xl lg:text-2xl leading-none font-input-mono font-extrabold tracking-tight mb-4 bg-blue-nx-dark rounded-md">
+                  <div className="font-input-mono bg-blue-nx-dark mb-4 inline-block rounded-md py-4 px-6 text-xl font-extrabold leading-none tracking-tight sm:text-2xl lg:text-2xl">
                     <span className="hidden">
                       Announcing the first ever Nx Conf on{' '}
                     </span>{' '}
                     September 16 & 17, 2021
                   </div>
                 </h2>
-                <p className="sm:text-lg mb-6">
+                <p className="mb-6 sm:text-lg">
                   Nx Conf is a new, online & free-to-attend, 2-day conference
                   featuring members of the Nx team and community. Watch us as we
                   share our ideas and expertise about making development faster,
@@ -276,15 +276,15 @@ export function ConfPage() {
                   Grab your FREE Nx Conf ticket and save your workshop seat
                   today!
                 </p> */}
-                <div className="flex mt-16">
+                <div className="mt-16 flex">
                   <a
-                    className="flex items-center justify-end font-input-mono group w-full sm:text-2xl"
+                    className="font-input-mono group flex w-full items-center justify-end sm:text-2xl"
                     href="https://www.youtube.com/watch?v=oG2QbFquraA"
                   >
                     <span className="group-hover:underline">Watch Day 1</span>
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      className="ml-1 h-8 w-8 transform-gpu transition ease-out duration-200 group-hover:translate-x-2 "
+                      className="ml-1 h-8 w-8 transform-gpu transition duration-200 ease-out group-hover:translate-x-2 "
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -298,13 +298,13 @@ export function ConfPage() {
                     </svg>
                   </a>
                   <a
-                    className="flex items-center justify-end font-input-mono group w-full sm:text-2xl"
+                    className="font-input-mono group flex w-full items-center justify-end sm:text-2xl"
                     href="https://www.youtube.com/watch?v=hlGOaGDsWKg"
                   >
                     <span className="group-hover:underline">Watch Day 2</span>
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      className="ml-1 h-8 w-8 transform-gpu transition ease-out duration-200 group-hover:translate-x-2 "
+                      className="ml-1 h-8 w-8 transform-gpu transition duration-200 ease-out group-hover:translate-x-2 "
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -324,9 +324,9 @@ export function ConfPage() {
         </div>
         <div className="w-full overflow-hidden">
           {/*NAVIGATION*/}
-          <div className="hidden md:block border-t border-b border-gray-600">
-            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
-              <div className="md:grid grid-cols-7 items-center text-center font-input-mono divide-x divide-gray-600">
+          <div className="hidden border-t border-b border-gray-600 md:block">
+            <div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">
+              <div className="font-input-mono grid-cols-7 items-center divide-x divide-gray-600 text-center md:grid">
                 <div className="p-8">
                   <svg
                     id="nx-conf-logo"
@@ -365,22 +365,22 @@ export function ConfPage() {
                   </svg>
                 </div>
                 <Link href="#agenda">
-                  <a className="p-8 hover:bg-blue-nx-dark transition cursor-pointer">
+                  <a className="hover:bg-blue-nx-dark cursor-pointer p-8 transition">
                     Agenda
                   </a>
                 </Link>
                 <Link href="#speakers">
-                  <a className="p-8 hover:bg-blue-nx-dark transition cursor-pointer">
+                  <a className="hover:bg-blue-nx-dark cursor-pointer p-8 transition">
                     Speakers
                   </a>
                 </Link>
                 <Link href="#workshop">
-                  <a className="p-8 hover:bg-blue-nx-dark transition cursor-pointer">
+                  <a className="hover:bg-blue-nx-dark cursor-pointer p-8 transition">
                     Workshop
                   </a>
                 </Link>
                 <Link href="#sponsors">
-                  <a className="p-8 hover:bg-blue-nx-dark transition cursor-pointer">
+                  <a className="hover:bg-blue-nx-dark cursor-pointer p-8 transition">
                     Sponsors
                   </a>
                 </Link>
@@ -389,9 +389,9 @@ export function ConfPage() {
           </div>
 
           {/*AGENDA*/}
-          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 text-white">
+          <div className="mx-auto max-w-screen-lg px-5 py-5 text-white xl:max-w-screen-xl">
             <div className="mt-24">
-              <h2 id="agenda" className="my-20 text-3xl font-input-mono">
+              <h2 id="agenda" className="font-input-mono my-20 text-3xl">
                 Agenda (EST)
               </h2>
             </div>
@@ -399,19 +399,19 @@ export function ConfPage() {
           <ConfSchedule />
 
           {/*SPEAKERS*/}
-          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 text-white">
+          <div className="mx-auto max-w-screen-lg px-5 py-5 text-white xl:max-w-screen-xl">
             <div className="mt-24">
-              <h2 id="speakers" className="my-20 text-3xl font-input-mono">
+              <h2 id="speakers" className="font-input-mono my-20 text-3xl">
                 Speakers
               </h2>
             </div>
           </div>
           <ConfSpeakers />
 
-          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 text-white">
+          <div className="mx-auto max-w-screen-lg px-5 py-5 text-white xl:max-w-screen-xl">
             {/*WORKSHOP*/}
             <div className="mt-24">
-              <h2 id="workshop" className="my-20 text-3xl font-input-mono">
+              <h2 id="workshop" className="font-input-mono my-20 text-3xl">
                 Workshop
               </h2>
             </div>
@@ -419,16 +419,16 @@ export function ConfPage() {
           <ConfWorkshop />
 
           {/*SPONSORS*/}
-          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 text-white">
+          <div className="mx-auto max-w-screen-lg px-5 py-5 text-white xl:max-w-screen-xl">
             <div className="mt-24">
-              <h2 id="sponsors" className="my-20 text-3xl font-input-mono">
+              <h2 id="sponsors" className="font-input-mono my-20 text-3xl">
                 Sponsors
               </h2>
             </div>
           </div>
           <ConfSponsors />
 
-          <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5 text-white">
+          <div className="mx-auto max-w-screen-lg px-5 py-5 text-white xl:max-w-screen-xl">
             {/*SPONSORS*/}
             {/*<div className="my-24">*/}
             {/*  <h2 id="sponsors" className="my-20 text-3xl font-input-mono">*/}
diff --git a/nx-dev/nx-dev/pages/index.tsx b/nx-dev/nx-dev/pages/index.tsx
index 69869e2ff4..5bd7b2a1a4 100644
--- a/nx-dev/nx-dev/pages/index.tsx
+++ b/nx-dev/nx-dev/pages/index.tsx
@@ -55,36 +55,36 @@ export function Index() {
           {/*INTRO COMPONENT*/}
           <header
             id="animated-background"
-            className="bg-blue-nx-base text-white transform-gpu lg:bg-contain bg-clip-border bg-origin-border bg-right bg-no-repeat"
+            className="bg-blue-nx-base transform-gpu bg-clip-border bg-right bg-no-repeat bg-origin-border text-white lg:bg-contain"
             style={{
               backgroundImage: 'url(/images/background/hero-bg-large.svg)',
             }}
           >
-            <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 py-4 md:py-18">
-              <div className="my-8 md:my-18 2xl:my-24 flex  flex-col items-center justify-center">
-                <div className="w-full text-center flex flex-col">
-                  <h1 className="text-4xl sm:text-5xl lg:text-5xl leading-none font-extrabold tracking-tight sm:mt-10 mb-8 sm:mt-14 sm:mb-10">
+            <div className="md:py-18 mx-auto max-w-screen-lg px-4 py-4 xl:max-w-screen-xl">
+              <div className="md:my-18 my-8 flex flex-col  items-center justify-center 2xl:my-24">
+                <div className="flex w-full flex-col text-center">
+                  <h1 className="mb-8 text-4xl font-extrabold leading-none tracking-tight sm:mt-10 sm:mt-14 sm:mb-10 sm:text-5xl lg:text-5xl">
                     <span className="block lg:inline">
                       Smart, Fast and Extensible
                     </span>{' '}
                     Build System
                   </h1>
-                  <h2 className="max-w-2xl mx-auto text-2xl font-semibold mb-10 sm:mb-11">
+                  <h2 className="mx-auto mb-10 max-w-2xl text-2xl font-semibold sm:mb-11">
                     Next generation build system with first class monorepo
                     support and powerful integrations.
                   </h2>
                 </div>
                 <div
                   aria-hidden="true"
-                  className="max-w-2xl mx-auto hidden sm:flex w-full flex-col justify-between items-center lg:pb-0 pb-10 mt-8 lg:mt-0"
+                  className="mx-auto mt-8 hidden w-full max-w-2xl flex-col items-center justify-between pb-10 sm:flex lg:mt-0 lg:pb-0"
                 >
                   <NpxCreateNxWorkspace />
                 </div>
-                <div className="my-14 flex flex-wrap sm:space-x-4 text-center">
+                <div className="my-14 flex flex-wrap text-center sm:space-x-4">
                   <Link href="#getting-started">
                     <a
                       title="Start using Nx by creating a workspace"
-                      className="w-full sm:w-auto flex-none bg-white text-blue-nx-base hover:text-blue-nx-dark hover:bg-gray-100 text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded-md focus:ring-2 focus:ring-offset-2 focus:ring-offset-white transition"
+                      className="text-blue-nx-base hover:text-blue-nx-dark w-full flex-none rounded-md border border-transparent bg-white py-3 px-6 text-lg font-semibold leading-6 transition hover:bg-gray-100 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white sm:w-auto"
                     >
                       Create Nx Workspace
                     </a>
@@ -93,7 +93,7 @@ export function Index() {
                   <Link href="/migration/adding-to-monorepo">
                     <a
                       title="Add Nx to existing Monorepo"
-                      className="mt-4 md:mt-0 w-full sm:w-auto flex-none bg-white text-blue-nx-base hover:text-blue-nx-dark hover:bg-gray-100 text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded-md focus:ring-2 focus:ring-offset-2 focus:ring-offset-white transition"
+                      className="text-blue-nx-base hover:text-blue-nx-dark mt-4 w-full flex-none rounded-md border border-transparent bg-white py-3 px-6 text-lg font-semibold leading-6 transition hover:bg-gray-100 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white sm:w-auto md:mt-0"
                     >
                       Add Nx to Monorepo
                     </a>
@@ -103,7 +103,7 @@ export function Index() {
             </div>
           </header>
 
-          <div className="hidden md:block bg-gray-50 border-b border-gray-100">
+          <div className="hidden border-b border-gray-100 bg-gray-50 md:block">
             {/*COMPANIES*/}
             <NxUsersShowcase />
           </div>
@@ -111,7 +111,7 @@ export function Index() {
           {/*NX FEATURES*/}
           <div
             id="features"
-            className="relative bg-gray-50 py-12 overflow-hidden"
+            className="relative overflow-hidden bg-gray-50 py-12"
           >
             {/*MONOREPO*/}
             <MonorepoFeatures />
@@ -128,7 +128,7 @@ export function Index() {
             <EcosystemFeatures />
           </div>
 
-          <div className="bg-gray-50 relative transform-gpu">
+          <div className="relative transform-gpu bg-gray-50">
             <img
               className="w-full"
               src="/images/background/hero-bg-large-3.svg"
@@ -141,17 +141,17 @@ export function Index() {
           {/*NX FEATURE DETAILS*/}
           <article
             id="features-in-depth"
-            className="relative bg-gray-50 pb-32 overflow-hidden"
+            className="relative overflow-hidden bg-gray-50 pb-32"
           >
-            <header className="max-w-prose mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
+            <header className="mx-auto max-w-prose py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
               <div className="text-center">
-                <h1 className="text-base font-semibold text-blue-nx-base tracking-wide uppercase">
+                <h1 className="text-blue-nx-base text-base font-semibold uppercase tracking-wide">
                   Monorepo done right
                 </h1>
                 <p className="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
                   Works for Projects of Any Size
                 </p>
-                <p className="max-w-xl mt-5 mx-auto text-xl text-gray-500">
+                <p className="mx-auto mt-5 max-w-xl text-xl text-gray-500">
                   Whether you have one project or one thousand, Nx will keep
                   your CI fast and your workspace maintainable.
                 </p>
@@ -176,15 +176,15 @@ export function Index() {
             id="getting-started"
             className="relative bg-white pt-16 sm:pt-24 lg:pt-32"
           >
-            <header className="mx-auto max-w-prose px-4 text-center sm:px-6 sm:max-w-3xl lg:px-8">
+            <header className="mx-auto max-w-prose px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8">
               <div>
-                <h1 className="text-base font-semibold tracking-wider text-blue-nx-base uppercase">
+                <h1 className="text-blue-nx-base text-base font-semibold uppercase tracking-wider">
                   Getting Started <span className="sr-only">With Nx</span>
                 </h1>
-                <p className="mt-2 text-4xl font-extrabold text-gray-800 tracking-tight sm:text-6xl">
+                <p className="mt-2 text-4xl font-extrabold tracking-tight text-gray-800 sm:text-6xl">
                   TypeScript, React, Angular, Node and more
                 </p>
-                <p className="mt-5 max-w-prose mx-auto text-xl text-gray-500">
+                <p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">
                   Nx has first-class support for many frontend and backend
                   technologies, so its documentation comes in multiple flavours.
                 </p>
@@ -196,13 +196,13 @@ export function Index() {
 
           <div
             id="learning-materials"
-            className="mt-28 max-w-prose mx-auto py-16 px-4 sm:py-18 sm:px-6 lg:px-8"
+            className="sm:py-18 mx-auto mt-28 max-w-prose py-16 px-4 sm:px-6 lg:px-8"
           >
             <div className="text-center">
               <p className="mt-1 text-4xl font-extrabold text-gray-800 sm:text-5xl sm:tracking-tight lg:text-6xl">
                 Free Courses and Videos
               </p>
-              <p className="max-w-xl mt-5 mx-auto text-xl text-gray-500">
+              <p className="mx-auto mt-5 max-w-xl text-xl text-gray-500">
                 For visual learners we have created high-quality courses walking
                 you through building real-world examples step by step.
               </p>
@@ -220,7 +220,7 @@ export function Index() {
             <NxPlaybook />
           </div>
 
-          <div className="bg-white relative transform-gpu">
+          <div className="relative transform-gpu bg-white">
             <img
               className="w-full"
               loading="lazy"
@@ -232,15 +232,15 @@ export function Index() {
 
           {/*COMMUNITY*/}
           <article id="community" className="bg-white">
-            <div className="max-w-prose mx-auto py-16 px-4 sm:py-18 sm:px-6 lg:px-8">
+            <div className="sm:py-18 mx-auto max-w-prose py-16 px-4 sm:px-6 lg:px-8">
               <div className="text-center">
-                <h1 className="text-base font-semibold text-gray-600 tracking-wide uppercase">
+                <h1 className="text-base font-semibold uppercase tracking-wide text-gray-600">
                   Community
                 </h1>
                 <p className="mt-1 text-4xl font-extrabold text-gray-800 sm:text-5xl sm:tracking-tight lg:text-6xl">
                   Used by Popular Open Source Projects
                 </p>
-                <p className="max-w-xl mt-5 mx-auto text-xl text-gray-500">
+                <p className="mx-auto mt-5 max-w-xl text-xl text-gray-500">
                   Nx works equally well for the teams building apps and for the
                   communities building open source libraries and tools.
                 </p>
diff --git a/nx-dev/ui-commands/src/lib/inline-command.tsx b/nx-dev/ui-commands/src/lib/inline-command.tsx
index c3dd93a90f..6804f45a30 100644
--- a/nx-dev/ui-commands/src/lib/inline-command.tsx
+++ b/nx-dev/ui-commands/src/lib/inline-command.tsx
@@ -37,10 +37,10 @@ export function InlineCommand({
       >
         <button
           type="button"
-          className="sm:max-w-full w-full text-sm flex-none bg-white text-gray-400 hover:text-gray-800 font-input-mono leading-6 py-1 sm:px-3 border border-gray-300 rounded-md flex items-center justify-center space-x-2 sm:space-x-4 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-300 focus:outline-none transition-colors duration-180"
+          className="font-input-mono duration-180 flex w-full flex-none items-center justify-center space-x-2 rounded-md border border-gray-300 bg-white py-1 text-sm leading-6 text-gray-400 transition-colors hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-white sm:max-w-full sm:space-x-4 sm:px-3"
         >
-          <span className="overflow-auto flex items-center text-gray-800">
-            <span className="hidden sm:inline text-gray-500" aria-hidden="true">
+          <span className="flex items-center overflow-auto text-gray-800">
+            <span className="hidden text-gray-500 sm:inline" aria-hidden="true">
               $
             </span>
             <SyntaxHighlighter
diff --git a/nx-dev/ui-common/src/lib/footer.tsx b/nx-dev/ui-common/src/lib/footer.tsx
index 91599d1af6..94ce4ddc79 100644
--- a/nx-dev/ui-common/src/lib/footer.tsx
+++ b/nx-dev/ui-common/src/lib/footer.tsx
@@ -119,9 +119,9 @@ export function Footer({ useDarkBackground }: FooterProps) {
       <h2 id="footer-heading" className="sr-only">
         Footer
       </h2>
-      <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
         <div className="xl:grid xl:grid-cols-3 xl:gap-8">
-          <div className="text-gray-500 space-y-4 xl:col-span-1">
+          <div className="space-y-4 text-gray-500 xl:col-span-1">
             <svg
               className="h-14 subpixel-antialiased"
               role="img"
@@ -151,10 +151,10 @@ export function Footer({ useDarkBackground }: FooterProps) {
               ))}
             </div>
           </div>
-          <div className="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
+          <div className="mt-12 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
             <div className="md:grid md:grid-cols-2 md:gap-8">
               <div>
-                <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
+                <h3 className="text-sm font-semibold uppercase tracking-wider text-gray-400">
                   Resources
                 </h3>
                 <ul role="list" className="mt-4 space-y-4">
@@ -177,7 +177,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
                 </ul>
               </div>
               <div className="mt-12 md:mt-0">
-                <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
+                <h3 className="text-sm font-semibold uppercase tracking-wider text-gray-400">
                   Help
                 </h3>
                 <ul role="list" className="mt-4 space-y-4">
@@ -202,7 +202,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
             </div>
             <div className="md:grid md:grid-cols-2 md:gap-8">
               <div>
-                <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
+                <h3 className="text-sm font-semibold uppercase tracking-wider text-gray-400">
                   Community
                 </h3>
                 <ul role="list" className="mt-4 space-y-4">
@@ -225,7 +225,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
                 </ul>
               </div>
               <div className="mt-12 md:mt-0">
-                <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
+                <h3 className="text-sm font-semibold uppercase tracking-wider text-gray-400">
                   Solutions
                 </h3>
                 <ul role="list" className="mt-4 space-y-4">
@@ -255,7 +255,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
             &copy; 2022 made with{' '}
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              className="-mt-0.5 h-5 w-5 inline"
+              className="-mt-0.5 inline h-5 w-5"
               viewBox="0 0 20 20"
               fill="currentColor"
             >
@@ -269,7 +269,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
             <Link href="https://nrwl.io/?utm_source=nx.dev">
               <a target="_blank" rel="nofollow">
                 <svg
-                  className="-mt-0.5 ml-0.5 w-14 h-auto inline"
+                  className="-mt-0.5 ml-0.5 inline h-auto w-14"
                   role="img"
                   viewBox="0 0 24 24"
                   xmlns="http://www.w3.org/2000/svg"
diff --git a/nx-dev/ui-common/src/lib/header.tsx b/nx-dev/ui-common/src/lib/header.tsx
index 2c0130f509..430dd03684 100644
--- a/nx-dev/ui-common/src/lib/header.tsx
+++ b/nx-dev/ui-common/src/lib/header.tsx
@@ -13,11 +13,11 @@ export function Header(props: HeaderProps) {
   return (
     <div
       className={cx(
-        'h-16 px-5 py-5 flex items-center justify-between print:hidden',
+        'flex h-16 items-center justify-between px-5 py-5 print:hidden',
         props.useDarkBackground ? 'bg-blue-nx-dark' : 'bg-blue-nx-base'
       )}
     >
-      <div className="flex items-center justify-between w-full max-w-screen-xl mx-auto sm:space-x-10">
+      <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between sm:space-x-10">
         {/*LOGO*/}
         <div className="flex items-center">
           <a href="/" className="flex items-center">
@@ -58,14 +58,14 @@ export function Header(props: HeaderProps) {
         {/*SEARCH*/}
         <div className="inline">{!!showSearch ? <AlgoliaSearch /> : null}</div>
         {/*NAVIGATION*/}
-        <div className="text-sm flex-shrink-0">
-          <nav className="flex items-justified justify-center space-x-1">
+        <div className="flex-shrink-0 text-sm">
+          <nav className="items-justified flex justify-center space-x-1">
             <h2 className="sr-only">Main navigation</h2>
             <Link href="/getting-started/intro">
               <a
                 title="Check Nx documentation"
                 className={cx(
-                  'px-3 py-2 text-white leading-tight',
+                  'px-3 py-2 leading-tight text-white',
                   !!props.isDocViewer ? 'font-bold' : ''
                 )}
               >
@@ -75,7 +75,7 @@ export function Header(props: HeaderProps) {
             <Link href="/using-nx/nx-devkit">
               <a
                 title="Check Nx available plugins"
-                className="px-3 py-2 hidden md:inline-flex text-white leading-tight"
+                className="hidden px-3 py-2 leading-tight text-white md:inline-flex"
               >
                 Plugins
               </a>
@@ -83,7 +83,7 @@ export function Header(props: HeaderProps) {
             <Link href="/community">
               <a
                 title="Check Nx community"
-                className="px-3 py-2 hidden md:inline-flex text-white leading-tight"
+                className="hidden px-3 py-2 leading-tight text-white md:inline-flex"
               >
                 Community
               </a>
@@ -91,7 +91,7 @@ export function Header(props: HeaderProps) {
             <Link href="/conf">
               <a
                 title="Check Nx conference"
-                className="px-3 py-2 hidden md:inline-flex text-white leading-tight"
+                className="hidden px-3 py-2 leading-tight text-white md:inline-flex"
               >
                 Nx Conf
               </a>
@@ -102,7 +102,7 @@ export function Header(props: HeaderProps) {
               href="https://nx.app/?utm_source=nx.dev"
               target="_blank"
               rel="noreferrer"
-              className="px-3 py-2 text-white lg:inline-flex leading-tight group relative"
+              className="group relative px-3 py-2 leading-tight text-white lg:inline-flex"
             >
               Nx Cloud
             </a>
@@ -111,7 +111,7 @@ export function Header(props: HeaderProps) {
               href="https://nrwl.io/services/?utm_source=nx.dev"
               target="_blank"
               rel="noreferrer"
-              className="px-3 py-2 text-white hidden lg:inline-flex leading-tight"
+              className="hidden px-3 py-2 leading-tight text-white lg:inline-flex"
             >
               Nx Consulting
             </a>
diff --git a/nx-dev/ui-common/src/lib/npx-create-nx-workspace.tsx b/nx-dev/ui-common/src/lib/npx-create-nx-workspace.tsx
index 39245fb984..2f22d518ef 100644
--- a/nx-dev/ui-common/src/lib/npx-create-nx-workspace.tsx
+++ b/nx-dev/ui-common/src/lib/npx-create-nx-workspace.tsx
@@ -243,22 +243,22 @@ export function NpxCreateNxWorkspaceAnimation({
     <>
       <div
         key={'npx-create-nx-workspace-animation'}
-        className="pt-4 shadow-lg text-gray-200 text-xs font-mono subpixel-antialiased
-              bg-gray-800 pb-6 pt-4 rounded-lg leading-normal max-w-full overflow-hidden h-96 relative"
+        className="relative h-96 max-w-full overflow-hidden rounded-lg bg-gray-800
+              pt-4 pb-6 pt-4 font-mono text-xs leading-normal text-gray-200 subpixel-antialiased shadow-lg"
       >
-        <div className="px-5 top mb-2 flex">
-          <div className="h-3 w-3 bg-red-500 rounded-full" />
-          <div className="ml-2 h-3 w-3 bg-yellow-300 rounded-full" />
-          <div className="ml-2 h-3 w-3 bg-green-500 rounded-full" />
+        <div className="top mb-2 flex px-5">
+          <div className="h-3 w-3 rounded-full bg-red-500" />
+          <div className="ml-2 h-3 w-3 rounded-full bg-yellow-300" />
+          <div className="ml-2 h-3 w-3 rounded-full bg-green-500" />
         </div>
-        <div className="px-5 overflow-y-hidden">
+        <div className="overflow-y-hidden px-5">
           <motion.div initial={{ y: 0 }} animate={wrapper}>
             <div className="mt-4 flex">
               <span className="text-green-nx-base mr-2">/workspace ➜</span>
               <motion.p
                 initial={{ opacity: 0 }}
                 animate={npxCreateNxWorkspace}
-                className="flex-1 typing items-center"
+                className="typing flex-1 items-center"
               >
                 {typing('npx create-nx-workspace ludicrous-narwhals').map(
                   (x) => x
@@ -269,7 +269,7 @@ export function NpxCreateNxWorkspaceAnimation({
               <AnimateSharedLayout>
                 {/*LOADING*/}
                 <motion.div
-                  className="inline-block items-center bg-green-nx-base"
+                  className="bg-green-nx-base inline-block items-center"
                   initial={{ width: '0%', height: '12px' }}
                   animate={firstLoading}
                 />
@@ -289,13 +289,13 @@ export function NpxCreateNxWorkspaceAnimation({
                   </motion.span>
                 </motion.div>
                 <motion.div
-                  className="mt-2 relative"
+                  className="relative mt-2"
                   initial={{ opacity: 0 }}
                   animate={frameworkSelectionAnswerSection}
                 >
                   {/*SELECTION ARROW*/}
                   <motion.div
-                    className="absolute -left-4 top-0 text-green-nx-base"
+                    className="text-green-nx-base absolute -left-4 top-0"
                     initial={{ y: 0 }}
                     animate={frameworkSelectionAnswerSectionArrow}
                   >
@@ -417,13 +417,13 @@ export function NpxCreateNxWorkspaceAnimation({
                   </motion.span>
                 </motion.div>
                 <motion.div
-                  className="mt-2 relative"
+                  className="relative mt-2"
                   initial={{ opacity: 0 }}
                   animate={stylesheetSelectionAnswerSection}
                 >
                   {/*SELECTION ARROW*/}
                   <motion.div
-                    className="absolute -left-4 top-0 text-green-nx-base"
+                    className="text-green-nx-base absolute -left-4 top-0"
                     initial={{ y: 0 }}
                     animate={stylesheetSelectionAnswerSectionArrow}
                   >
@@ -521,13 +521,13 @@ export function NpxCreateNxWorkspaceAnimation({
                   </motion.span>
                 </motion.div>
                 <motion.div
-                  className="mt-2 relative"
+                  className="relative mt-2"
                   initial={{ opacity: 0 }}
                   animate={nxCloudSelectionAnswerSection}
                 >
                   {/*SELECTION ARROW*/}
                   <motion.div
-                    className="absolute -left-4 top-0 text-green-nx-base"
+                    className="text-green-nx-base absolute -left-4 top-0"
                     initial={{ y: 18 }}
                     animate={nxCloudSelectionAnswerSectionArrow}
                   >
@@ -556,7 +556,7 @@ export function NpxCreateNxWorkspaceAnimation({
                   initial={{ opacity: 0 }}
                   animate={creatingNxWorkspace}
                 >
-                  <span className="px-1 py-0.5 bg-green-nx-base">NX</span> Nx is
+                  <span className="bg-green-nx-base px-1 py-0.5">NX</span> Nx is
                   creating your workspace. To make sure the command works
                   reliably in all environments, and that the preset is applied
                   correctly, Nx will run "yarn install" several times. Please
@@ -573,7 +573,7 @@ export function NpxCreateNxWorkspaceAnimation({
                 {/*LOADING*/}
                 <motion.div
                   layout
-                  className="mt-2 items-center bg-green-nx-base"
+                  className="bg-green-nx-base mt-2 items-center"
                   initial={{ width: '0%', height: '12px' }}
                   animate={secondLoading}
                 />
@@ -585,15 +585,15 @@ export function NpxCreateNxWorkspaceAnimation({
                   animate={workpaceReady}
                 >
                   <div>
-                    <span className="px-1 py-0.5 bg-green-nx-base">
+                    <span className="bg-green-nx-base px-1 py-0.5">
                       NX SUCCESS
                     </span>{' '}
                     Nx has successfully created the workspace.
                   </div>
-                  <div className="my-3 w-full h-px bg-gray-100" />
+                  <div className="my-3 h-px w-full bg-gray-100" />
                   <div>
-                    <span className="px-1 py-0.5 bg-green-nx-base">NX</span>
-                    <span className="ml-1 px-1 py-0.5 bg-yellow-500">
+                    <span className="bg-green-nx-base px-1 py-0.5">NX</span>
+                    <span className="ml-1 bg-yellow-500 px-1 py-0.5">
                       NOTE
                     </span>{' '}
                     First time using Nx? Check out this interactive Nx tutorial.
@@ -632,10 +632,10 @@ export function NpxCreateNxWorkspaceAnimation({
           <button
             type="button"
             onClick={() => restartFunction() && sequence()}
-            className="w-full sm:w-auto flex-none bg-gray-800 text-green-nx-base hover:bg-gray-700 text-xs font-normal py-1 px-3 border border-gray-700 rounded-md transition"
+            className="text-green-nx-base w-full flex-none rounded-md border border-gray-700 bg-gray-800 py-1 px-3 text-xs font-normal transition hover:bg-gray-700 sm:w-auto"
           >
             <svg
-              className="inline-flex w-5 h-5 r-2"
+              className="r-2 inline-flex h-5 w-5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -679,15 +679,15 @@ export function NpxCreateNxWorkspace() {
       ) : (
         <div
           key={'npx-create-nx-workspace-animation'}
-          className="pt-4 shadow-lg text-gray-200 text-xs font-mono subpixel-antialiased
-              bg-gray-800 pb-6 pt-4 rounded-lg leading-normal w-full overflow-hidden h-96 relative"
+          className="relative h-96 w-full overflow-hidden rounded-lg bg-gray-800
+              pt-4 pb-6 pt-4 font-mono text-xs leading-normal text-gray-200 subpixel-antialiased shadow-lg"
         >
-          <div className="px-5 top mb-2 flex">
-            <div className="h-3 w-3 bg-red-500 rounded-full" />
-            <div className="ml-2 h-3 w-3 bg-yellow-300 rounded-full" />
-            <div className="ml-2 h-3 w-3 bg-green-500 rounded-full" />
+          <div className="top mb-2 flex px-5">
+            <div className="h-3 w-3 rounded-full bg-red-500" />
+            <div className="ml-2 h-3 w-3 rounded-full bg-yellow-300" />
+            <div className="ml-2 h-3 w-3 rounded-full bg-green-500" />
           </div>
-          <div className="px-5 overflow-y-hidden" />
+          <div className="overflow-y-hidden px-5" />
         </div>
       )}
     </>
diff --git a/nx-dev/ui-common/src/lib/nx-users-showcase.tsx b/nx-dev/ui-common/src/lib/nx-users-showcase.tsx
index 7f03b44f84..6bfc58dd15 100644
--- a/nx-dev/ui-common/src/lib/nx-users-showcase.tsx
+++ b/nx-dev/ui-common/src/lib/nx-users-showcase.tsx
@@ -1,10 +1,10 @@
 export function NxUsersShowcase() {
   return (
     <div className="overflow-hidden py-4 px-4">
-      <div className="mx-auto w-60 top-1 bottom-3 text-center text-xs text-gray-400">
+      <div className="top-1 bottom-3 mx-auto w-60 text-center text-xs text-gray-400">
         Powering leading companies like
       </div>
-      <div id="sponsors-carousel" className="w-full flex column text-gray-400">
+      <div id="sponsors-carousel" className="column flex w-full text-gray-400">
         <div className="flex justify-center">
           <svg className="w-full" viewBox="0 0 160 88" fill="currentColor">
             <path d="M90.9947 24.3067L98.6787 27.3333L90.9947 30.1947V34.2827L104.155 28.9693V25.7L90.9947 20.3867V24.3067Z" />
diff --git a/nx-dev/ui-common/src/lib/plugin-card.tsx b/nx-dev/ui-common/src/lib/plugin-card.tsx
index 023c72a9f4..083b2b77e9 100644
--- a/nx-dev/ui-common/src/lib/plugin-card.tsx
+++ b/nx-dev/ui-common/src/lib/plugin-card.tsx
@@ -22,8 +22,8 @@ export function PluginCard({ name, description, url }: PluginCardProps) {
     };
   }, [copied]);
   return (
-    <div className="w-full flex flex-col py-8 px-6 border border-gray-100 rounded-md">
-      <h3 className="text-lg font-semibold leading-tight mb-4">
+    <div className="flex w-full flex-col rounded-md border border-gray-100 py-8 px-6">
+      <h3 className="mb-4 text-lg font-semibold leading-tight">
         <a
           href={url}
           target="_blank"
@@ -32,7 +32,7 @@ export function PluginCard({ name, description, url }: PluginCardProps) {
           className="flex items-center"
         >
           <svg
-            className="mr-3 w-5 h-5 text-gray-800"
+            className="mr-3 h-5 w-5 text-gray-800"
             role="img"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
@@ -43,7 +43,7 @@ export function PluginCard({ name, description, url }: PluginCardProps) {
           {name}
         </a>
       </h3>
-      <p className="sm:text-lg mb-6">{description}</p>
+      <p className="mb-6 sm:text-lg">{description}</p>
     </div>
   );
 }
diff --git a/nx-dev/ui-common/src/lib/selector.tsx b/nx-dev/ui-common/src/lib/selector.tsx
index 8b4053ec46..85fa33ac0b 100644
--- a/nx-dev/ui-common/src/lib/selector.tsx
+++ b/nx-dev/ui-common/src/lib/selector.tsx
@@ -18,11 +18,11 @@ export function Selector<T = {}>(props: SelectorProps<T>) {
         {({ open }) => (
           <>
             <div className="relative mt-1">
-              <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white rounded border border-gray-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-blue-300 focus-visible:ring-offset-2 focus-visible:border-blue-500 sm:text-sm font-medium">
+              <Listbox.Button className="relative w-full cursor-pointer rounded border border-gray-200 bg-white 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">
                 <span className="block truncate">{props.selected.label}</span>
-                <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                   <SelectorIcon
-                    className="w-5 h-5 text-gray-500"
+                    className="h-5 w-5 text-gray-500"
                     aria-hidden="true"
                   />
                 </span>
@@ -39,7 +39,7 @@ export function Selector<T = {}>(props: SelectorProps<T>) {
               >
                 <Listbox.Options
                   static
-                  className="absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-sm shadow-md max-h-60 focus:outline-none sm:text-sm z-10"
+                  className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-sm bg-white py-1 text-base shadow-md focus:outline-none sm:text-sm"
                 >
                   {props.items.map((item, personIdx) => (
                     <Listbox.Option
@@ -47,16 +47,16 @@ export function Selector<T = {}>(props: SelectorProps<T>) {
                       className={({ active }) =>
                         `${
                           active
-                            ? 'text-white bg-blue-nx-base'
+                            ? 'bg-blue-nx-base text-white'
                             : 'text-gray-500'
                         }
-                          cursor-pointer select-none relative py-2 pl-10 pr-4`
+                          relative cursor-pointer select-none py-2 pl-10 pr-4`
                       }
                       value={item}
                     >
                       {({ selected, active }) => (
                         <>
-                          <span className={'font-medium block truncate'}>
+                          <span className={'block truncate font-medium'}>
                             {item.label}
                           </span>
                           {selected || item.value === props.selected.value ? (
@@ -67,7 +67,7 @@ export function Selector<T = {}>(props: SelectorProps<T>) {
                                 absolute inset-y-0 left-0 flex items-center pl-3`}
                             >
                               <CheckIcon
-                                className="w-5 h-5"
+                                className="h-5 w-5"
                                 aria-hidden="true"
                               />
                             </span>
diff --git a/nx-dev/ui-common/src/lib/testimonials.tsx b/nx-dev/ui-common/src/lib/testimonials.tsx
index 16b9b309d5..e770200d5c 100644
--- a/nx-dev/ui-common/src/lib/testimonials.tsx
+++ b/nx-dev/ui-common/src/lib/testimonials.tsx
@@ -3,13 +3,13 @@ import React from 'react';
 export function Testimonials() {
   return (
     <section className="bg-blue-nx-base">
-      <div className="max-w-7xl mx-auto md:grid md:grid-cols-2 md:px-6 lg:px-8">
-        <div className="py-12 px-4 sm:px-6 md:flex md:flex-col md:py-16 md:pl-0 md:pr-10 md:border-r md:border-blue-nx-dark lg:pr-16">
+      <div className="mx-auto max-w-7xl md:grid md:grid-cols-2 md:px-6 lg:px-8">
+        <div className="md:border-blue-nx-dark py-12 px-4 sm:px-6 md:flex md:flex-col md:border-r md:py-16 md:pl-0 md:pr-10 lg:pr-16">
           <div className="md:flex-shrink-0">
-            <div className="mx-auto flex items-center text-white font-mono tracking-wider">
+            <div className="mx-auto flex items-center font-mono tracking-wider text-white">
               <svg
                 role="img"
-                className="w-8 h-8"
+                className="h-8 w-8"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
@@ -19,10 +19,10 @@ export function Testimonials() {
               <span className="ml-2 font-bold ">TypeScript-ESLint</span>
             </div>
           </div>
-          <blockquote className="mt-6 md:flex-grow md:flex md:flex-col">
+          <blockquote className="mt-6 md:flex md:flex-grow md:flex-col">
             <div className="relative text-lg font-medium text-white md:flex-grow">
               <svg
-                className="hidden md:flex absolute top-0 left-0 transform -translate-x-4 -translate-y-4 h-8 w-8 text-green-nx-base"
+                className="text-green-nx-base absolute top-0 left-0 hidden h-8 w-8 -translate-x-4 -translate-y-4 transform md:flex"
                 fill="currentColor"
                 viewBox="0 0 32 32"
                 aria-hidden="true"
@@ -35,7 +35,7 @@ export function Testimonials() {
             </div>
             <footer className="mt-8">
               <div className="flex items-start">
-                <div className="flex-shrink-0 inline-flex rounded-full border-2 border-white">
+                <div className="inline-flex flex-shrink-0 rounded-full border-2 border-white">
                   <img
                     className="h-12 w-12 rounded-full"
                     src="https://avatars.githubusercontent.com/u/900523?v=4"
@@ -54,11 +54,11 @@ export function Testimonials() {
             </footer>
           </blockquote>
         </div>
-        <div className="py-12 px-4 border-t-2 border-blue-nx-dark sm:px-6 md:py-16 md:pr-0 md:pl-10 md:border-t-0 md:border-l lg:pl-16">
+        <div className="border-blue-nx-dark border-t-2 py-12 px-4 sm:px-6 md:border-t-0 md:border-l md:py-16 md:pr-0 md:pl-10 lg:pl-16">
           <div className="md:flex-shrink-0">
-            <div className="mx-auto flex items-center text-white font-mono tracking-wider">
+            <div className="mx-auto flex items-center font-mono tracking-wider text-white">
               <svg
-                className="w-10 h-auto"
+                className="h-auto w-10"
                 fill="currentColor"
                 role="img"
                 viewBox="0 0 24 24"
@@ -69,10 +69,10 @@ export function Testimonials() {
               <span className="ml-2 font-bold ">Storybook</span>
             </div>
           </div>
-          <blockquote className="mt-6 md:flex-grow md:flex md:flex-col">
+          <blockquote className="mt-6 md:flex md:flex-grow md:flex-col">
             <div className="relative text-lg font-medium text-white md:flex-grow">
               <svg
-                className="hidden md:flex absolute top-0 left-0 transform -translate-x-4 -translate-y-4 h-8 w-8 text-green-nx-base"
+                className="text-green-nx-base absolute top-0 left-0 hidden h-8 w-8 -translate-x-4 -translate-y-4 transform md:flex"
                 fill="currentColor"
                 viewBox="0 0 32 32"
               >
@@ -85,7 +85,7 @@ export function Testimonials() {
             </div>
             <footer className="mt-8">
               <div className="flex items-start">
-                <div className="flex-shrink-0 inline-flex rounded-full border-2 border-white">
+                <div className="inline-flex flex-shrink-0 rounded-full border-2 border-white">
                   <img
                     className="h-12 w-12 rounded-full"
                     src="https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=8cc7a3620510c32066d3fbb193e7eb23"
diff --git a/nx-dev/ui-home/src/lib/affected-command.tsx b/nx-dev/ui-home/src/lib/affected-command.tsx
index 4170f6274c..289ddce658 100644
--- a/nx-dev/ui-home/src/lib/affected-command.tsx
+++ b/nx-dev/ui-home/src/lib/affected-command.tsx
@@ -52,9 +52,9 @@ export function AffectedCommand(): ReactComponentElement<any> {
             },
           },
         }}
-        className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24"
+        className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
       >
-        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
+        <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
           <div>
             <div className="mt-6">
               <motion.h1
@@ -76,7 +76,7 @@ export function AffectedCommand(): ReactComponentElement<any> {
                 <Link href="/using-nx/affected">
                   <a
                     title="Nx allows you to see what is affected by your changes"
-                    className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-nx-base hover:bg-blue-nx-dark transition"
+                    className="bg-blue-nx-base hover:bg-blue-nx-dark inline-flex rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm transition"
                   >
                     Learn about "nx affected"
                   </a>
@@ -86,13 +86,13 @@ export function AffectedCommand(): ReactComponentElement<any> {
           </div>
         </div>
         <div
-          className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1"
+          className="mt-12 sm:mt-16 lg:col-start-1 lg:mt-0"
           aria-hidden="true"
         >
-          <div className="relative px-4 sm:pr-6 md:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
+          <div className="relative px-4 sm:pr-6 md:-ml-16 lg:relative lg:m-0 lg:h-full lg:px-0">
             <motion.div
               variants={opacityTranslateXVariant}
-              className="-mt-8 w-full max-w-screen-sm rounded-xl shadow-xl border border-gray-300 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none overflow-hidden"
+              className="-mt-8 w-full max-w-screen-sm overflow-hidden rounded-xl border border-gray-300 shadow-xl lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
             >
               <Image
                 src="/images/nx-affected.webp"
@@ -105,35 +105,35 @@ export function AffectedCommand(): ReactComponentElement<any> {
             <motion.div
               variants={opacityTranslateXVariant}
               custom={0.25}
-              className="hidden md:flex absolute -bottom-8 right-8 bg-gray-500 rounded-xl shadow-xl"
+              className="absolute -bottom-8 right-8 hidden rounded-xl bg-gray-500 shadow-xl md:flex"
             >
               <div
-                className="coding inverse-toggle px-5 pt-4 shadow-lg text-gray-200 text-xs font-mono subpixel-antialiased
-              bg-gray-800 pb-6 pt-4 rounded-lg leading-normal overflow-hidden"
+                className="coding inverse-toggle overflow-hidden rounded-lg bg-gray-800 px-5 pt-4 pb-6 pt-4
+              font-mono text-xs leading-normal text-gray-200 subpixel-antialiased shadow-lg"
               >
                 <div className="top mb-2 flex">
-                  <div className="h-3 w-3 bg-red-500 rounded-full" />
-                  <div className="ml-2 h-3 w-3 bg-yellow-300 rounded-full" />
-                  <div className="ml-2 h-3 w-3 bg-green-500 rounded-full" />
+                  <div className="h-3 w-3 rounded-full bg-red-500" />
+                  <div className="ml-2 h-3 w-3 rounded-full bg-yellow-300" />
+                  <div className="ml-2 h-3 w-3 rounded-full bg-green-500" />
                 </div>
                 <div className="mt-4 flex">
                   <span className="text-green-400">/workspace ➜</span>
-                  <p className="flex-1 typing items-center pl-2">
+                  <p className="typing flex-1 items-center pl-2">
                     nx affected:test --parallel
                   </p>
                 </div>
                 <div className="mt-2 flex">
-                  <p className="flex-1 typing items-center pl-2">
+                  <p className="typing flex-1 items-center pl-2">
                     <span className="text-green-400">{'>'}</span>{' '}
-                    <span className="px-1 py-0.5 bg-blue-nx-base">NX</span>
-                    <span className="ml-1 px-1 py-0.5 bg-yellow-500">
+                    <span className="bg-blue-nx-base px-1 py-0.5">NX</span>
+                    <span className="ml-1 bg-yellow-500 px-1 py-0.5">
                       NOTE
                     </span>{' '}
                     Affected criteria defaulted to --base=master --head=HEAD
                     <br />
                     <br />
                     <span className="text-green-400">{'>'}</span>{' '}
-                    <span className="px-1 py-0.5 bg-blue-nx-base mr-1">NX</span>{' '}
+                    <span className="bg-blue-nx-base mr-1 px-1 py-0.5">NX</span>{' '}
                     Running target test for 3 project(s):
                     <br />
                     - nx-dev <br />
@@ -144,10 +144,10 @@ export function AffectedCommand(): ReactComponentElement<any> {
                     <span className="text-green-400">{'>'}</span> nx run
                     nx-dev:test RUNS nx-dev
                     <br />
-                    <span className="px-1 py-0.5 bg-green-nx-base">
+                    <span className="bg-green-nx-base px-1 py-0.5">
                       RUNS
                     </span>{' '}
-                    <span className="px-1 py-0.5 bg-gray-200 text-gray-700">
+                    <span className="bg-gray-200 px-1 py-0.5 text-gray-700">
                       nx-dev
                     </span>{' '}
                     nx-dev/nx-dev/specs/index.spec.tsx
diff --git a/nx-dev/ui-home/src/lib/cloud-support.tsx b/nx-dev/ui-home/src/lib/cloud-support.tsx
index c9a4c6b023..c459903d3a 100644
--- a/nx-dev/ui-home/src/lib/cloud-support.tsx
+++ b/nx-dev/ui-home/src/lib/cloud-support.tsx
@@ -52,9 +52,9 @@ export function CloudSupport(): ReactComponentElement<any> {
             },
           },
         }}
-        className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24"
+        className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
       >
-        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
+        <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
           <div>
             <div className="mt-6">
               <motion.h1
@@ -75,7 +75,7 @@ export function CloudSupport(): ReactComponentElement<any> {
                 <Link href="https://nx.app">
                   <a
                     title="Enable Nx generation monorepo tooling with NxCloud"
-                    className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-nx-base hover:bg-blue-nx-dark transition"
+                    className="bg-blue-nx-base hover:bg-blue-nx-dark inline-flex rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm transition"
                   >
                     Enable Nx Cloud
                   </a>
@@ -86,12 +86,12 @@ export function CloudSupport(): ReactComponentElement<any> {
         </div>
         <div
           aria-hidden="true"
-          className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-2"
+          className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0"
         >
-          <div className="relative px-4 sm:pr-6 lg:px-0 lg:h-full">
+          <div className="relative px-4 sm:pr-6 lg:h-full lg:px-0">
             <motion.div
               variants={opacityTranslateXVariant}
-              className="w-full mx-auto max-w-screen-sm rounded-xl shadow-xl border border-gray-300 lg:absolute lg:left-16 lg:-top-28 lg:h-full lg:w-auto lg:max-w-none overflow-hidden"
+              className="mx-auto w-full max-w-screen-sm overflow-hidden rounded-xl border border-gray-300 shadow-xl lg:absolute lg:left-16 lg:-top-28 lg:h-full lg:w-auto lg:max-w-none"
             >
               <Image
                 src="/images/nx-cloud.webp"
@@ -104,7 +104,7 @@ export function CloudSupport(): ReactComponentElement<any> {
             <motion.div
               variants={opacityTranslateXVariant}
               custom={0.25}
-              className="w-full mx-auto max-w-screen-sm hidden lg:flex rounded-xl shadow-xl border border-gray-300 lg:absolute lg:-left-20 lg:-bottom-64 lg:h-full lg:w-auto lg:max-w-none overflow-hidden"
+              className="mx-auto hidden w-full max-w-screen-sm overflow-hidden rounded-xl border border-gray-300 shadow-xl lg:absolute lg:-left-20 lg:-bottom-64 lg:flex lg:h-full lg:w-auto lg:max-w-none"
             >
               <Image
                 src="/images/github-app.webp"
diff --git a/nx-dev/ui-home/src/lib/dependency-graph.tsx b/nx-dev/ui-home/src/lib/dependency-graph.tsx
index 462968f305..70a5746f1f 100644
--- a/nx-dev/ui-home/src/lib/dependency-graph.tsx
+++ b/nx-dev/ui-home/src/lib/dependency-graph.tsx
@@ -51,9 +51,9 @@ export function DependencyGraph(): ReactComponentElement<any> {
             },
           },
         }}
-        className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24"
+        className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
       >
-        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
+        <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
           <div>
             <div className="mt-6">
               <motion.h1
@@ -73,7 +73,7 @@ export function DependencyGraph(): ReactComponentElement<any> {
                 <Link href="/structure/dependency-graph">
                   <a
                     title="Nx graph tool to visally interact with monorepo dependencies"
-                    className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-nx-base hover:bg-blue-nx-dark transition"
+                    className="bg-blue-nx-base hover:bg-blue-nx-dark inline-flex rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm transition"
                   >
                     Learn about "nx graph"
                   </a>
@@ -84,15 +84,15 @@ export function DependencyGraph(): ReactComponentElement<any> {
         </div>
         <div
           aria-hidden="true"
-          className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-2"
+          className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0"
         >
           <motion.div
             variants={opacityTranslateXVariant}
-            className="relative px-4 lg:px-0 lg:h-full"
+            className="relative px-4 lg:h-full lg:px-0"
           >
             <video
               preload="true"
-              className="-mt-8 mx-auto w-full max-w-screen-sm rounded-xl shadow-xl border border-gray-300 lg:absolute lg:left-16 lg:h-full lg:w-auto lg:max-w-none"
+              className="mx-auto -mt-8 w-full max-w-screen-sm rounded-xl border border-gray-300 shadow-xl lg:absolute lg:left-16 lg:h-full lg:w-auto lg:max-w-none"
               autoPlay={true}
               loop
               muted
diff --git a/nx-dev/ui-home/src/lib/ecosystem-features.tsx b/nx-dev/ui-home/src/lib/ecosystem-features.tsx
index 180e6f9d03..b021ef3ef0 100644
--- a/nx-dev/ui-home/src/lib/ecosystem-features.tsx
+++ b/nx-dev/ui-home/src/lib/ecosystem-features.tsx
@@ -195,9 +195,9 @@ export function EcosystemFeatures(): ReactComponentElement<any> {
             },
           },
         }}
-        className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24"
+        className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
       >
-        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
+        <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
           <div>
             <div className="mt-6">
               <motion.h1
@@ -217,27 +217,27 @@ export function EcosystemFeatures(): ReactComponentElement<any> {
             </div>
           </div>
         </div>
-        <div className="md:mt-16 lg:mt-0 lg:col-start-2">
-          <div className="px-4 m-0 lg:px-0 lg:relative lg:h-full">
-            <div className="h-full py-14 grid items-center grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="md:mt-16 lg:col-start-2 lg:mt-0">
+          <div className="m-0 px-4 lg:relative lg:h-full lg:px-0">
+            <div className="grid h-full grid-cols-1 items-center gap-4 py-14 md:grid-cols-2">
               {featureItems.map((item, index: number) => (
                 <motion.div
                   key={'monorepo-feature-' + index}
                   variants={opacityTranslateXVariant}
                   className={cx(
-                    'relative rounded-lg border border-gray-300 bg-white px-4 py-3 shadow-md flex items-center space-x-4 hover:bg-gray-50 transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base',
+                    'focus-within:ring-blue-nx-base relative flex items-center space-x-4 rounded-lg border border-gray-300 bg-white px-4 py-3 shadow-md transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50',
                     [2, 3].includes(index) && 'lg:left-8'
                   )}
                 >
                   <div
                     className={cx(
-                      'flex-shrink-0 p-2 rounded-full text-white ',
+                      'flex-shrink-0 rounded-full p-2 text-white ',
                       item.classNames
                     )}
                   >
                     {item.svg}
                   </div>
-                  <div className="flex-1 min-w-0">
+                  <div className="min-w-0 flex-1">
                     <Link href={item.link}>
                       <a className="focus:outline-none">
                         <span className="absolute inset-0" aria-hidden="true" />
diff --git a/nx-dev/ui-home/src/lib/egghead-courses.tsx b/nx-dev/ui-home/src/lib/egghead-courses.tsx
index e0891bf40e..82c9ba5b26 100644
--- a/nx-dev/ui-home/src/lib/egghead-courses.tsx
+++ b/nx-dev/ui-home/src/lib/egghead-courses.tsx
@@ -15,7 +15,7 @@ export function EggheadCourses(): ReactComponentElement<any> {
   return (
     <article
       id="egghead-course"
-      className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+      className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
     >
       <motion.div
         ref={ref}
@@ -32,9 +32,9 @@ export function EggheadCourses(): ReactComponentElement<any> {
             },
           },
         }}
-        className="bg-blue-nx-base rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
+        className="bg-blue-nx-base overflow-hidden rounded-lg shadow-xl lg:grid lg:grid-cols-2 lg:gap-4"
       >
-        <div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
+        <div className="px-6 pt-10 pb-12 sm:px-16 sm:pt-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
           <div className="lg:self-center">
             <h1 className="text-3xl font-extrabold text-white sm:text-4xl">
               <span className="block">Scale React Development</span>
@@ -48,7 +48,7 @@ export function EggheadCourses(): ReactComponentElement<any> {
                 title="Start learning how to create React application that scale with Nx"
                 rel="nofollow"
                 target="_blank"
-                className="mt-8 bg-white border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-blue-nx-base hover:bg-gray-100"
+                className="text-blue-nx-base mt-8 inline-flex items-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium shadow hover:bg-gray-100"
               >
                 Start learning now
               </a>
@@ -57,11 +57,11 @@ export function EggheadCourses(): ReactComponentElement<any> {
         </div>
         <div
           aria-hidden="true"
-          className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1"
+          className="aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1 -mt-6"
         >
           <img
             loading="lazy"
-            className="transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
+            className="translate-x-6 translate-y-6 transform rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
             src="/images/nx-egghead-course.webp"
             alt="nx egghead course"
           />
diff --git a/nx-dev/ui-home/src/lib/event-banner.tsx b/nx-dev/ui-home/src/lib/event-banner.tsx
index 4b88f15659..8f8bd43253 100644
--- a/nx-dev/ui-home/src/lib/event-banner.tsx
+++ b/nx-dev/ui-home/src/lib/event-banner.tsx
@@ -2,9 +2,9 @@ import React, { ReactComponentElement } from 'react';
 
 export function EventBanner(): ReactComponentElement<any> {
   return (
-    <div className="relative bg-green-nx-base">
-      <div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8">
-        <div className="pr-16 sm:text-center sm:px-16">
+    <div className="bg-green-nx-base relative">
+      <div className="mx-auto max-w-7xl py-4 px-3 sm:px-6 lg:px-8">
+        <div className="pr-16 sm:px-16 sm:text-center">
           <p className="font-medium text-white">
             New event! We're excited to announce a new Nx workshop on December.
             <span className="block sm:ml-2 sm:inline-block">
@@ -12,13 +12,13 @@ export function EventBanner(): ReactComponentElement<any> {
                 href="https://ti.to/nrwl/nx-workshop-12-2021?utm_source=nx.dev"
                 target="_blank"
                 rel="nofollow"
-                className="text-white font-bold underline group"
+                className="group font-bold text-white underline"
               >
                 {' '}
                 Register now{' '}
                 <span
                   aria-hidden="true"
-                  className="inline-block group-hover:translate-x-2 transition"
+                  className="inline-block transition group-hover:translate-x-2"
                 >
                   &rarr;
                 </span>
diff --git a/nx-dev/ui-home/src/lib/experience-features.tsx b/nx-dev/ui-home/src/lib/experience-features.tsx
index ea40f9ec3e..8791b294df 100644
--- a/nx-dev/ui-home/src/lib/experience-features.tsx
+++ b/nx-dev/ui-home/src/lib/experience-features.tsx
@@ -190,9 +190,9 @@ export function ExperienceFeatures(): ReactComponentElement<any> {
             },
           },
         }}
-        className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24"
+        className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
       >
-        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
+        <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
           <div>
             <div className="mt-6">
               <motion.h1
@@ -212,27 +212,27 @@ export function ExperienceFeatures(): ReactComponentElement<any> {
             </div>
           </div>
         </div>
-        <div className="md:mt-16 lg:mt-0 lg:col-start-1">
-          <div className="px-4 m-0 lg:px-0 lg:relative lg:h-full">
-            <div className="h-full py-14 grid items-center grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="md:mt-16 lg:col-start-1 lg:mt-0">
+          <div className="m-0 px-4 lg:relative lg:h-full lg:px-0">
+            <div className="grid h-full grid-cols-1 items-center gap-4 py-14 md:grid-cols-2">
               {featureItems.map((item, index: number) => (
                 <motion.div
                   key={'monorepo-feature-' + index}
                   variants={opacityTranslateXVariant}
                   className={cx(
-                    'relative rounded-lg border border-gray-300 bg-white px-4 py-3 shadow-md flex items-center space-x-4 hover:bg-gray-50 transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base',
+                    'focus-within:ring-blue-nx-base relative flex items-center space-x-4 rounded-lg border border-gray-300 bg-white px-4 py-3 shadow-md transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50',
                     [2, 3].includes(index) && 'lg:left-8'
                   )}
                 >
                   <div
                     className={cx(
-                      'flex-shrink-0 p-2 rounded-full text-white ',
+                      'flex-shrink-0 rounded-full p-2 text-white ',
                       item.classNames
                     )}
                   >
                     {item.svg}
                   </div>
-                  <div className="flex-1 min-w-0">
+                  <div className="min-w-0 flex-1">
                     <Link href={item.link}>
                       <a className="focus:outline-none">
                         <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 57f7da8d92..2def9f7c37 100644
--- a/nx-dev/ui-home/src/lib/getting-started.tsx
+++ b/nx-dev/ui-home/src/lib/getting-started.tsx
@@ -22,7 +22,7 @@ function Tabs({
   setActiveTab: (id: string) => void;
 }): ReactComponentElement<any> {
   return (
-    <div className="mt-12 max-w-3xl mx-auto">
+    <div className="mx-auto mt-12 max-w-3xl">
       <div>
         <div className="px-4 sm:hidden">
           <label htmlFor="getting-started-tabs" className="sr-only">
@@ -31,7 +31,7 @@ function Tabs({
           <select
             id="getting-started-tabs"
             name="tabs"
-            className="block w-full focus:ring-blue-nx-base focus:border-blue-nx-base border-gray-300 rounded-md"
+            className="focus:ring-blue-nx-base focus:border-blue-nx-base block w-full rounded-md border-gray-300"
             value={tabs.find((tab) => tab.id === activeTab)?.id}
             onChange={(event) => setActiveTab(event.target.value)}
           >
@@ -44,7 +44,7 @@ function Tabs({
         </div>
         <div className="hidden sm:block">
           <nav
-            className="relative z-0 rounded-lg shadow flex divide-x divide-gray-200"
+            className="relative z-0 flex divide-x divide-gray-200 rounded-lg shadow"
             aria-label="Tabs"
           >
             <h2 className="sr-only">
@@ -56,10 +56,10 @@ function Tabs({
                 key={tab.name}
                 onClick={() => setActiveTab(tab.id)}
                 className={cx(
-                  'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm uppercase text-center hover:bg-gray-50 focus:z-10 transition ease-out',
+                  'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm uppercase transition ease-out hover:bg-gray-50 focus:z-10',
                   tab.id === activeTab
-                    ? 'text-gray-600 font-bold'
-                    : 'text-gray-400 hover:text-gray-600 font-medium',
+                    ? 'font-bold text-gray-600'
+                    : 'font-medium text-gray-400 hover:text-gray-600',
                   tabIdx === 0 ? 'rounded-l-lg' : '',
                   tabIdx === tabs.length - 1 ? 'rounded-r-lg' : ''
                 )}
@@ -123,25 +123,25 @@ function AngularPane(): ReactComponentElement<any> {
       exit="hidden"
       className="mt-8"
     >
-      <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
-        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
-          <div className="mt-6 rounded-lg border border-gray-300 bg-white shadow-md text-md text-gray-700 overflow-hidden">
-            <h2 className="px-4 py-3 text-lg font-semibold tracking-tight bg-gray-50 border-b border-gray-200">
+      <div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
+        <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
+          <div className="text-md mt-6 overflow-hidden rounded-lg border border-gray-300 bg-white text-gray-700 shadow-md">
+            <h2 className="border-b border-gray-200 bg-gray-50 px-4 py-3 text-lg font-semibold tracking-tight">
               Create an Angular Workspace with Nx
             </h2>
-            <p className="mt-4 mx-4">
+            <p className="mx-4 mt-4">
               Get an application up and running in minutes. No need to figure
               out webpack, e2e and unit test runners, linting. It all works out
               of the box.
             </p>
-            <p className="mt-4 mx-4 italic font-medium text-gray-600">
+            <p className="mx-4 mt-4 font-medium italic text-gray-600">
               You get better linting, better testing, a faster CLI, support for
               popular modern tools and libraries.
             </p>
 
             <div className="relative my-6 pl-14 pr-4">
               <svg
-                className="absolute left-4 top-0 w-6 h-6"
+                className="absolute left-4 top-0 h-6 w-6"
                 role="img"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -152,7 +152,7 @@ function AngularPane(): ReactComponentElement<any> {
               <h3 className="mt-2 font-semibold">
                 Angular{' '}
                 <Link href="/angular-tutorial/01-create-application">
-                  <a className="italic font-normal text-sm text-gray-600 hover:underline">
+                  <a className="text-sm font-normal italic text-gray-600 hover:underline">
                     (follow our Angular tutorial)
                   </a>
                 </Link>{' '}
@@ -170,7 +170,7 @@ function AngularPane(): ReactComponentElement<any> {
             </div>
             <div className="relative my-6 pl-14 pr-4">
               <svg
-                className="absolute left-4 top-0 w-6 h-6"
+                className="absolute left-4 top-0 h-6 w-6"
                 role="img"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -181,7 +181,7 @@ function AngularPane(): ReactComponentElement<any> {
               <h3 className="mt-2 font-semibold">
                 Full-stack app built with Angular and Nest.js{' '}
                 <Link href="/angular-tutorial/01-create-application">
-                  <a className="italic font-normal text-sm text-gray-600 hover:underline">
+                  <a className="text-sm font-normal italic text-gray-600 hover:underline">
                     (follow our Angular tutorial)
                   </a>
                 </Link>{' '}
@@ -199,8 +199,8 @@ function AngularPane(): ReactComponentElement<any> {
             </div>
           </div>
         </div>
-        <div className="mt-12 sm:mt-16 lg:mt-0 lg:py-16 lg:col-start-2">
-          <div className="px-4 flex flex-col items-center justify-center lg:px-0 relative lg:h-full">
+        <div className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0 lg:py-16">
+          <div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
             <iframe
               loading="lazy"
               className="max-w-screen-sm"
@@ -210,18 +210,18 @@ function AngularPane(): ReactComponentElement<any> {
               frameBorder="0"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
             />
-            <div className="mt-6 w-full grid items-center grid-cols-1 lg:grid-cols-2 gap-4">
+            <div className="mt-6 grid w-full grid-cols-1 items-center gap-4 lg:grid-cols-2">
               <motion.div
                 custom={0.2}
                 variants={opacityTranslateYVariant}
-                className="relative flex flex-col items-center rounded-lg border border-gray-300 flex items-center bg-white hover:bg-gray-50 shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base overflow-hidden"
+                className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
               >
-                <div className="px-4 py-3 flex w-full">
-                  <div className="flex-1 min-w-0">
+                <div className="flex w-full px-4 py-3">
+                  <div className="min-w-0 flex-1">
                     <Link href="/migration/migration-angular">
                       <a className="focus:outline-none">
                         <span className="absolute inset-0" aria-hidden="true" />
-                        <p className="mb-0.5 text-md font-bold text-gray-600">
+                        <p className="text-md mb-0.5 font-bold text-gray-600">
                           AngularCLI migration
                         </p>
                         <p className="text-xs text-gray-500">
@@ -232,11 +232,11 @@ function AngularPane(): ReactComponentElement<any> {
                     </Link>
                   </div>
                   <div className="flex-shrink-0">
-                    <div className="p-2 rounded-full text-white border border-gray-100 bg-white">
+                    <div className="rounded-full border border-gray-100 bg-white p-2 text-white">
                       <svg
                         role="img"
                         viewBox="0 0 24 24"
-                        className="w-6 h-6 text-[#DD0031]"
+                        className="h-6 w-6 text-[#DD0031]"
                         fill="currentColor"
                       >
                         <path d="M9.931 12.645h4.138l-2.07-4.908m0-7.737L.68 3.982l1.726 14.771L12 24l9.596-5.242L23.32 3.984 11.999.001zm7.064 18.31h-2.638l-1.422-3.503H8.996l-1.422 3.504h-2.64L12 2.65z" />
@@ -244,7 +244,7 @@ function AngularPane(): ReactComponentElement<any> {
                     </div>
                   </div>
                 </div>
-                <div className="mt-2 px-4 py-3 w-full flex items-center space-x-2 border-t border-gray-200 bg-gray-50 text-gray-400">
+                <div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     className="h-4 w-4"
@@ -267,14 +267,14 @@ function AngularPane(): ReactComponentElement<any> {
               <motion.div
                 custom={0.6}
                 variants={opacityTranslateYVariant}
-                className="relative flex flex-col items-center rounded-lg border border-gray-300 flex items-center bg-white hover:bg-gray-50 shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base overflow-hidden"
+                className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
               >
-                <div className="px-4 py-3 flex w-full">
-                  <div className="flex-1 min-w-0">
+                <div className="flex w-full px-4 py-3">
+                  <div className="min-w-0 flex-1">
                     <Link href="/migration/migration-angularjs">
                       <a className="focus:outline-none">
                         <span className="absolute inset-0" aria-hidden="true" />
-                        <p className="mb-0.5 text-md font-bold text-gray-600">
+                        <p className="text-md mb-0.5 font-bold text-gray-600">
                           AngularJS migration
                         </p>
                         <p className="text-xs text-gray-500">
@@ -284,11 +284,11 @@ function AngularPane(): ReactComponentElement<any> {
                     </Link>
                   </div>
                   <div className="flex-shrink-0">
-                    <div className="p-2 rounded-full text-white border border-gray-100 bg-white">
+                    <div className="rounded-full border border-gray-100 bg-white p-2 text-white">
                       <svg
                         role="img"
                         viewBox="0 0 24 24"
-                        className="w-6 h-6 text-[#E23237]"
+                        className="h-6 w-6 text-[#E23237]"
                         fill="currentColor"
                       >
                         <path d="M11.964 0L.672 3.974l1.784 14.794L11.976 24l9.568-5.303 1.784-14.794zm-.027 1.258l10.265 3.5-1.663 13.232-8.602 4.76-8.469-4.697L1.939 4.822zm0 .78L4.957 17.57l2.604-.048 1.4-3.501h6.257l1.532 3.55 2.492.046zm.02 4.98l2.355 4.93H9.878Z" />
@@ -296,7 +296,7 @@ function AngularPane(): ReactComponentElement<any> {
                     </div>
                   </div>
                 </div>
-                <div className="mt-2 px-4 py-3 w-full flex items-center space-x-2 border-t border-gray-200 bg-gray-50 text-gray-400">
+                <div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     className="h-4 w-4"
@@ -365,13 +365,13 @@ function NodeJsPane(): ReactComponentElement<any> {
       exit="hidden"
       className="mt-8"
     >
-      <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
-        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
-          <div className="mt-6 rounded-lg border border-gray-300 bg-white shadow-md text-md text-gray-700 overflow-hidden">
-            <h2 className="px-4 py-3 text-lg font-semibold tracking-tight bg-gray-50 border-b border-gray-200">
+      <div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
+        <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
+          <div className="text-md mt-6 overflow-hidden rounded-lg border border-gray-300 bg-white text-gray-700 shadow-md">
+            <h2 className="border-b border-gray-200 bg-gray-50 px-4 py-3 text-lg font-semibold tracking-tight">
               Create a Node Workspace with Nx
             </h2>
-            <p className="mt-4 mx-4">
+            <p className="mx-4 mt-4">
               Get an application up and running in minutes. No need to figure
               out TypeScript compilation, e2e and unit test runners, linting. It
               all works out of the box.
@@ -379,7 +379,7 @@ function NodeJsPane(): ReactComponentElement<any> {
 
             <div className="relative mt-6 pl-14 pr-4">
               <svg
-                className="absolute left-4 top-0 w-6 h-6"
+                className="absolute left-4 top-0 h-6 w-6"
                 role="img"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -390,7 +390,7 @@ function NodeJsPane(): ReactComponentElement<any> {
               <h3 className="mt-2 font-semibold">
                 NestJS{' '}
                 <Link href="/node-tutorial/01-create-application">
-                  <a className="italic font-normal text-sm text-gray-600 hover:underline">
+                  <a className="text-sm font-normal italic text-gray-600 hover:underline">
                     (follow our Nest tutorial)
                   </a>
                 </Link>{' '}
@@ -408,7 +408,7 @@ function NodeJsPane(): ReactComponentElement<any> {
             </div>
             <div className="relative my-6 pl-14 pr-4">
               <svg
-                className="absolute left-4 top-0 w-6 h-6"
+                className="absolute left-4 top-0 h-6 w-6"
                 role="img"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -430,8 +430,8 @@ function NodeJsPane(): ReactComponentElement<any> {
             </div>
           </div>
         </div>
-        <div className="mt-12 sm:mt-16 lg:mt-0 lg:py-16 lg:col-start-2">
-          <div className="px-4 flex flex-col items-center justify-center lg:px-0 relative lg:h-full">
+        <div className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0 lg:py-16">
+          <div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
             <iframe
               loading="lazy"
               className="max-w-screen-sm"
@@ -441,18 +441,18 @@ function NodeJsPane(): ReactComponentElement<any> {
               frameBorder="0"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
             />
-            <div className="mt-6 w-full grid items-center grid-cols-1 lg:grid-cols-2 gap-4">
+            <div className="mt-6 grid w-full grid-cols-1 items-center gap-4 lg:grid-cols-2">
               <motion.div
                 custom={0.2}
                 variants={opacityTranslateYVariant}
-                className="relative flex flex-col items-center rounded-lg border border-gray-300 flex items-center bg-white hover:bg-gray-50 shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base overflow-hidden"
+                className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
               >
-                <div className="px-4 py-3 flex w-full">
-                  <div className="flex-1 min-w-0">
+                <div className="flex w-full px-4 py-3">
+                  <div className="min-w-0 flex-1">
                     <Link href="/migration/adding-to-monorepo">
                       <a className="focus:outline-none">
                         <span className="absolute inset-0" aria-hidden="true" />
-                        <p className="mb-0.5 text-md font-bold text-gray-600">
+                        <p className="text-md mb-0.5 font-bold text-gray-600">
                           Lerna migration
                         </p>
                         <p className="text-xs text-gray-500">
@@ -462,16 +462,16 @@ function NodeJsPane(): ReactComponentElement<any> {
                     </Link>
                   </div>
                   <div className="flex-shrink-0">
-                    <div className="p-2 rounded-full text-white bg-gradient-to-tr from-green-400 via-blue-500 to-pink-500">
+                    <div className="rounded-full bg-gradient-to-tr from-green-400 via-blue-500 to-pink-500 p-2 text-white">
                       <img
-                        className="h-6 w-6 filter invert"
+                        className="h-6 w-6 invert filter"
                         src="/images/lerna-logo.svg"
                         alt="Migrating to Nx from Lerna"
                       />
                     </div>
                   </div>
                 </div>
-                <div className="mt-2 px-4 py-3 w-full flex items-center space-x-2 border-t border-gray-200 bg-gray-50 text-gray-400">
+                <div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     className="h-4 w-4"
@@ -540,13 +540,13 @@ function ReactPane(): ReactComponentElement<any> {
       exit="hidden"
       className="mt-8"
     >
-      <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
-        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
-          <div className="mt-6 rounded-lg border border-gray-300 bg-white shadow-md text-md text-gray-700 overflow-hidden">
-            <h2 className="px-4 py-3 text-lg font-semibold tracking-tight bg-gray-50 border-b border-gray-200">
+      <div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
+        <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
+          <div className="text-md mt-6 overflow-hidden rounded-lg border border-gray-300 bg-white text-gray-700 shadow-md">
+            <h2 className="border-b border-gray-200 bg-gray-50 px-4 py-3 text-lg font-semibold tracking-tight">
               Create a React Workspace with Nx
             </h2>
-            <p className="mt-4 mx-4">
+            <p className="mx-4 mt-4">
               Get an application up and running in minutes. No need to figure
               out webpack, e2e and unit test runners, linting. It all works out
               of the box.
@@ -554,7 +554,7 @@ function ReactPane(): ReactComponentElement<any> {
 
             <div className="relative mt-6 pl-14 pr-4">
               <svg
-                className="absolute left-4 top-0 w-6 h-6"
+                className="absolute left-4 top-0 h-6 w-6"
                 role="img"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -565,7 +565,7 @@ function ReactPane(): ReactComponentElement<any> {
               <h3 className="mt-2 font-semibold">
                 React{' '}
                 <Link href="/react-tutorial/01-create-application">
-                  <a className="italic font-normal text-sm text-gray-600 hover:underline">
+                  <a className="text-sm font-normal italic text-gray-600 hover:underline">
                     (follow our React tutorial)
                   </a>
                 </Link>{' '}
@@ -594,7 +594,7 @@ function ReactPane(): ReactComponentElement<any> {
               </svg>*/}
               <h3 className="mt-2 font-semibold">React Native</h3>
 
-              <div className="mt-2 max-w-full inline-flex">
+              <div className="mt-2 inline-flex max-w-full">
                 <InlineCommand
                   language={'bash'}
                   command={'npx create-nx-workspace --preset=react-native'}
@@ -607,7 +607,7 @@ function ReactPane(): ReactComponentElement<any> {
 
             <div className="relative my-6 pl-14 pr-4">
               <svg
-                className="absolute left-4 top-0 w-6 h-6"
+                className="absolute left-4 top-0 h-6 w-6"
                 role="img"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -618,7 +618,7 @@ function ReactPane(): ReactComponentElement<any> {
               <h3 className="mt-2 font-semibold">
                 Next.js{' '}
                 <Link href="/next/overview">
-                  <a className="italic font-normal text-sm text-gray-600 hover:underline">
+                  <a className="text-sm font-normal italic text-gray-600 hover:underline">
                     (follow our Next.js guide)
                   </a>
                 </Link>{' '}
@@ -636,8 +636,8 @@ function ReactPane(): ReactComponentElement<any> {
             </div>
           </div>
         </div>
-        <div className="mt-12 sm:mt-16 lg:mt-0 lg:py-16 lg:col-start-2">
-          <div className="px-4 flex flex-col items-center justify-center lg:px-0 relative lg:h-full">
+        <div className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0 lg:py-16">
+          <div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
             <iframe
               loading="lazy"
               className="max-w-screen-sm"
@@ -647,18 +647,18 @@ function ReactPane(): ReactComponentElement<any> {
               frameBorder="0"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
             />
-            <div className="mt-6 w-full grid items-center grid-cols-1 lg:grid-cols-2 gap-4">
+            <div className="mt-6 grid w-full grid-cols-1 items-center gap-4 lg:grid-cols-2">
               <motion.div
                 custom={0.2}
                 variants={opacityTranslateYVariant}
-                className="relative flex flex-col items-center rounded-lg border border-gray-300 flex items-center bg-white hover:bg-gray-50 shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base overflow-hidden"
+                className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
               >
-                <div className="px-4 py-3 flex w-full">
-                  <div className="flex-1 min-w-0">
+                <div className="flex w-full px-4 py-3">
+                  <div className="min-w-0 flex-1">
                     <Link href="/migration/migration-cra">
                       <a className="focus:outline-none">
                         <span className="absolute inset-0" aria-hidden="true" />
-                        <p className="mb-0.5 text-md font-bold text-gray-600">
+                        <p className="text-md mb-0.5 font-bold text-gray-600">
                           CRA migration
                         </p>
                         <p className="text-xs text-gray-500">
@@ -668,10 +668,10 @@ function ReactPane(): ReactComponentElement<any> {
                     </Link>
                   </div>
                   <div className="flex-shrink-0">
-                    <div className="p-2 rounded-full text-white bg-gray-600">
+                    <div className="rounded-full bg-gray-600 p-2 text-white">
                       <svg
                         viewBox="0 0 24 24"
-                        className="w-6 h-6 text-[#09D3AC]"
+                        className="h-6 w-6 text-[#09D3AC]"
                         fill="currentColor"
                       >
                         <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
@@ -679,7 +679,7 @@ function ReactPane(): ReactComponentElement<any> {
                     </div>
                   </div>
                 </div>
-                <div className="mt-2 px-4 py-3 w-full flex items-center space-x-2 border-t border-gray-200 bg-gray-50 text-gray-400">
+                <div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     className="h-4 w-4"
@@ -700,14 +700,14 @@ function ReactPane(): ReactComponentElement<any> {
               <motion.div
                 custom={0.6}
                 variants={opacityTranslateYVariant}
-                className="relative flex flex-col items-center rounded-lg border border-gray-300 flex items-center bg-white hover:bg-gray-50 shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base overflow-hidden"
+                className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
               >
-                <div className="px-4 py-3 flex w-full">
-                  <div className="flex-1 min-w-0">
+                <div className="flex w-full px-4 py-3">
+                  <div className="min-w-0 flex-1">
                     <Link href="/migration/adding-to-monorepo">
                       <a className="focus:outline-none">
                         <span className="absolute inset-0" aria-hidden="true" />
-                        <p className="mb-0.5 text-md font-bold text-gray-600">
+                        <p className="text-md mb-0.5 font-bold text-gray-600">
                           Lerna migration
                         </p>
                         <p className="text-xs text-gray-500">
@@ -717,16 +717,16 @@ function ReactPane(): ReactComponentElement<any> {
                     </Link>
                   </div>
                   <div className="flex-shrink-0">
-                    <div className="p-2 rounded-full text-white bg-gradient-to-tr from-green-400 via-blue-500 to-pink-500">
+                    <div className="rounded-full bg-gradient-to-tr from-green-400 via-blue-500 to-pink-500 p-2 text-white">
                       <img
-                        className="h-6 w-6 filter invert"
+                        className="h-6 w-6 invert filter"
                         src="/images/lerna-logo.svg"
                         alt="Migrating to Nx from Lerna"
                       />
                     </div>
                   </div>
                 </div>
-                <div className="mt-2 px-4 py-3 w-full flex items-center space-x-2 border-t border-gray-200 bg-gray-50 text-gray-400">
+                <div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     className="h-4 w-4"
@@ -795,13 +795,13 @@ function TypescriptPane(): ReactComponentElement<any> {
       exit="hidden"
       className="mt-8"
     >
-      <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
-        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-1">
-          <div className="mt-6 rounded-lg border border-gray-300 bg-white shadow-md text-md text-gray-700 overflow-hidden">
-            <h2 className="px-4 py-3 text-lg font-semibold tracking-tight bg-gray-50 border-b border-gray-200">
+      <div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
+        <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-1 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
+          <div className="text-md mt-6 overflow-hidden rounded-lg border border-gray-300 bg-white text-gray-700 shadow-md">
+            <h2 className="border-b border-gray-200 bg-gray-50 px-4 py-3 text-lg font-semibold tracking-tight">
               Create a TypeScript/JavaScript Workspace with Nx
             </h2>
-            <p className="mt-4 mx-4">
+            <p className="mx-4 mt-4">
               Create an empty workspace where you can create TypeScript or
               JavaScript projects. You can build/test/lint them either yourself
               or using Nx plugins.
@@ -809,7 +809,7 @@ function TypescriptPane(): ReactComponentElement<any> {
 
             <div className="relative my-6 pl-14 pr-4">
               <svg
-                className="absolute left-4 top-0 w-6 h-6"
+                className="absolute left-4 top-0 h-6 w-6"
                 role="img"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -820,7 +820,7 @@ function TypescriptPane(): ReactComponentElement<any> {
               <h3 className="mt-2 font-semibold">
                 TypeScript/JavaScript{' '}
                 <Link href="/getting-started/nx-and-typescript">
-                  <a className="italic font-normal text-sm text-gray-600 hover:underline">
+                  <a className="text-sm font-normal italic text-gray-600 hover:underline">
                     (follow our Nx and TypeScript tutorial)
                   </a>
                 </Link>
@@ -838,8 +838,8 @@ function TypescriptPane(): ReactComponentElement<any> {
             </div>
           </div>
         </div>
-        <div className="mt-12 sm:mt-16 lg:mt-0 lg:py-16 lg:col-start-2">
-          <div className="px-4 flex flex-col items-center justify-center lg:px-0 relative lg:h-full">
+        <div className="mt-12 sm:mt-16 lg:col-start-2 lg:mt-0 lg:py-16">
+          <div className="relative flex flex-col items-center justify-center px-4 lg:h-full lg:px-0">
             <iframe
               loading="lazy"
               className="max-w-screen-sm"
@@ -849,18 +849,18 @@ function TypescriptPane(): ReactComponentElement<any> {
               frameBorder="0"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
             />
-            <div className="mt-6 w-full grid items-center grid-cols-1 lg:grid-cols-2 gap-4">
+            <div className="mt-6 grid w-full grid-cols-1 items-center gap-4 lg:grid-cols-2">
               <motion.div
                 custom={0.2}
                 variants={opacityTranslateYVariant}
-                className="relative flex flex-col items-center rounded-lg border border-gray-300 flex items-center bg-white hover:bg-gray-50 shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base overflow-hidden"
+                className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
               >
-                <div className="px-4 py-3 flex w-full">
-                  <div className="flex-1 min-w-0">
+                <div className="flex w-full px-4 py-3">
+                  <div className="min-w-0 flex-1">
                     <Link href="/getting-started/nx-and-typescript">
                       <a className="focus:outline-none">
                         <span className="absolute inset-0" aria-hidden="true" />
-                        <p className="mb-0.5 text-md font-bold text-gray-600">
+                        <p className="text-md mb-0.5 font-bold text-gray-600">
                           Nx and TypeScript
                         </p>
                         <p className="text-xs text-gray-500">
@@ -871,9 +871,9 @@ function TypescriptPane(): ReactComponentElement<any> {
                     </Link>
                   </div>
                   <div className="flex-shrink-0">
-                    <div className="p-2 rounded-full text-white bg-[#3178C6]">
+                    <div className="rounded-full bg-[#3178C6] p-2 text-white">
                       <svg
-                        className="p-0.5 w-6 h-6"
+                        className="h-6 w-6 p-0.5"
                         role="img"
                         viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg"
@@ -884,7 +884,7 @@ function TypescriptPane(): ReactComponentElement<any> {
                     </div>
                   </div>
                 </div>
-                <div className="mt-2 px-4 py-3 w-full flex items-center space-x-2 border-t border-gray-200 bg-gray-50 text-gray-400">
+                <div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     className="h-4 w-4"
@@ -907,14 +907,14 @@ function TypescriptPane(): ReactComponentElement<any> {
               <motion.div
                 custom={0.6}
                 variants={opacityTranslateYVariant}
-                className="relative flex flex-col items-center rounded-lg border border-gray-300 flex items-center bg-white hover:bg-gray-50 shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base overflow-hidden"
+                className="focus-within:ring-blue-nx-base relative flex flex flex-col items-center items-center overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50"
               >
-                <div className="px-4 py-3 flex w-full">
-                  <div className="flex-1 min-w-0">
+                <div className="flex w-full px-4 py-3">
+                  <div className="min-w-0 flex-1">
                     <Link href="/migration/adding-to-monorepo">
                       <a className="focus:outline-none">
                         <span className="absolute inset-0" aria-hidden="true" />
-                        <p className="mb-0.5 text-md font-bold text-gray-600">
+                        <p className="text-md mb-0.5 font-bold text-gray-600">
                           Lerna migration
                         </p>
                         <p className="text-xs text-gray-500">
@@ -924,16 +924,16 @@ function TypescriptPane(): ReactComponentElement<any> {
                     </Link>
                   </div>
                   <div className="flex-shrink-0">
-                    <div className="p-2 rounded-full text-white bg-gradient-to-tr from-green-400 via-blue-500 to-pink-500">
+                    <div className="rounded-full bg-gradient-to-tr from-green-400 via-blue-500 to-pink-500 p-2 text-white">
                       <img
-                        className="h-6 w-6 filter invert"
+                        className="h-6 w-6 invert filter"
                         src="/images/lerna-logo.svg"
                         alt="Migrating to Nx from Lerna"
                       />
                     </div>
                   </div>
                 </div>
-                <div className="mt-2 px-4 py-3 w-full flex items-center space-x-2 border-t border-gray-200 bg-gray-50 text-gray-400">
+                <div className="mt-2 flex w-full items-center space-x-2 border-t border-gray-200 bg-gray-50 px-4 py-3 text-gray-400">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     className="h-4 w-4"
@@ -970,7 +970,7 @@ export function GettingStarted(): ReactComponentElement<any> {
         <svg
           viewBox="0 0 24 24"
           className={cx(
-            'w-8 h-8 flex-shrink-0 group-hover:text-[#3178C6] transition ease-out',
+            'h-8 w-8 flex-shrink-0 transition ease-out group-hover:text-[#3178C6]',
             active ? 'text-[#3178C6]' : 'text-gray-400'
           )}
           fill="currentColor"
@@ -986,7 +986,7 @@ export function GettingStarted(): ReactComponentElement<any> {
         <svg
           viewBox="0 0 24 24"
           className={cx(
-            'w-8 h-8 flex-shrink-0 group-hover:text-[#52C1DE] transition ease-out',
+            'h-8 w-8 flex-shrink-0 transition ease-out group-hover:text-[#52C1DE]',
             active ? 'text-[#52C1DE]' : 'text-gray-400'
           )}
           fill="currentColor"
@@ -1002,7 +1002,7 @@ export function GettingStarted(): ReactComponentElement<any> {
         <svg
           viewBox="0 0 24 24"
           className={cx(
-            'w-8 h-8 flex-shrink-0 group-hover:text-[#E2431F] transition ease-out',
+            'h-8 w-8 flex-shrink-0 transition ease-out group-hover:text-[#E2431F]',
             active ? 'text-[#E2431F]' : 'text-gray-400'
           )}
           fill="currentColor"
@@ -1018,7 +1018,7 @@ export function GettingStarted(): ReactComponentElement<any> {
         <svg
           viewBox="0 0 24 24"
           className={cx(
-            'w-8 h-8 flex-shrink-0 group-hover:text-[#77AE64] transition ease-out',
+            'h-8 w-8 flex-shrink-0 transition ease-out group-hover:text-[#77AE64]',
             active ? 'text-[#77AE64]' : 'text-gray-400'
           )}
           fill="currentColor"
diff --git a/nx-dev/ui-home/src/lib/monorepo-features.tsx b/nx-dev/ui-home/src/lib/monorepo-features.tsx
index d14fe05fa6..66ef7f52ce 100644
--- a/nx-dev/ui-home/src/lib/monorepo-features.tsx
+++ b/nx-dev/ui-home/src/lib/monorepo-features.tsx
@@ -196,9 +196,9 @@ export function MonorepoFeatures(): ReactComponentElement<any> {
             },
           },
         }}
-        className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24"
+        className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
       >
-        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
+        <div className="mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
           <div>
             <div className="mt-6">
               <motion.h1
@@ -225,26 +225,26 @@ export function MonorepoFeatures(): ReactComponentElement<any> {
           </div>
         </div>
         <div className="mm:mt-16 lg:mt-0">
-          <div className="px-4 m-0 lg:px-0 lg:relative lg:h-full">
-            <div className="h-full py-14 grid items-center grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="m-0 px-4 lg:relative lg:h-full lg:px-0">
+            <div className="grid h-full grid-cols-1 items-center gap-4 py-14 md:grid-cols-2">
               {featureItems.map((item, index: number) => (
                 <motion.div
                   key={'monorepo-feature-' + index}
                   variants={opacityTranslateXVariant}
                   className={cx(
-                    'relative rounded-lg border border-gray-300 bg-white px-4 py-3 shadow-md flex items-center space-x-4 hover:bg-gray-50 transition focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-nx-base',
+                    'focus-within:ring-blue-nx-base relative flex items-center space-x-4 rounded-lg border border-gray-300 bg-white px-4 py-3 shadow-md transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50',
                     [2, 3].includes(index) && 'lg:-left-8'
                   )}
                 >
                   <div
                     className={cx(
-                      'flex-shrink-0 p-2 rounded-full text-white ',
+                      'flex-shrink-0 rounded-full p-2 text-white ',
                       item.classNames
                     )}
                   >
                     {item.svg}
                   </div>
-                  <div className="flex-1 min-w-0">
+                  <div className="min-w-0 flex-1">
                     <Link href={item.link}>
                       <a className="focus:outline-none">
                         <span className="absolute inset-0" aria-hidden="true" />
diff --git a/nx-dev/ui-home/src/lib/nx-playbook.tsx b/nx-dev/ui-home/src/lib/nx-playbook.tsx
index 0c2ba88a74..623cd2dc67 100644
--- a/nx-dev/ui-home/src/lib/nx-playbook.tsx
+++ b/nx-dev/ui-home/src/lib/nx-playbook.tsx
@@ -15,7 +15,7 @@ export function NxPlaybook(): ReactComponentElement<any> {
   return (
     <article
       id="nx-playbook"
-      className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+      className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
     >
       <motion.div
         ref={ref}
@@ -32,10 +32,10 @@ export function NxPlaybook(): ReactComponentElement<any> {
             },
           },
         }}
-        className="bg-blue-nx-base rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
+        className="bg-blue-nx-base overflow-hidden rounded-lg shadow-xl lg:grid lg:grid-cols-2 lg:gap-4"
       >
-        <div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
-          <div className="lg:self-center relative">
+        <div className="px-6 pt-10 pb-12 sm:px-16 sm:pt-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
+          <div className="relative lg:self-center">
             <h1 className="text-3xl font-extrabold text-white sm:text-4xl">
               <span className="block">Premium courses</span>
               <span className="block">to know everything</span>
@@ -50,7 +50,7 @@ export function NxPlaybook(): ReactComponentElement<any> {
                 title="Dedicated carefully created Nx courses to get you up and running in no time"
                 rel="nofollow"
                 target="_blank"
-                className="mt-8 bg-white border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-blue-nx-base hover:bg-gray-100"
+                className="text-blue-nx-base mt-8 inline-flex items-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium shadow hover:bg-gray-100"
               >
                 Check the courses on NxPlaybook
               </a>
@@ -59,11 +59,11 @@ export function NxPlaybook(): ReactComponentElement<any> {
         </div>
         <div
           aria-hidden="true"
-          className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1"
+          className="aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1 -mt-6"
         >
           <img
             loading="lazy"
-            className="transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
+            className="translate-x-6 translate-y-6 transform rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
             src="/images/nx-playbook.webp"
             alt="nx courses on nxplaybook.com"
           />
diff --git a/nx-dev/ui-home/src/lib/open-platform.tsx b/nx-dev/ui-home/src/lib/open-platform.tsx
index 1199cab31f..cfbe936c58 100644
--- a/nx-dev/ui-home/src/lib/open-platform.tsx
+++ b/nx-dev/ui-home/src/lib/open-platform.tsx
@@ -5,7 +5,7 @@ import { useInView } from 'react-intersection-observer';
 const featureItems: ReactComponentElement<any>[] = [
   <svg
     id="typescript-logo"
-    className="w-full max-h-12 fill-current text-[#3178C6]"
+    className="max-h-12 w-full fill-current text-[#3178C6]"
     role="img"
     viewBox="0 0 24 24"
   >
@@ -13,7 +13,7 @@ const featureItems: ReactComponentElement<any>[] = [
   </svg>,
   <svg
     id="python-logo"
-    className="w-full max-h-12 fill-current text-yellow-500"
+    className="max-h-12 w-full fill-current text-yellow-500"
     role="img"
     viewBox="0 0 24 24"
   >
@@ -21,14 +21,14 @@ const featureItems: ReactComponentElement<any>[] = [
   </svg>,
   <svg
     id="go-logo"
-    className="w-full max-h-12 fill-current text-[#7FD5EA]"
+    className="max-h-12 w-full fill-current text-[#7FD5EA]"
     viewBox="0 0 24 24"
   >
     <path d="M1.811 10.231c-.047 0-.058-.023-.035-.059l.246-.315c.023-.035.081-.058.128-.058h4.172c.046 0 .058.035.035.07l-.199.303c-.023.036-.082.07-.117.07zM.047 11.306c-.047 0-.059-.023-.035-.058l.245-.316c.023-.035.082-.058.129-.058h5.328c.047 0 .07.035.058.07l-.093.28c-.012.047-.058.07-.105.07zm2.828 1.075c-.047 0-.059-.035-.035-.07l.163-.292c.023-.035.07-.07.117-.07h2.337c.047 0 .07.035.07.082l-.023.28c0 .047-.047.082-.082.082zm12.129-2.36c-.736.187-1.239.327-1.963.514-.176.046-.187.058-.34-.117-.174-.199-.303-.327-.548-.444-.737-.362-1.45-.257-2.115.175-.795.514-1.204 1.274-1.192 2.22.011.935.654 1.706 1.577 1.835.795.105 1.46-.175 1.987-.77.105-.13.198-.27.315-.434H10.47c-.245 0-.304-.152-.222-.35.152-.362.432-.97.596-1.274a.315.315 0 01.292-.187h4.253c-.023.316-.023.631-.07.947a4.983 4.983 0 01-.958 2.29c-.841 1.11-1.94 1.8-3.33 1.986-1.145.152-2.209-.07-3.143-.77-.865-.655-1.356-1.52-1.484-2.595-.152-1.274.222-2.419.993-3.424.83-1.086 1.928-1.776 3.272-2.02 1.098-.2 2.15-.07 3.096.571.62.41 1.063.97 1.356 1.648.07.105.023.164-.117.2m3.868 6.461c-1.064-.024-2.034-.328-2.852-1.029a3.665 3.665 0 01-1.262-2.255c-.21-1.32.152-2.489.947-3.529.853-1.122 1.881-1.706 3.272-1.95 1.192-.21 2.314-.095 3.33.595.923.63 1.496 1.484 1.648 2.605.198 1.578-.257 2.863-1.344 3.962-.771.783-1.718 1.273-2.805 1.495-.315.06-.63.07-.934.106zm2.78-4.72c-.011-.153-.011-.27-.034-.387-.21-1.157-1.274-1.81-2.384-1.554-1.087.245-1.788.935-2.045 2.033-.21.912.234 1.835 1.075 2.21.643.28 1.285.244 1.905-.07.923-.48 1.425-1.228 1.484-2.233z" />
   </svg>,
   <svg
     id="rust-logo"
-    className="w-full max-h-12 fill-current text-gray-800"
+    className="max-h-12 w-full fill-current text-gray-800"
     role="img"
     viewBox="0 0 24 24"
   >
@@ -36,7 +36,7 @@ const featureItems: ReactComponentElement<any>[] = [
   </svg>,
   <svg
     id="kotlin-logo"
-    className="w-full max-h-12 fill-current text-purple-500"
+    className="max-h-12 w-full fill-current text-purple-500"
     role="img"
     viewBox="0 0 24 24"
   >
@@ -44,7 +44,7 @@ const featureItems: ReactComponentElement<any>[] = [
   </svg>,
   <svg
     id=".net-logo"
-    className="w-full max-h-12 fill-current text-gray-800"
+    className="max-h-12 w-full fill-current text-gray-800"
     role="img"
     viewBox="0 0 24 24"
   >
@@ -84,7 +84,7 @@ export function OpenPlatform(): ReactComponentElement<any> {
   return (
     <article
       id="open-platform"
-      className="mt-32 max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"
+      className="mx-auto mt-32 max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8"
     >
       <motion.div
         ref={ref}
@@ -103,7 +103,7 @@ export function OpenPlatform(): ReactComponentElement<any> {
             },
           },
         }}
-        className="lg:grid lg:grid-cols-2 lg:gap-24 lg:items-center lg:grid-flow-col-dense"
+        className="lg:grid lg:grid-flow-col-dense lg:grid-cols-2 lg:items-center lg:gap-24"
       >
         <div>
           <div className="mt-6">
@@ -135,7 +135,7 @@ export function OpenPlatform(): ReactComponentElement<any> {
             <motion.div
               key={'open-platform-' + index}
               variants={opacityTranslateXVariant}
-              className="col-span-1 flex justify-center py-8 px-8 bg-white rounded-md border border-gray-300 "
+              className="col-span-1 flex justify-center rounded-md border border-gray-300 bg-white py-8 px-8 "
             >
               {svg}
             </motion.div>
diff --git a/nx-dev/ui-home/src/lib/open-source-projects.tsx b/nx-dev/ui-home/src/lib/open-source-projects.tsx
index ae13a693f8..94f0f77ca6 100644
--- a/nx-dev/ui-home/src/lib/open-source-projects.tsx
+++ b/nx-dev/ui-home/src/lib/open-source-projects.tsx
@@ -13,7 +13,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
         'The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!',
       icon: (
         <svg
-          className="w-10 h-auto text-[#FF4785]"
+          className="h-auto w-10 text-[#FF4785]"
           fill="currentColor"
           role="img"
           viewBox="0 0 24 24"
@@ -30,7 +30,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
         'Fluent UI web represents a collection of utilities, React components, and web components for building web applications.',
       icon: (
         <svg
-          className="w-10 h-auto text-[#5E5E5E]"
+          className="h-auto w-10 text-[#5E5E5E]"
           fill="currentColor"
           role="img"
           viewBox="0 0 24 24"
@@ -46,7 +46,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
       description: 'Reactive libraries for Angular.',
       icon: (
         <svg
-          className="w-10 h-auto"
+          className="h-auto w-10"
           role="img"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 1000 1000"
@@ -85,7 +85,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
         'NativeScript empowers you to access native platform APIs from JavaScript directly. Angular, Capacitor, Ionic, React, Svelte, Vue and you name it compatible.',
       icon: (
         <svg
-          className="w-10 h-auto text-[#3655FF]"
+          className="h-auto w-10 text-[#3655FF]"
           fill="currentColor"
           role="img"
           viewBox="0 0 24 24"
@@ -102,7 +102,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
         'Monorepo for all the tooling which enables ESLint to support TypeScript',
       icon: (
         <svg
-          className="w-10 h-auto text-[#3178C6]"
+          className="h-auto w-10 text-[#3178C6]"
           fill="currentColor"
           role="img"
           viewBox="0 0 24 24"
@@ -119,7 +119,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
         'The Homebridge UI. Monitor, configure and backup Homebridge from a browser.',
       icon: (
         <svg
-          className="w-10 h-auto text-[#491F59]"
+          className="h-auto w-10 text-[#491F59]"
           fill="currentColor"
           role="img"
           viewBox="0 0 24 24"
@@ -154,7 +154,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
         'Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)',
       icon: (
         <svg
-          className="w-10 h-auto"
+          className="h-auto w-10"
           role="img"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 27"
@@ -192,7 +192,7 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
         'WooCommerce is a customizable, open-source eCommerce platform built on WordPress. Get started quickly and make your way.',
       icon: (
         <svg
-          className="w-10 h-auto text-[#96588A]"
+          className="h-auto w-10 text-[#96588A]"
           fill="currentColor"
           role="img"
           viewBox="0 0 24 24"
@@ -263,9 +263,9 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
             },
           },
         }}
-        className="lg:mx-auto lg:max-w-7xl p-4 flex"
+        className="flex p-4 lg:mx-auto lg:max-w-7xl"
       >
-        <div className="w-full rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 divide-y-0 grid grid-cols-2 gap-px">
+        <div className="grid w-full grid-cols-2 gap-px divide-y divide-y-0 divide-gray-200 overflow-hidden rounded-lg bg-gray-200 shadow">
           {projectList.map((project, index: number) => (
             <motion.div
               key={project.title + '-' + index}
@@ -278,11 +278,11 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
                 index === projectList.length - 1
                   ? 'rounded-br-lg rounded-bl-none'
                   : '',
-                'relative w-full group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-nx-base'
+                'group focus-within:ring-blue-nx-base relative w-full bg-white p-6 focus-within:ring-2 focus-within:ring-inset'
               )}
             >
               <div>
-                <span className="rounded-lg inline-flex">{project.icon}</span>
+                <span className="inline-flex rounded-lg">{project.icon}</span>
               </div>
               <div className="sm:mt-2">
                 <p className="text-lg font-medium">
@@ -298,12 +298,12 @@ export function OpenSourceProjects(): ReactComponentElement<any> {
                     </a>
                   </Link>
                 </p>
-                <p className="mt-2 hidden sm:block text-sm text-gray-400">
+                <p className="mt-2 hidden text-sm text-gray-400 sm:block">
                   {project.description}
                 </p>
               </div>
               <span
-                className="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400 transition-all group-hover:translate-x-2 group-hover:-translate-y-2"
+                className="pointer-events-none absolute top-6 right-6 text-gray-300 transition-all group-hover:translate-x-2 group-hover:-translate-y-2 group-hover:text-gray-400"
                 aria-hidden="true"
               >
                 <svg
diff --git a/nx-dev/ui-home/src/lib/performance.tsx b/nx-dev/ui-home/src/lib/performance.tsx
index 08757a1bd3..33ac06e434 100644
--- a/nx-dev/ui-home/src/lib/performance.tsx
+++ b/nx-dev/ui-home/src/lib/performance.tsx
@@ -84,9 +84,9 @@ export function Performance(): ReactComponentElement<any> {
             },
           },
         }}
-        className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24"
+        className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
       >
-        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
+        <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
           <div>
             <div className="mt-6">
               <motion.h1
@@ -107,7 +107,7 @@ export function Performance(): ReactComponentElement<any> {
           </div>
         </div>
         <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:col-start-1">
-          <div className="p-8 lg:pt-0 lg:pl-0 lg:pb-8 lg:pr-8 col-span-1 flex flex-col justify-center border-r border-b border-gray-100">
+          <div className="col-span-1 flex flex-col justify-center border-r border-b border-gray-100 p-8 lg:pt-0 lg:pl-0 lg:pb-8 lg:pr-8">
             <div className="text-lg text-gray-600">Up to</div>
             <div
               aria-hidden="true"
@@ -121,7 +121,7 @@ export function Performance(): ReactComponentElement<any> {
               reduction in CI time for mid-size projects with standard CI setups
             </div>
           </div>
-          <div className="p-8 lg:pr-0 lg:pt-0 lg:pb-8 lg:pl-8 col-span-1 flex flex-col justify-center border-l border-b border-gray-100">
+          <div className="col-span-1 flex flex-col justify-center border-l border-b border-gray-100 p-8 lg:pr-0 lg:pt-0 lg:pb-8 lg:pl-8">
             <div className="text-lg text-gray-600">Up to</div>
             <div
               aria-hidden="true"
@@ -135,7 +135,7 @@ export function Performance(): ReactComponentElement<any> {
               reduction in CI time for large projects with standard CI setups
             </div>
           </div>
-          <div className="p-8 lg:pb-0 lg:pl-0 lg:pt-8 lg:pr-8 col-span-1 flex flex-col justify-center border-r border-t border-gray-100">
+          <div className="col-span-1 flex flex-col justify-center border-r border-t border-gray-100 p-8 lg:pb-0 lg:pl-0 lg:pt-8 lg:pr-8">
             <div className="text-lg text-gray-600">Up to</div>
             <div
               aria-hidden="true"
@@ -150,7 +150,7 @@ export function Performance(): ReactComponentElement<any> {
               distributed CI setups
             </div>
           </div>
-          <div className="p-8 lg:pb-0 lg:pr-0 lg:pt-8 lg:pl-8 col-span-1 flex flex-col justify-center border-l border-t border-gray-100">
+          <div className="col-span-1 flex flex-col justify-center border-l border-t border-gray-100 p-8 lg:pb-0 lg:pr-0 lg:pt-8 lg:pl-8">
             <div className="text-lg text-gray-600">Average</div>
             <div
               aria-hidden="true"
diff --git a/nx-dev/ui-home/src/lib/vscode-plugin.tsx b/nx-dev/ui-home/src/lib/vscode-plugin.tsx
index 5816291d7e..313924b11a 100644
--- a/nx-dev/ui-home/src/lib/vscode-plugin.tsx
+++ b/nx-dev/ui-home/src/lib/vscode-plugin.tsx
@@ -52,9 +52,9 @@ export function VscodePlugin(): ReactComponentElement<any> {
             },
           },
         }}
-        className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24"
+        className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8"
       >
-        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
+        <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
           <div>
             <div className="mt-6">
               <motion.h1
@@ -75,7 +75,7 @@ export function VscodePlugin(): ReactComponentElement<any> {
                 <Link href="/using-nx/console">
                   <a
                     title="Get a better monorepo experience with Nx Console"
-                    className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-nx-base hover:bg-blue-nx-dark transition"
+                    className="bg-blue-nx-base hover:bg-blue-nx-dark inline-flex rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm transition"
                   >
                     Install Nx Console
                   </a>
@@ -86,12 +86,12 @@ export function VscodePlugin(): ReactComponentElement<any> {
         </div>
         <div
           aria-hidden="true"
-          className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1"
+          className="mt-12 sm:mt-16 lg:col-start-1 lg:mt-0"
         >
-          <div className="relative px-4 lg:px-0 lg:h-full">
+          <div className="relative px-4 lg:h-full lg:px-0">
             <motion.div
               variants={opacityTranslateXVariant}
-              className="-mt-8 mx-auto w-full max-w-screen-sm rounded-xl shadow-xl border border-gray-300 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none overflow-hidden"
+              className="mx-auto -mt-8 w-full max-w-screen-sm overflow-hidden rounded-xl border border-gray-300 shadow-xl lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
             >
               <Image
                 src="/images/nx-console.webp"
diff --git a/nx-dev/ui-home/src/lib/youtube-channel.tsx b/nx-dev/ui-home/src/lib/youtube-channel.tsx
index 34312ed334..bfbcedf5cf 100644
--- a/nx-dev/ui-home/src/lib/youtube-channel.tsx
+++ b/nx-dev/ui-home/src/lib/youtube-channel.tsx
@@ -15,7 +15,7 @@ export function YoutubeChannel(): ReactComponentElement<any> {
   return (
     <article
       id="youtube-channel"
-      className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+      className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
     >
       <motion.div
         ref={ref}
@@ -32,9 +32,9 @@ export function YoutubeChannel(): ReactComponentElement<any> {
             },
           },
         }}
-        className="bg-blue-nx-base rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
+        className="bg-blue-nx-base overflow-hidden rounded-lg shadow-xl lg:grid lg:grid-cols-2 lg:gap-4"
       >
-        <div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20 lg:order-2">
+        <div className="px-6 pt-10 pb-12 sm:px-16 sm:pt-16 lg:order-2 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
           <div className="lg:self-center">
             <h1 className="text-3xl font-extrabold text-white sm:text-4xl">
               <span className="block">A dedicated</span>
@@ -49,7 +49,7 @@ export function YoutubeChannel(): ReactComponentElement<any> {
                 title="Get the latest resources about Nx"
                 rel="nofollow"
                 target="_blank"
-                className="mt-8 bg-white border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-blue-nx-base hover:bg-gray-100"
+                className="text-blue-nx-base mt-8 inline-flex items-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium shadow hover:bg-gray-100"
               >
                 Check the Nx Youtube channel
               </a>
@@ -58,11 +58,11 @@ export function YoutubeChannel(): ReactComponentElement<any> {
         </div>
         <div
           aria-hidden="true"
-          className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1 lg:order-1"
+          className="aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1 -mt-6 lg:order-1"
         >
           <img
             loading="lazy"
-            className="transform -translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:-translate-x-22 lg:translate-y-20"
+            className="sm:-translate-x-22 -translate-x-6 translate-y-6 transform rounded-md object-cover object-left-top lg:translate-y-20"
             src="/images/nrwlio-channel.webp"
             alt="nrwl youtube channel"
           />
diff --git a/nx-dev/ui-member-card/src/lib/member-card.tsx b/nx-dev/ui-member-card/src/lib/member-card.tsx
index f1f04bbf81..d2f505d6bc 100644
--- a/nx-dev/ui-member-card/src/lib/member-card.tsx
+++ b/nx-dev/ui-member-card/src/lib/member-card.tsx
@@ -9,8 +9,8 @@ export interface Member {
 
 export function MemberCard(data: Member): JSX.Element {
   return (
-    <figure className="py-6 grid grid-cols-5 md:grid-cols-3 gap-12 align-center items-center justify-center">
-      <div className="rounded-full col-span-2 md:col-span-1">
+    <figure className="align-center grid grid-cols-5 items-center justify-center gap-12 py-6 md:grid-cols-3">
+      <div className="col-span-2 rounded-full md:col-span-1">
         <Image
           src={data.imageUrl}
           alt={data.name}
@@ -20,11 +20,11 @@ export function MemberCard(data: Member): JSX.Element {
         />
       </div>
       <div className="col-span-3 md:col-span-2">
-        <h5 className="mb-3 font-input-mono">{data.name}</h5>
+        <h5 className="font-input-mono mb-3">{data.name}</h5>
         <p className="text-gray-400">{data.description}</p>
         {data.twitter ? (
           <a
-            className="mt-6 block font-input-mono"
+            className="font-input-mono mt-6 block"
             href={'https://twitter.com/' + data.twitter}
             target="_blank"
             rel="nofollow"
diff --git a/nx-dev/ui-sponsor-card/src/lib/sponsor-card.tsx b/nx-dev/ui-sponsor-card/src/lib/sponsor-card.tsx
index d71503af9e..cda9c2d6e4 100644
--- a/nx-dev/ui-sponsor-card/src/lib/sponsor-card.tsx
+++ b/nx-dev/ui-sponsor-card/src/lib/sponsor-card.tsx
@@ -8,7 +8,7 @@ export interface Sponsor {
 }
 export function SponsorCard(data: Sponsor) {
   return (
-    <figure className="py-6 h-full grid grid-cols-1 md:grid-cols-3 gap-12 align-center items-center justify-center">
+    <figure className="align-center grid h-full grid-cols-1 items-center justify-center gap-12 py-6 md:grid-cols-3">
       <div className="rounded-full md:col-span-1">
         <a
           className="cursor-pointer"
@@ -20,7 +20,7 @@ export function SponsorCard(data: Sponsor) {
         </a>
       </div>
       <div className="md:col-span-2">
-        <h5 className="mb-3 font-input-mono">{data.name}</h5>
+        <h5 className="font-input-mono mb-3">{data.name}</h5>
         <p className="text-gray-400">{data.description}</p>
       </div>
     </figure>
diff --git a/package.json b/package.json
index 0abf648dcd..acc05628dc 100644
--- a/package.json
+++ b/package.json
@@ -201,6 +201,7 @@
     "postcss-url": "^10.1.1",
     "precise-commits": "1.0.2",
     "prettier": "2.5.1",
+    "prettier-plugin-tailwindcss": "^0.1.5",
     "pretty-quick": "^3.1.0",
     "protractor": "5.4.3",
     "raw-loader": "^4.0.2",
@@ -306,4 +307,4 @@
     "**/xmlhttprequest-ssl": "~1.6.2",
     "immer": "~9.0.6"
   }
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index 1a91267b79..a01e4bbbca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -20086,6 +20086,11 @@ prettier-bytes@^1.0.4:
   resolved "https://registry.npmjs.org/prettier-bytes/-/prettier-bytes-1.0.4.tgz"
   integrity sha1-mUsCqkb2mcULYle1+qp/4lV+YtY=
 
+prettier-plugin-tailwindcss@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.5.tgz#1709b4cea44873cbfefe9862f9f0827a51fe8cc3"
+  integrity sha512-e+jTxwiHL4I3Ot8OjV1LAiiaAx0Zgy71xTL7xNmJtNmhpja7GKzFSAoulqBDS1D57B7lbZDCvDEKIWIQSBUmBQ==
+
 prettier@2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"