diff --git a/docs/nx-cloud/reference/release-notes.md b/docs/nx-cloud/reference/release-notes.md
index aa24db65092ef..b135fcd8f5b66 100644
--- a/docs/nx-cloud/reference/release-notes.md
+++ b/docs/nx-cloud/reference/release-notes.md
@@ -1,5 +1,43 @@
 # Enterprise Release Notes
 
+### 2402.27.3
+
+##### DTE Algorithm V2 Experimental Flag
+
+For the past 2 months, we've been re-writing our entire task distribution algorithm. The aim was to allocate tasks more efficiently to agents,
+reduce total time spent by agents downloading artefacts and reduce idle agent time waiting for tasks.
+
+While the features is still in its beta stage, initial tests do show a big improvement in overall CI completion time
+(but this varies on a case by case basis).
+
+If you are already using DTE or Nx Agents, you can enable this experimental feature by adding the following env var to your main job (the job
+where you invoke `npx start-ci-run`):
+
+```yaml
+NX_CLOUD_DTE_V2: 'true'
+```
+
+##### Nx Agents On-Prem Availability
+
+Since the previous release, we've been testing various options for deploying Nx Agents on-premise.
+
+We now have a dedicate Helm chart dedicated to setting up an Nx Agents cluster on your infrastructure:
+
+1. ⚠️ Please reach out to your DPE first so we can start an Nx Agents trial and discuss any limitations and requirements up-front
+2. You can view the example `values.yaml` [here](https://github.com/nrwl/nx-cloud-helm/blob/main/charts/nx-agents/values.yaml)
+3. Once we had a chance to look at your existing CI compute requirements, you deploy the chart via `helm install nx-cloud nx-cloud/nx-agents --values=helm-values.yml`
+
+##### Audit logger
+
+As an Enterprise installation admin, you can now view audit logs over NxCloud workspace events by visiting `https://<NXCLOUD-URL>/audit-log`.
+
+This includes events such as when a workspace was created, when a new VCS integration was set-up and so on.
+
+##### UI improvements
+
+- Organizations can now be created directly from the "Connect a workspace" screen
+- Full screen terminal outputs for your tasks
+
 ### 2402.27.3.patch3,4,5,6
 
 - Feat: allows customising the base image for the agent init-container (in case it is self-hosted internally in the company)
diff --git a/graph/client/src/app/ui-components/error-boundary.tsx b/graph/client/src/app/ui-components/error-boundary.tsx
index 561a95a691be5..ef823476ea71a 100644
--- a/graph/client/src/app/ui-components/error-boundary.tsx
+++ b/graph/client/src/app/ui-components/error-boundary.tsx
@@ -15,11 +15,11 @@ export function ErrorBoundary() {
   }
 
   return (
-    <div className="flex flex-col items-center h-screen w-full">
+    <div className="flex h-screen w-full flex-col items-center">
       <ProjectDetailsHeader />
-      <h1 className="text-4xl mb-4 dark:text-slate-100">Error</h1>
+      <h1 className="mb-4 text-4xl dark:text-slate-100">Error</h1>
       <div>
-        <p className="text-lg mb-4 dark:text-slate-200">{message}</p>
+        <p className="mb-4 text-lg dark:text-slate-200">{message}</p>
         <p className="text-sm">Error message: {error}</p>
       </div>
     </div>
diff --git a/graph/project-details/src/lib/project-details-header.tsx b/graph/project-details/src/lib/project-details-header.tsx
index c167c662baf97..6082a63bf3fff 100644
--- a/graph/project-details/src/lib/project-details-header.tsx
+++ b/graph/project-details/src/lib/project-details-header.tsx
@@ -5,8 +5,8 @@ import { ThemePanel } from '@nx/graph/ui-theme';
 export function ProjectDetailsHeader() {
   const routeConstructor = useRouteConstructor();
   return (
-    <header className="flex w-full justify-center items-center py-2 mx-auto border-b-2 border-slate-900/10 mb-8 dark:border-slate-300/10">
-      <div className="flex flex-grow items-center justify-between max-w-6xl px-8 ">
+    <header className="mx-auto mb-8 flex w-full items-center justify-center border-b-2 border-slate-900/10 py-2 dark:border-slate-300/10">
+      <div className="flex max-w-6xl flex-grow items-center justify-between px-8 ">
         <Link to={routeConstructor('/projects', false)}>
           <svg
             className="h-10 w-auto text-slate-900 dark:text-white"
diff --git a/graph/project-details/src/lib/project-details-page.tsx b/graph/project-details/src/lib/project-details-page.tsx
index c6e85a8992d86..34263a8ea2139 100644
--- a/graph/project-details/src/lib/project-details-page.tsx
+++ b/graph/project-details/src/lib/project-details-page.tsx
@@ -45,14 +45,14 @@ export function ProjectDetailsPage() {
   );
 
   return (
-    <div className="flex flex-col justify-center w-full text-slate-700 dark:text-slate-400">
+    <div className="flex w-full flex-col justify-center text-slate-700 dark:text-slate-400">
       <ScrollRestoration />
       {environment !== 'nx-console' ? (
         <ProjectDetailsHeader />
       ) : (
         <div className="py-2"></div>
       )}
-      <div className="flex-grow mx-auto w-full max-w-6xl px-8 mb-8">
+      <div className="mx-auto mb-8 w-full max-w-6xl flex-grow px-8">
         <ProjectDetailsWrapper
           project={project}
           sourceMap={sourceMap}
diff --git a/graph/ui-components/src/lib/spinner.tsx b/graph/ui-components/src/lib/spinner.tsx
index 500a5190cc05b..fa84dd2af8500 100644
--- a/graph/ui-components/src/lib/spinner.tsx
+++ b/graph/ui-components/src/lib/spinner.tsx
@@ -9,7 +9,7 @@ export type SpinnerProps = React.SVGProps<SVGSVGElement>;
 export function Spinner({ className, ...rest }: SpinnerProps) {
   return (
     <svg
-      className={`${className} animate-spin h-8 w-8`}
+      className={`${className} h-8 w-8 animate-spin`}
       viewBox="0 0 24 24"
       {...rest}
     >
diff --git a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
index 6d987cd30f2fe..5b9d662e1a88c 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
@@ -141,13 +141,13 @@ export const TargetConfigurationDetails = forwardRef(
         : true);
 
     return (
-      <div className="rounded-md border border-slate-200 dark:border-slate-700/60 relative overflow-hidden">
+      <div className="relative overflow-hidden rounded-md border border-slate-200 dark:border-slate-700/60">
         <header
           className={twMerge(
-            `group hover:bg-slate-50 dark:hover:bg-slate-800/60 cursor-pointer`,
+            `group cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/60`,
             isCompact ? 'px-2 py-1' : 'p-2',
             !collapsed
-              ? 'bg-slate-50 dark:bg-slate-800/60 border-b dark:border-slate-700/60 dark:border-slate-300/10 '
+              ? 'border-b bg-slate-50 dark:border-slate-700/60 dark:border-slate-300/10 dark:bg-slate-800/60 '
               : ''
           )}
           onClick={handleCollapseToggle}
@@ -162,7 +162,7 @@ export const TargetConfigurationDetails = forwardRef(
               <h3 className="font-medium dark:text-slate-300">{targetName}</h3>
               {collapsed &&
                 targetConfiguration?.executor !== '@nx/js:release-publish' && (
-                  <p className="text-slate-400 text-sm">
+                  <p className="text-sm text-slate-400">
                     {singleCommand
                       ? singleCommand
                       : targetConfiguration.executor}
@@ -194,7 +194,7 @@ export const TargetConfigurationDetails = forwardRef(
             <div className="flex items-center gap-2">
               {onViewInTaskGraph && (
                 <button
-                  className="text-slate-600 dark:text-slate-300 text-sm ring-1 ring-inset ring-slate-400/40 dark:ring-slate-400/30 hover:bg-slate-200 dark:hover:bg-slate-700/60 p-1 bg-inherit rounded-md"
+                  className="rounded-md bg-inherit p-1 text-sm text-slate-600 ring-1 ring-inset ring-slate-400/40 hover:bg-slate-200 dark:text-slate-300 dark:ring-slate-400/30 dark:hover:bg-slate-700/60"
                   // TODO: fix tooltip overflow in collapsed state
                   data-tooltip={collapsed ? false : 'View in Task Graph'}
                   data-tooltip-align-right
@@ -211,7 +211,7 @@ export const TargetConfigurationDetails = forwardRef(
 
               {onRunTarget && (
                 <span
-                  className="text-slate-600 dark:text-slate-300 text-sm ring-1 ring-inset ring-slate-400/40 dark:ring-slate-400/30 hover:bg-slate-200 dark:hover:bg-slate-700/60 p-1 bg-inherit rounded-md"
+                  className="rounded-md bg-inherit p-1 text-sm text-slate-600 ring-1 ring-inset ring-slate-400/40 hover:bg-slate-200 dark:text-slate-300 dark:ring-slate-400/30 dark:hover:bg-slate-700/60"
                   // TODO: fix tooltip overflow in collapsed state
                   data-tooltip={collapsed ? false : 'Run Target'}
                   data-tooltip-align-right
@@ -228,8 +228,8 @@ export const TargetConfigurationDetails = forwardRef(
             </div>
           </div>
           {!collapsed && (
-            <div className="flex items-center text-sm mt-2 ml-5">
-              <span className="flex-1 flex min-w-0 items-center">
+            <div className="mt-2 ml-5 flex items-center text-sm">
+              <span className="flex min-w-0 flex-1 items-center">
                 <SourceInfo
                   data={sourceMap[`targets.${targetName}`]}
                   propertyKey={`targets.${targetName}`}
@@ -238,7 +238,7 @@ export const TargetConfigurationDetails = forwardRef(
               </span>
               {targetName !== 'nx-release-publish' && (
                 <div className="flex items-center gap-2">
-                  <code className="ml-4 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 font-mono px-2 py-1 rounded">
+                  <code className="ml-4 rounded bg-gray-100 px-2 py-1 font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                     nx run {projectName}:{targetName}
                   </code>
                   <span>
@@ -257,12 +257,12 @@ export const TargetConfigurationDetails = forwardRef(
         {/* body */}
         {!collapsed && (
           <div className="p-4 text-base">
-            <div className="mb-4 group">
+            <div className="group mb-4">
               <h4 className="mb-4">
                 {singleCommand ? (
                   <span className="font-medium">
                     Command
-                    <span className="hidden group-hover:inline ml-2 mb-1">
+                    <span className="ml-2 mb-1 hidden group-hover:inline">
                       <CopyToClipboard
                         onCopy={() =>
                           handleCopyClick(`"command": "${singleCommand}"`)
@@ -312,7 +312,7 @@ export const TargetConfigurationDetails = forwardRef(
                       <TooltipTriggerText>Inputs</TooltipTriggerText>
                     </span>
                   </Tooltip>
-                  <span className="hidden group-hover:inline ml-2 mb-1">
+                  <span className="ml-2 mb-1 hidden group-hover:inline">
                     <CopyToClipboard
                       onCopy={() =>
                         handleCopyClick(
@@ -324,7 +324,7 @@ export const TargetConfigurationDetails = forwardRef(
                     />
                   </span>
                 </h4>
-                <ul className="list-disc pl-5 mb-4">
+                <ul className="mb-4 list-disc pl-5">
                   {targetConfiguration.inputs.map((input, idx) => {
                     const sourceInfo = selectSourceInfo(
                       sourceMap,
@@ -337,7 +337,7 @@ export const TargetConfigurationDetails = forwardRef(
                       >
                         <TargetConfigurationProperty data={input}>
                           {sourceInfo && (
-                            <span className="opacity-0 flex shrink-1 min-w-0 group-hover/line:opacity-100 transition-opacity duration-150 ease-in-out inline pl-4">
+                            <span className="shrink-1 inline flex min-w-0 pl-4 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
                               <SourceInfo
                                 data={sourceInfo}
                                 propertyKey={`targets.${targetName}.inputs`}
@@ -362,7 +362,7 @@ export const TargetConfigurationDetails = forwardRef(
                       <TooltipTriggerText>Outputs</TooltipTriggerText>
                     </span>
                   </Tooltip>
-                  <span className="hidden group-hover:inline ml-2 mb-1">
+                  <span className="ml-2 mb-1 hidden group-hover:inline">
                     <CopyToClipboard
                       onCopy={() =>
                         handleCopyClick(
@@ -374,7 +374,7 @@ export const TargetConfigurationDetails = forwardRef(
                     />
                   </span>
                 </h4>
-                <ul className="list-disc pl-5 mb-4">
+                <ul className="mb-4 list-disc pl-5">
                   {targetConfiguration.outputs?.map((output, idx) => {
                     const sourceInfo = selectSourceInfo(
                       sourceMap,
@@ -387,7 +387,7 @@ export const TargetConfigurationDetails = forwardRef(
                       >
                         <TargetConfigurationProperty data={output}>
                           {sourceInfo && (
-                            <span className="opacity-0 flex shrink-1 min-w-0 group-hover/line:opacity-100 transition-opacity duration-150 ease-in-out inline pl-4">
+                            <span className="shrink-1 inline flex min-w-0 pl-4 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
                               <SourceInfo
                                 data={sourceInfo}
                                 propertyKey={`targets.${targetName}.outputs`}
@@ -412,7 +412,7 @@ export const TargetConfigurationDetails = forwardRef(
                       <TooltipTriggerText>Depends On</TooltipTriggerText>
                     </span>
                   </Tooltip>
-                  <span className="opacity-0 group-hover/line:opacity-100 transition-opacity duration-150 ease-in-out inline pl-4">
+                  <span className="inline pl-4 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
                     <CopyToClipboard
                       onCopy={() =>
                         handleCopyClick(
@@ -424,7 +424,7 @@ export const TargetConfigurationDetails = forwardRef(
                     />
                   </span>
                 </h4>
-                <ul className="list-disc pl-5 mb-4">
+                <ul className="mb-4 list-disc pl-5">
                   {targetConfiguration.dependsOn.map((dep, idx) => {
                     const sourceInfo = selectSourceInfo(
                       sourceMap,
@@ -437,7 +437,7 @@ export const TargetConfigurationDetails = forwardRef(
                         key={`dependsOn-${idx}`}
                       >
                         <TargetConfigurationProperty data={dep}>
-                          <span className="opacity-0 flex shrink-1 min-w-0 group-hover/line:opacity-100 transition-opacity duration-150 ease-in-out inline pl-4">
+                          <span className="shrink-1 inline flex min-w-0 pl-4 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
                             {sourceInfo && (
                               <SourceInfo
                                 data={sourceInfo}
@@ -475,7 +475,7 @@ export const TargetConfigurationDetails = forwardRef(
                           `targets.${targetName}.options.${propertyName}`
                         );
                         return sourceInfo ? (
-                          <span className="pl-4 flex shrink-1 min-w-0">
+                          <span className="shrink-1 flex min-w-0 pl-4">
                             <SourceInfo
                               data={sourceInfo}
                               propertyKey={`targets.${targetName}.options.${propertyName}`}
@@ -493,7 +493,7 @@ export const TargetConfigurationDetails = forwardRef(
 
             {shouldRenderConfigurations ? (
               <>
-                <h4 className="py-2 mb-4">
+                <h4 className="mb-4 py-2">
                   <Tooltip
                     openAction="hover"
                     content={
@@ -523,7 +523,7 @@ export const TargetConfigurationDetails = forwardRef(
                         `targets.${targetName}.configurations.${propertyName}`
                       );
                       return sourceInfo ? (
-                        <span className="pl-4 flex shrink-1 min-w-0">
+                        <span className="shrink-1 flex min-w-0 pl-4">
                           <SourceInfo
                             data={sourceInfo}
                             propertyKey={`targets.${targetName}.configurations.${propertyName}`}
diff --git a/graph/ui-tooltips/src/lib/property-info-tooltip.tsx b/graph/ui-tooltips/src/lib/property-info-tooltip.tsx
index 036b43471bf29..60b9d52f765f5 100644
--- a/graph/ui-tooltips/src/lib/property-info-tooltip.tsx
+++ b/graph/ui-tooltips/src/lib/property-info-tooltip.tsx
@@ -89,13 +89,13 @@ export function PropertyInfoTooltip({ type }: PropertyInfoTooltipProps) {
   const propertyInfo = PROPERTY_INFO_TOOLTIP_TYPE_OPTIONS[type];
 
   return (
-    <div className="text-sm text-slate-700 dark:text-slate-400 max-w-lg">
-      <h4 className="flex justify-between items-center border-b border-slate-200 dark:border-slate-700/60 text-base">
+    <div className="max-w-lg text-sm text-slate-700 dark:text-slate-400">
+      <h4 className="flex items-center justify-between border-b border-slate-200 text-base dark:border-slate-700/60">
         <span className="font-mono">{propertyInfo.heading}</span>
       </h4>
       <div
         className={twMerge(
-          `flex flex-col font-mono py-2`,
+          `flex flex-col py-2 font-mono`,
           propertyInfo.docsUrl
             ? 'border-b border-slate-200 dark:border-slate-700/60'
             : ''
@@ -107,7 +107,7 @@ export function PropertyInfoTooltip({ type }: PropertyInfoTooltipProps) {
       </div>
       {propertyInfo.docsUrl ? (
         <div className="flex py-2">
-          <p className="pr-4 flex items-center">
+          <p className="flex items-center pr-4">
             <ExternalLink
               text={
                 propertyInfo.docsLinkText ??
diff --git a/nx-dev/feature-ai/src/lib/feed/feed-answer.tsx b/nx-dev/feature-ai/src/lib/feed/feed-answer.tsx
index a63e871b2b3ac..0538904255978 100644
--- a/nx-dev/feature-ai/src/lib/feed/feed-answer.tsx
+++ b/nx-dev/feature-ai/src/lib/feed/feed-answer.tsx
@@ -51,7 +51,7 @@ export function FeedAnswer({
 
   return (
     <>
-      <div className="grid h-12 w-12 items-center justify-center rounded-full bg-white dark:bg-slate-900 ring-1 ring-slate-200 dark:ring-slate-700 text-slate-900 dark:text-white">
+      <div className="grid h-12 w-12 items-center justify-center rounded-full bg-white text-slate-900 ring-1 ring-slate-200 dark:bg-slate-900 dark:text-white dark:ring-slate-700">
         <svg
           role="img"
           viewBox="0 0 24 24"
@@ -65,7 +65,7 @@ export function FeedAnswer({
       </div>
       <div className="min-w-0 flex-1">
         <div>
-          <div className="text-lg flex gap-2 items-center text-slate-900 dark:text-slate-100">
+          <div className="flex items-center gap-2 text-lg text-slate-900 dark:text-slate-100">
             Nx Assistant
           </div>
           <p className="mt-0.5 flex items-center gap-x-1 text-sm text-slate-500">
@@ -76,12 +76,12 @@ export function FeedAnswer({
             AI powered
           </p>
         </div>
-        <div className="mt-2 prose prose-slate dark:prose-invert w-full max-w-none 2xl:max-w-4xl">
+        <div className="prose prose-slate dark:prose-invert mt-2 w-full max-w-none 2xl:max-w-4xl">
           {!isFirst && callout}
           {renderMarkdown(normalizedContent, { filePath: '' }).node}
         </div>
         {!isFirst && (
-          <div className="group text-md flex-1 md:flex md:justify-end gap-4 md:items-center text-slate-400 hover:text-slate-500 transition">
+          <div className="text-md group flex-1 gap-4 text-slate-400 transition hover:text-slate-500 md:flex md:items-center md:justify-end">
             {feedbackStatement ? (
               <p className="italic group-hover:flex">
                 {feedbackStatement === 'good'
@@ -96,7 +96,7 @@ export function FeedAnswer({
             <div className="flex gap-4">
               <button
                 className={cx(
-                  'hover:rotate-12 hover:text-blue-500 dark:hover:text-sky-500 transition-all p-1 disabled:cursor-not-allowed',
+                  'p-1 transition-all hover:rotate-12 hover:text-blue-500 disabled:cursor-not-allowed dark:hover:text-sky-500',
                   { 'text-blue-500': feedbackStatement === 'bad' }
                 )}
                 disabled={!!feedbackStatement}
@@ -108,7 +108,7 @@ export function FeedAnswer({
               </button>
               <button
                 className={cx(
-                  'hover:rotate-12 hover:text-blue-500 dark:hover:text-sky-500 transition-all p-1 disabled:cursor-not-allowed',
+                  'p-1 transition-all hover:rotate-12 hover:text-blue-500 disabled:cursor-not-allowed dark:hover:text-sky-500',
                   { 'text-blue-500': feedbackStatement === 'good' }
                 )}
                 disabled={!!feedbackStatement}
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 cdf07da4738b7..df58f459962bd 100644
--- a/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
+++ b/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
@@ -132,18 +132,18 @@ export function DocViewer({
                           starsCount={widgetData.githubStarsCount}
                         />
                       )}
-                      <div className="flex items-center justify-center my-4 pl-2 pr-2 space-x-2 border rounded-md border-slate-200 hover:border-slate-400 dark:border-slate-700 print:hidden">
+                      <div className="my-4 flex items-center justify-center space-x-2 rounded-md border border-slate-200 pl-2 pr-2 hover:border-slate-400 dark:border-slate-700 print:hidden">
                         <button
                           type="button"
                           aria-label="Give feedback on this page"
                           title="Give feedback of this page"
-                          className="px-4 py-2 border-transparent hover:text-slate-900 dark:hover:text-sky-400 whitespace-nowrap font-bold"
+                          className="whitespace-nowrap border-transparent px-4 py-2 font-bold hover:text-slate-900 dark:hover:text-sky-400"
                           onClick={() => setShowFeedback(true)}
                         >
                           Feedback
                         </button>
                       </div>
-                      <div className="flex items-center justify-center my-4 pl-2 pr-2 space-x-2 border rounded-md border-slate-200 hover:border-slate-400 dark:border-slate-700 print:hidden">
+                      <div className="my-4 flex items-center justify-center space-x-2 rounded-md border border-slate-200 pl-2 pr-2 hover:border-slate-400 dark:border-slate-700 print:hidden">
                         {document.filePath ? (
                           <a
                             aria-hidden="true"
@@ -159,7 +159,7 @@ export function DocViewer({
                             target="_blank"
                             rel="noreferrer"
                             title="Edit this page on GitHub"
-                            className="px-4 py-2 border-transparent hover:text-slate-900 dark:hover:text-sky-400 whitespace-nowrap font-bold"
+                            className="whitespace-nowrap border-transparent px-4 py-2 font-bold hover:text-slate-900 dark:hover:text-sky-400"
                           >
                             Edit this page
                           </a>
@@ -175,7 +175,7 @@ export function DocViewer({
             <div
               data-document="related"
               className={cx(
-                'pt-8 prose prose-slate dark:prose-invert w-full max-w-none 2xl:max-w-4xl',
+                'prose prose-slate dark:prose-invert w-full max-w-none pt-8 2xl:max-w-4xl',
                 { 'xl:max-w-2xl': !hideTableOfContent }
               )}
             >
diff --git a/nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx b/nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx
index cdeca25df1eb6..a9d733d82c55a 100644
--- a/nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx
+++ b/nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx
@@ -15,7 +15,7 @@ export function RelatedDocumentsSection({
   relatedCategories: RelatedDocumentsCategory[];
 }) {
   return (
-    <div className="grid  lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-3 items-stretch">
+    <div className="grid  grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:grid-cols-3">
       {relatedCategories.length > 0 &&
         relatedCategories.map((category) => (
           <CategoryBox key={category.id} category={category} />
@@ -25,38 +25,38 @@ export function RelatedDocumentsSection({
 }
 
 const iconMap: { [key: string]: JSX.Element } = {
-  concepts: <CubeTransparentIcon className="w-6 h-6 mr-2" aria-hidden="true" />,
+  concepts: <CubeTransparentIcon className="mr-2 h-6 w-6" aria-hidden="true" />,
   recipes: (
-    <ClipboardDocumentIcon className="w-6 h-6 mr-2" aria-hidden="true" />
+    <ClipboardDocumentIcon className="mr-2 h-6 w-6" aria-hidden="true" />
   ),
-  reference: <LightBulbIcon className="w-6 h-6 mr-2" aria-hidden="true" />,
+  reference: <LightBulbIcon className="mr-2 h-6 w-6" aria-hidden="true" />,
   'see-also': (
-    <MagnifyingGlassIcon className="w-6 h-6 mr-2" aria-hidden="true" />
+    <MagnifyingGlassIcon className="mr-2 h-6 w-6" aria-hidden="true" />
   ),
   default: (
-    <InformationCircleIcon className="w-6 h-6 mr-2" aria-hidden="true" />
+    <InformationCircleIcon className="mr-2 h-6 w-6" aria-hidden="true" />
   ),
 };
 
 function CategoryBox({ category }: { category: RelatedDocumentsCategory }) {
   return (
     <div className="rounded-lg border border-slate-200 bg-white/60 p-5 dark:border-slate-800/40 dark:bg-slate-800/60">
-      <h4 className="flex items-center mt-0 pb-2 text-xl font-bold">
+      <h4 className="mt-0 flex items-center pb-2 text-xl font-bold">
         {iconMap[category.id] ?? iconMap.default}
         {category.name}
       </h4>
-      <ul className="divide-y divide-slate-300 dark:divide-slate-700 list-none pl-0">
+      <ul className="list-none divide-y divide-slate-300 pl-0 dark:divide-slate-700">
         {category.relatedDocuments.map((d) => (
           <li
             key={d.id}
-            className="flex justify-between items-center py-1 pl-0 text-sm"
+            className="flex items-center justify-between py-1 pl-0 text-sm"
           >
             <Link
               href={d.path}
-              className="no-underline hover:underline hover:text-sky-600 dark:hover:text-sky-400 flex-grow flex justify-between items-center"
+              className="flex flex-grow items-center justify-between no-underline hover:text-sky-600 hover:underline dark:hover:text-sky-400"
             >
               <span>{d.name}</span>
-              <ArrowRightIcon className="w-4 h-4 text-slate-500 dark:text-slate-400" />
+              <ArrowRightIcon className="h-4 w-4 text-slate-500 dark:text-slate-400" />
             </Link>
           </li>
         ))}
diff --git a/nx-dev/feature-doc-viewer/src/lib/table-of-contents.tsx b/nx-dev/feature-doc-viewer/src/lib/table-of-contents.tsx
index bfb15aabf6d67..05c35a399a28b 100644
--- a/nx-dev/feature-doc-viewer/src/lib/table-of-contents.tsx
+++ b/nx-dev/feature-doc-viewer/src/lib/table-of-contents.tsx
@@ -78,7 +78,7 @@ export function TableOfContents({
       <nav className="toc">
         <span className="pl-4 font-medium">On this page</span>
         {!!items.length ? (
-          <ul className="flex-col mt-4">
+          <ul className="mt-4 flex-col">
             {items.map((item) => {
               const href = `${path}#${item.id}`;
               return (
diff --git a/nx-dev/feature-feedback/src/lib/feedback-dialog.tsx b/nx-dev/feature-feedback/src/lib/feedback-dialog.tsx
index b84c9b30befd3..de46a5432a9be 100644
--- a/nx-dev/feature-feedback/src/lib/feedback-dialog.tsx
+++ b/nx-dev/feature-feedback/src/lib/feedback-dialog.tsx
@@ -67,13 +67,13 @@ function FeedbackDialog({
         >
           {/* This is the backdrop */}
           <div
-            className="fixed inset-0 bg-black/10 dark:bg-white/10 backdrop-blur-sm"
+            className="fixed inset-0 bg-black/10 backdrop-blur-sm dark:bg-white/10"
             aria-hidden="true"
           />
         </Transition.Child>
 
         {/* This is the modal */}
-        <div className="fixed inset-0 overflow-y-auto w-full">
+        <div className="fixed inset-0 w-full overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4">
             <Transition.Child
               as={Fragment}
@@ -84,10 +84,10 @@ function FeedbackDialog({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white dark:bg-slate-900 p-6 text-left align-middle shadow-xl transition-all relative">
+              <Dialog.Panel className="relative w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all dark:bg-slate-900">
                 <Dialog.Title
                   as="h3"
-                  className="text-lg p-4 font-medium leading-6 text-center bg-white text-slate-700 dark:bg-slate-900 dark:text-slate-400"
+                  className="bg-white p-4 text-center text-lg font-medium leading-6 text-slate-700 dark:bg-slate-900 dark:text-slate-400"
                 >
                   What is on your mind?
                   <button className={styles.closebutton} onClick={closeDialog}>
@@ -106,7 +106,7 @@ function FeedbackDialog({
             - The Idea feedback opens up a textarea and a submit/done button
             - The Github feedback opens up a new tab to the Github issues page
          */}
-                <ul className="grid w-full gap-6 md:grid-cols-2 pb-10">
+                <ul className="grid w-full gap-6 pb-10 md:grid-cols-2">
                   <li>
                     <a
                       id="github"
@@ -119,7 +119,7 @@ function FeedbackDialog({
                     >
                       <label
                         htmlFor="github"
-                        className="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700"
+                        className="inline-flex w-full cursor-pointer items-center justify-between rounded-lg border border-gray-200 bg-white p-5 text-gray-500 hover:bg-gray-100 hover:text-gray-600 peer-checked:border-blue-600 peer-checked:text-blue-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-blue-500"
                       >
                         <div className="block">
                           <div className="w-full text-lg font-semibold">
@@ -127,7 +127,7 @@ function FeedbackDialog({
                           </div>
                           <div className="w-full">Found an issue?</div>
                         </div>
-                        <GithubIcon className="w-14 h-14" />
+                        <GithubIcon className="h-14 w-14" />
                       </label>
                     </a>
                   </li>
@@ -137,7 +137,7 @@ function FeedbackDialog({
                       id="idea"
                       name="feedback_selection"
                       value="idea"
-                      className="hidden peer"
+                      className="peer hidden"
                       checked={isIdea !== null && isIdea}
                       onChange={handleFeedbackSelectionChange}
                     />
@@ -145,7 +145,7 @@ function FeedbackDialog({
                       htmlFor="idea"
                       tabIndex={0}
                       onKeyDown={(e) => keydownHandler(e)}
-                      className="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-sky-500 peer-checked:border-sky-500 focus:outline-none focus:ring-1 peer-checked:text-sky-500 hover:bg-slate-50 dark:text-slate-400 dark:bg-gray-800 dark:hover:bg-slate-800 dark:focus-within:ring-sky-500"
+                      className="inline-flex w-full cursor-pointer items-center justify-between rounded-lg border border-gray-200 bg-white p-5 text-gray-500 hover:bg-slate-50 focus:outline-none focus:ring-1 peer-checked:border-sky-500 peer-checked:text-sky-500 dark:border-gray-700 dark:bg-gray-800 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800 dark:hover:text-gray-300 dark:peer-checked:text-sky-500"
                     >
                       <div className="block">
                         <div className="w-full text-lg font-semibold">Idea</div>
@@ -154,7 +154,7 @@ function FeedbackDialog({
                       <svg
                         width="14px"
                         height="14px"
-                        className="w-14 h-full"
+                        className="h-full w-14"
                         viewBox="0 0 14 14"
                         version="1.1"
                       >
@@ -227,10 +227,10 @@ function FeedbackDialog({
                         onChange={updateFeedback}
                       ></textarea>
                     </Dialog.Description>
-                    <Dialog.Description className="mt-4 relative flex justify-end rounded-l-md">
+                    <Dialog.Description className="relative mt-4 flex justify-end rounded-l-md">
                       <button
                         onClick={submitFeedback}
-                        className="border border-slate-200 rounded-md bg-white px-4 py-2 text-base font-medium text-slate-600 focus-within:ring-blue-500 hover:bg-slate-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-600 focus-within:ring-blue-500 hover:bg-slate-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800"
+                        className="dark:hover:bg-slate-800border rounded-md border border-slate-200 border-slate-200 bg-white bg-white px-4 px-4 py-2 py-2 text-base text-xs font-medium font-medium text-slate-600 text-slate-600 focus-within:ring-blue-500 focus-within:ring-blue-500 hover:bg-slate-50 hover:bg-slate-50 focus:z-10 focus:z-10 focus:outline-none focus:outline-none focus:ring-1 focus:ring-1 dark:border-slate-700 dark:border-slate-700 dark:bg-slate-800/60 dark:bg-slate-800/60 dark:text-slate-400 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800"
                       >
                         Done
                       </button>
diff --git a/nx-dev/nx-dev/pages/changelog.tsx b/nx-dev/nx-dev/pages/changelog.tsx
index ff50b72552b86..c5e6d070ea900 100644
--- a/nx-dev/nx-dev/pages/changelog.tsx
+++ b/nx-dev/nx-dev/pages/changelog.tsx
@@ -240,21 +240,21 @@ export default function Changelog(props: ChangeLogProps): JSX.Element {
           </header>
           <ul className="m-0 space-y-6 py-6">
             {renderedChangelog.map((changelog, idx) => (
-              <li key={changelog.version} className="relative sm:flex gap-x-4">
+              <li key={changelog.version} className="relative gap-x-4 sm:flex">
                 <div
                   className={cx(
                     idx === renderedChangelog.length - 1 ? 'h-6' : '-bottom-6',
-                    'absolute left-0 top-0 sm:flex w-6 justify-center hidden'
+                    'absolute left-0 top-0 hidden w-6 justify-center sm:flex'
                   )}
                 >
                   <div className="w-px bg-slate-200 dark:bg-slate-700" />
                 </div>
-                <div className="mt-1 hidden relative sm:flex h-6 w-6 flex-none items-center justify-center">
-                  <div className="h-2 w-2 rounded-full bg-slate-100 ring-1 ring-slate-300 dark:ring-slate-500 dark:bg-slate-600" />
+                <div className="relative mt-1 hidden h-6 w-6 flex-none items-center justify-center sm:flex">
+                  <div className="h-2 w-2 rounded-full bg-slate-100 ring-1 ring-slate-300 dark:bg-slate-600 dark:ring-slate-500" />
                 </div>
                 <div
                   id={changelog.version}
-                  className="flex flex-col w-36 shrink-0 group"
+                  className="group flex w-36 shrink-0 flex-col"
                 >
                   <p className="py-0.5">
                     <a
@@ -262,7 +262,7 @@ export default function Changelog(props: ChangeLogProps): JSX.Element {
                       href={`https://github.com/nrwl/nx/releases/tag/${changelog.version}`}
                       target="_blank"
                       rel="noreferrer"
-                      className="text-xl leading-5 font-medium text-slate-900 dark:text-slate-100 hover:underline"
+                      className="text-xl font-medium leading-5 text-slate-900 hover:underline dark:text-slate-100"
                     >
                       <TagIcon
                         className="inline-flex h-4 w-4"
@@ -285,19 +285,19 @@ export default function Changelog(props: ChangeLogProps): JSX.Element {
                   </p>
                 </div>
                 {/* CONTAINER */}
-                <div className="md:ml-12 flex flex-grow flex-col gap-8">
+                <div className="flex flex-grow flex-col gap-8 md:ml-12">
                   <div className="prose prose-slate dark:prose-invert max-w-none">
                     {changelog.content}
                   </div>
                   {changelog.patches.length > 0 && (
-                    <div className="text-right space-x-2">
+                    <div className="space-x-2 text-right">
                       {changelog.patches.map((version) => (
                         <a
                           key={version}
                           href={`https://github.com/nrwl/nx/releases/tag/${version}`}
                           target="_blank"
                           rel="noreferrer"
-                          className="inline-flex items-center rounded-md bg-slate-50 dark:bg-slate-600/30 px-2 py-1 text-xs font-medium text-slate-600 ring-1 ring-inset ring-slate-500/10 dark:text-slate-500 dark:ring-slate-700 hover:underline"
+                          className="inline-flex items-center rounded-md bg-slate-50 px-2 py-1 text-xs font-medium text-slate-600 ring-1 ring-inset ring-slate-500/10 hover:underline dark:bg-slate-600/30 dark:text-slate-500 dark:ring-slate-700"
                         >
                           {version}
                         </a>
diff --git a/nx-dev/nx-dev/pages/tips.tsx b/nx-dev/nx-dev/pages/tips.tsx
index 3a78941cf8871..b9ea497cd0f7b 100644
--- a/nx-dev/nx-dev/pages/tips.tsx
+++ b/nx-dev/nx-dev/pages/tips.tsx
@@ -42,7 +42,7 @@ const tips: NewYearTip[] = [
           Read more in our{' '}
           <Link
             href="/getting-started/intro"
-            className="underline text-slate-900 dark:text-slate-100"
+            className="text-slate-900 underline dark:text-slate-100"
           >
             Intro to Nx
           </Link>
@@ -77,7 +77,7 @@ const tips: NewYearTip[] = [
           Read more in our{' '}
           <Link
             href="/concepts/integrated-vs-package-based"
-            className="underline text-slate-900 dark:text-slate-100"
+            className="text-slate-900 underline dark:text-slate-100"
           >
             Types of Repos Guide
           </Link>
@@ -108,7 +108,7 @@ const tips: NewYearTip[] = [
           caching, distributed task execution,{' '}
           <Link
             href="/ci/features/distribute-task-execution"
-            className="underline text-slate-900 dark:text-slate-100"
+            className="text-slate-900 underline dark:text-slate-100"
           >
             Nx Agents
           </Link>
@@ -119,7 +119,7 @@ const tips: NewYearTip[] = [
           Read more about how to set up{' '}
           <Link
             href="/ci/intro/ci-with-nx"
-            className="underline text-slate-900 dark:text-slate-100"
+            className="text-slate-900 underline dark:text-slate-100"
           >
             CI with Nx
           </Link>
@@ -152,7 +152,7 @@ const tips: NewYearTip[] = [
           Read more about how to{' '}
           <Link
             href="/recipes/adopting-nx/adding-to-existing-project"
-            className="underline text-slate-900 dark:text-slate-100"
+            className="text-slate-900 underline dark:text-slate-100"
           >
             Add Nx to an Existing Project
           </Link>
@@ -186,7 +186,7 @@ const tips: NewYearTip[] = [
           Read more about how to set up{' '}
           <Link
             href="/concepts/module-federation/micro-frontend-architecture"
-            className="underline text-slate-900 dark:text-slate-100"
+            className="text-slate-900 underline dark:text-slate-100"
           >
             Micro Frontends with Nx
           </Link>
@@ -207,22 +207,22 @@ const tips: NewYearTip[] = [
           Nx can work with any technology stack and we have created examples for
           many of them.
         </p>
-        <div className="flex justify-center items-center">
+        <div className="flex items-center justify-center">
           <Link
             href="/getting-started/tutorials/react-standalone-tutorial"
-            className="w-20 m-4"
+            className="m-4 w-20"
           >
             {frameworkIcons.react.image}
           </Link>
           <Link
             href="/getting-started/tutorials/angular-standalone-tutorial"
-            className="w-20 m-4"
+            className="m-4 w-20"
           >
             {frameworkIcons.angular.image}
           </Link>
           <Link
             href="/getting-started/tutorials/vue-standalone-tutorial"
-            className="w-20 m-4"
+            className="m-4 w-20"
           >
             {frameworkIcons.vue.image}
           </Link>
@@ -231,7 +231,7 @@ const tips: NewYearTip[] = [
           Read more about using{' '}
           <Link
             href="/showcase/example-repos"
-            className="underline text-slate-900 dark:text-slate-100"
+            className="text-slate-900 underline dark:text-slate-100"
           >
             Nx with your Favorite Tech
           </Link>
@@ -265,7 +265,7 @@ const tips: NewYearTip[] = [
           Read more about how to use Nx to{' '}
           <Link
             href="/extending-nx/recipes/create-install-package"
-            className="underline text-slate-900 dark:text-slate-100"
+            className="text-slate-900 underline dark:text-slate-100"
           >
             Build Your Own CLI
           </Link>
@@ -303,7 +303,7 @@ const tips: NewYearTip[] = [
           experience this groundbreaking tool.{' '}
           <Link
             href="https://go.nx.dev/nx-agents-ea"
-            className="underline text-slate-900 dark:text-slate-100"
+            className="text-slate-900 underline dark:text-slate-100"
           >
             Sign up now for early access.
           </Link>
@@ -312,7 +312,7 @@ const tips: NewYearTip[] = [
           Read more about the upcoming{' '}
           <Link
             href="/ci/features/distribute-task-execution"
-            className="underline text-slate-900 dark:text-slate-100"
+            className="text-slate-900 underline dark:text-slate-100"
           >
             Nx Agents
           </Link>
@@ -346,7 +346,7 @@ const tips: NewYearTip[] = [
           Read more about using Nx to{' '}
           <Link
             href="/recipes/tips-n-tricks/standalone-to-integrated"
-            className="underline text-slate-900 dark:text-slate-100"
+            className="text-slate-900 underline dark:text-slate-100"
           >
             convert a standalone app repo to a monorepo
           </Link>
@@ -377,7 +377,7 @@ const tips: NewYearTip[] = [
           to date - even after breaking changes. You can think of it as{' '}
           <Link
             href="https://blog.nrwl.io/evergreen-tooling-more-than-just-codemods-fc68f32ce605"
-            className="underline text-slate-900 dark:text-slate-100"
+            className="text-slate-900 underline dark:text-slate-100"
           >
             Evergreen Tooling
           </Link>
@@ -387,7 +387,7 @@ const tips: NewYearTip[] = [
           Read more about using Nx to{' '}
           <Link
             href="/features/automate-updating-dependencies"
-            className="underline text-slate-900 dark:text-slate-100"
+            className="text-slate-900 underline dark:text-slate-100"
           >
             Automate Updating Dependencies
           </Link>
@@ -447,13 +447,13 @@ export default function NewYear(): JSX.Element {
       />
       <Header />
       <main id="main" role="main">
-        <div className="w-full py-10 bg-slate-50 dark:bg-slate-800/40 dark:text-slate-300">
+        <div className="w-full bg-slate-50 py-10 dark:bg-slate-800/40 dark:text-slate-300">
           <div
             id="new-year"
             className="py-18 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
           >
             <article id="nx-new-year-tips-intro" className="relative">
-              <h1 className="text-3xl font-semibold my-8 dark:text-white sm:text-5xl">
+              <h1 className="my-8 text-3xl font-semibold dark:text-white sm:text-5xl">
                 Nx New Year Tips
               </h1>
               <p>
@@ -461,7 +461,7 @@ export default function NewYear(): JSX.Element {
                 of Nx. Each day, a new card will be unlocked for you to flip.
                 You can{' '}
                 <a
-                  className="underline text-slate-900 dark:text-slate-100"
+                  className="text-slate-900 underline dark:text-slate-100"
                   href="https://share.hsforms.com/1cShEClnQRIuu5w-1cLalZw1n3n7"
                 >
                   sign up to receive an email
@@ -477,7 +477,7 @@ export default function NewYear(): JSX.Element {
             className="py-18 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
           >
             <article id="nx-new-year-tips" className="relative">
-              <div className="mx-auto items-stretch py-12 grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:py-16 dark:text-slate-100">
+              <div className="mx-auto grid grid-cols-1 items-stretch gap-8 py-12 dark:text-slate-100 sm:grid-cols-2 md:grid-cols-3 lg:py-16">
                 {shownTips.map((tip) => (
                   <FlipCard
                     key={tip.day}
diff --git a/nx-dev/ui-common/src/lib/github-star-widget.tsx b/nx-dev/ui-common/src/lib/github-star-widget.tsx
index 3ae5821744427..b0fcd39f8c1cd 100644
--- a/nx-dev/ui-common/src/lib/github-star-widget.tsx
+++ b/nx-dev/ui-common/src/lib/github-star-widget.tsx
@@ -33,7 +33,7 @@ export function GitHubStarWidget({ starsCount }: { starsCount: number }) {
   };
 
   return (
-    <div className="flex items-center justify-between pl-2 pr-2 space-x-2 border rounded-md border-slate-200 hover:border-slate-400 dark:border-slate-700 print:hidden">
+    <div className="flex items-center justify-between space-x-2 rounded-md border border-slate-200 pl-2 pr-2 hover:border-slate-400 dark:border-slate-700 print:hidden">
       <a
         href="https://github.com/nrwl/nx"
         target="_blank"
@@ -41,14 +41,14 @@ export function GitHubStarWidget({ starsCount }: { starsCount: number }) {
         className="flex items-center justify-between space-x-2"
         onClick={() => handleClick('githubstars_iconclick')}
       >
-        <GithubIcon className="w-6 h-6" />
-        <span className="font-semibold text-md">{formatStars(starsCount)}</span>
+        <GithubIcon className="h-6 w-6" />
+        <span className="text-md font-semibold">{formatStars(starsCount)}</span>
       </a>
       <a
         href="https://github.com/nrwl/nx"
         target="_blank"
         rel="noreferrer noopener"
-        className="px-4 py-2 border-transparent hover:text-slate-900 dark:hover:text-sky-400 whitespace-nowrap font-bold"
+        className="whitespace-nowrap border-transparent px-4 py-2 font-bold hover:text-slate-900 dark:hover:text-sky-400"
         onClick={() => handleClick('githubstars_buttonclick')}
       >
         Give us a Star!
diff --git a/nx-dev/ui-common/src/lib/plugin-card.tsx b/nx-dev/ui-common/src/lib/plugin-card.tsx
index 4c274081a1bed..c7496906e2638 100644
--- a/nx-dev/ui-common/src/lib/plugin-card.tsx
+++ b/nx-dev/ui-common/src/lib/plugin-card.tsx
@@ -46,13 +46,13 @@ export function PluginCard({
           href={url}
           target={isOfficial ? undefined : '_blank'}
           rel={isOfficial ? undefined : 'noreferrer'}
-          className="focus:outline-none flex flex-col grow"
+          className="flex grow flex-col focus:outline-none"
         >
           <span className="absolute inset-0" aria-hidden="true" />
-          <p className="line-clamp-3 mb-2 text-sm grow">{description}</p>
+          <p className="line-clamp-3 mb-2 grow text-sm">{description}</p>
 
-          <div className="flex flex-wrap justify-between items-center py-0.5 text-xs font-medium capitalize">
-            <div className="mr-1 my-1">
+          <div className="flex flex-wrap items-center justify-between py-0.5 text-xs font-medium capitalize">
+            <div className="my-1 mr-1">
               <LastPublishedWidget
                 lastPublishedDate={lastPublishedDate}
               ></LastPublishedWidget>
@@ -65,17 +65,17 @@ export function PluginCard({
             <div className="mx-1 my-1">
               <GithubStarsWidget githubStars={githubStars}></GithubStarsWidget>
             </div>
-            <div className="flex-grow flex justify-end">
+            <div className="flex flex-grow justify-end">
               {isOfficial ? (
                 <div
                   data-tooltip="Maintained by the Nx Team"
                   data-tooltip-align-right
-                  className="ml-1 my-1 border inline-block bg-green-50 border-green-300 text-green-600 dark:border-green-900 dark:bg-green-900/30 dark:text-green-400 rounded-full px-3 py-0.5 text-xs font-medium capitalize"
+                  className="my-1 ml-1 inline-block rounded-full border border-green-300 bg-green-50 px-3 py-0.5 text-xs font-medium capitalize text-green-600 dark:border-green-900 dark:bg-green-900/30 dark:text-green-400"
                 >
                   Nx Team
                 </div>
               ) : (
-                <div className="ml-1 my-1">
+                <div className="my-1 ml-1">
                   <NxVersionWidget nxVersion={nxVersion}></NxVersionWidget>
                 </div>
               )}
@@ -97,7 +97,7 @@ export function LastPublishedWidget({
   }
   return (
     <abbr data-tooltip="Most Recent Release Date" data-tooltip-align-right>
-      <ClockIcon className="h-4 w-4 inline-block mx-0.5 align-bottom"></ClockIcon>
+      <ClockIcon className="mx-0.5 inline-block h-4 w-4 align-bottom"></ClockIcon>
       {/* yyyy-MM-dd */}
       <span>{new Date(lastPublishedDate).toISOString().slice(0, 10)}</span>
       <span className="md:hidden">
@@ -118,7 +118,7 @@ function NpmDownloadsWidget({
   }
   return (
     <abbr data-tooltip="Monthly NPM Downloads" data-tooltip-align-right>
-      <ArrowDownTrayIcon className="h-4 w-4 inline-block mx-0.5 align-bottom"></ArrowDownTrayIcon>
+      <ArrowDownTrayIcon className="mx-0.5 inline-block h-4 w-4 align-bottom"></ArrowDownTrayIcon>
       {shortenNumber(npmDownloads)}
       <span className="md:hidden">
         <br />
@@ -138,7 +138,7 @@ function GithubStarsWidget({
   }
   return (
     <abbr data-tooltip="GitHub Stars" data-tooltip-align-right>
-      <StarIcon className="h-4 w-4 inline-block mx-0.5 align-bottom"></StarIcon>
+      <StarIcon className="mx-0.5 inline-block h-4 w-4 align-bottom"></StarIcon>
       {shortenNumber(githubStars)}
       <span className="md:hidden">
         <br />
@@ -170,7 +170,7 @@ function NxVersionWidget({ nxVersion }: { nxVersion: string | undefined }) {
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
-        className="h-4 w-4 inline-block mx-0.5 align-bottom"
+        className="mx-0.5 inline-block h-4 w-4 align-bottom"
         fill="currentColor"
       >
         <title>Nx</title>
diff --git a/nx-dev/ui-community/src/lib/connect-with-us.tsx b/nx-dev/ui-community/src/lib/connect-with-us.tsx
index 4fb8c9627becd..628375cc47d58 100644
--- a/nx-dev/ui-community/src/lib/connect-with-us.tsx
+++ b/nx-dev/ui-community/src/lib/connect-with-us.tsx
@@ -19,7 +19,7 @@ export function ConnectWithUs(): JSX.Element {
           </p>
           <p className="py-4">
             Looking for community plugins? Find them listed in the{' '}
-            <Link href="/plugin-registry" className="underline font-semibold">
+            <Link href="/plugin-registry" className="font-semibold underline">
               plugin registry
             </Link>
             .
diff --git a/nx-dev/ui-conference/src/lib/launch-week/agenda.tsx b/nx-dev/ui-conference/src/lib/launch-week/agenda.tsx
index 83993f4c5ea57..62dc02226625e 100644
--- a/nx-dev/ui-conference/src/lib/launch-week/agenda.tsx
+++ b/nx-dev/ui-conference/src/lib/launch-week/agenda.tsx
@@ -106,7 +106,7 @@ export function LaunchWeekAgenda(): JSX.Element {
           </article>
         </div>
         <div className="w-full">
-          <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl px-5 py-12 md:pr-12">
+          <div className="mx-auto max-w-screen-lg px-5 py-12 md:pr-12 xl:max-w-screen-xl">
             <span className="rounded-md bg-slate-100 p-2 dark:bg-slate-800">
               Thursday, February 8th
             </span>
@@ -126,13 +126,13 @@ const launchWeekScheduleRow = (item: ScheduleItem): JSX.Element => (
   <div key={item.title + item.time} className="w-full">
     <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
       <article className="grid w-full grid-cols-1 md:grid-cols-5 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
-        <div className="font-input-mono px-5 py-6 flex items-center">
+        <div className="font-input-mono flex items-center px-5 py-6">
           <span className="hidden md:block">{item.time}</span>
           <span className="mb-4 rounded-md py-4 px-6 md:hidden">
             {item.time}
           </span>
         </div>
-        <div className="font-input-mono col-span-2 px-5 py-6 flex items-center md:px-8">
+        <div className="font-input-mono col-span-2 flex items-center px-5 py-6 md:px-8">
           {item.videoUrl ? (
             <h3 className="underline">
               <a href={item.videoUrl} target="_blank" rel="noreferrer">
@@ -143,7 +143,7 @@ const launchWeekScheduleRow = (item: ScheduleItem): JSX.Element => (
             <h3>{item.title}</h3>
           )}
         </div>
-        <p className="col-span-2 px-5 py-6 flex items-center md:px-8">
+        <p className="col-span-2 flex items-center px-5 py-6 md:px-8">
           {item.speakers.length > 2
             ? `${item.speakers.slice(0, -1).join(', ')}, & ${item.speakers.at(
                 -1
diff --git a/nx-dev/ui-conference/src/lib/launch-week/announcements.tsx b/nx-dev/ui-conference/src/lib/launch-week/announcements.tsx
index faa1859e8c5de..431d50f4297c3 100644
--- a/nx-dev/ui-conference/src/lib/launch-week/announcements.tsx
+++ b/nx-dev/ui-conference/src/lib/launch-week/announcements.tsx
@@ -16,8 +16,8 @@ export function LaunchWeekAnnouncements(): JSX.Element {
 
         {/* MONDAY */}
         <div>
-          <article className="relative overflow-hidden pt-4 mx-auto max-w-screen-lg xl:max-w-screen-xl">
-            <div className="px-5 py-12 grid md:grid-cols-2 sm:gap-8 lg:py-16">
+          <article className="relative mx-auto max-w-screen-lg overflow-hidden pt-4 xl:max-w-screen-xl">
+            <div className="grid px-5 py-12 sm:gap-8 md:grid-cols-2 lg:py-16">
               <div>
                 <header>
                   <SectionHeading as="h2" variant="title" id="monday">
@@ -41,7 +41,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     This is what Nx Project Crystal is all about.
                   </p>
                 </div>
-                <div className="pt-4 action flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -70,7 +70,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
               </div>
               <div
                 aria-hidden="true"
-                className="order-first md:order-last pb-8 relative flex flex-col items-center"
+                className="relative order-first flex flex-col items-center pb-8 md:order-last"
               >
                 <img
                   className="rounded-lg"
@@ -84,8 +84,8 @@ export function LaunchWeekAnnouncements(): JSX.Element {
 
         {/* TUESDAY */}
         <div>
-          <article className="relative overflow-hidden pt-4 mx-auto max-w-screen-lg xl:max-w-screen-xl">
-            <div className="px-5 py-12 grid md:grid-cols-2 sm:gap-8 lg:py-16">
+          <article className="relative mx-auto max-w-screen-lg overflow-hidden pt-4 xl:max-w-screen-xl">
+            <div className="grid px-5 py-12 sm:gap-8 md:grid-cols-2 lg:py-16">
               <div>
                 <header>
                   <SectionHeading as="h2" variant="title" id="tuesday">
@@ -110,7 +110,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     powerful monorepo capabilities.
                   </p>
                 </div>
-                <div className="pt-4 action flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -139,7 +139,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
               </div>
               <div
                 aria-hidden="true"
-                className="order-first md:order-last pb-8 relative flex flex-col items-center"
+                className="relative order-first flex flex-col items-center pb-8 md:order-last"
               >
                 <img
                   className="rounded-lg"
@@ -153,8 +153,8 @@ export function LaunchWeekAnnouncements(): JSX.Element {
 
         {/* WEDNESDAY */}
         <div>
-          <article className="relative overflow-hidden pt-4 mx-auto max-w-screen-lg xl:max-w-screen-xl">
-            <div className="px-5 py-12 grid md:grid-cols-2 sm:gap-8 lg:py-16">
+          <article className="relative mx-auto max-w-screen-lg overflow-hidden pt-4 xl:max-w-screen-xl">
+            <div className="grid px-5 py-12 sm:gap-8 md:grid-cols-2 lg:py-16">
               <div>
                 <header>
                   <SectionHeading as="h2" variant="title" id="wednesday">
@@ -175,7 +175,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     maintaining CI/CD infrastructure.
                   </p>
                 </div>
-                <div className="pt-4 action flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -204,7 +204,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
               </div>
               <div
                 aria-hidden="true"
-                className="order-first md:order-last pb-8 relative flex flex-col items-center"
+                className="relative order-first flex flex-col items-center pb-8 md:order-last"
               >
                 <img
                   className="rounded-lg"
@@ -218,8 +218,8 @@ export function LaunchWeekAnnouncements(): JSX.Element {
 
         {/* Thursday */}
         <div>
-          <article className="relative overflow-hidden pt-4 mx-auto max-w-screen-lg xl:max-w-screen-xl">
-            <div className="px-5 py-12 grid md:grid-cols-2 sm:gap-8 lg:py-16">
+          <article className="relative mx-auto max-w-screen-lg overflow-hidden pt-4 xl:max-w-screen-xl">
+            <div className="grid px-5 py-12 sm:gap-8 md:grid-cols-2 lg:py-16">
               <div>
                 <header>
                   <SectionHeading as="h2" variant="title" id="thursday">
@@ -237,7 +237,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     and optimize your codebase and pipelines.
                   </p>
                 </div>
-                <div className="pt-4 action flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -258,7 +258,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
               </div>
               <div
                 aria-hidden="true"
-                className="order-first md:order-last pb-8 relative flex flex-col items-center"
+                className="relative order-first flex flex-col items-center pb-8 md:order-last"
               >
                 <img
                   className="rounded-lg"
@@ -272,8 +272,8 @@ export function LaunchWeekAnnouncements(): JSX.Element {
 
         {/* Friday */}
         <div>
-          <article className="relative overflow-hidden pt-4 mx-auto max-w-screen-lg xl:max-w-screen-xl">
-            <div className="px-5 py-12 grid md:grid-cols-2 sm:gap-8 lg:py-16">
+          <article className="relative mx-auto max-w-screen-lg overflow-hidden pt-4 xl:max-w-screen-xl">
+            <div className="grid px-5 py-12 sm:gap-8 md:grid-cols-2 lg:py-16">
               <div>
                 <header>
                   <SectionHeading as="h2" variant="title" id="thursday">
@@ -295,7 +295,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     chime in for our live-stream!
                   </p>
                 </div>
-                <div className="pt-4 action flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -324,7 +324,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
               </div>
               <div
                 aria-hidden="true"
-                className="order-first md:order-last pb-8 relative flex flex-col items-center"
+                className="relative order-first flex flex-col items-center pb-8 md:order-last"
               >
                 <img
                   className="rounded-lg"
diff --git a/nx-dev/ui-contact/src/lib/contact-links.tsx b/nx-dev/ui-contact/src/lib/contact-links.tsx
index acddc35a945cf..ffcbc8a626fd0 100644
--- a/nx-dev/ui-contact/src/lib/contact-links.tsx
+++ b/nx-dev/ui-contact/src/lib/contact-links.tsx
@@ -12,7 +12,7 @@ import Link from 'next/link';
 export function ContactLinks(): JSX.Element {
   return (
     <article id="contact-links" className="mx-auto max-w-7xl px-6 lg:px-8">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 lg:gap-8">
+      <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
         <div>
           <div className="flex items-center gap-2">
             <svg
@@ -26,7 +26,7 @@ export function ContactLinks(): JSX.Element {
               <title>GitHub</title>
               <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
             </svg>
-            <h4 className="text-lg text-slate-700 dark:text-slate-300 font-medium">
+            <h4 className="text-lg font-medium text-slate-700 dark:text-slate-300">
               Contribute on GitHub
             </h4>
           </div>
@@ -38,10 +38,10 @@ export function ContactLinks(): JSX.Element {
             rel="noreferrer"
             target="_blank"
             title="Nx GitHub"
-            className="mt-2 text-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-400 transition flex items-center gap-2"
+            className="mt-2 flex items-center gap-2 text-sm text-slate-500 transition hover:text-slate-800 dark:hover:text-slate-400"
           >
             <span>Contribute on GitHub</span>
-            <ArrowUpRightIcon aria-hidden="true" className="w-3 h-3" />
+            <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
           </a>
         </div>
         <div>
@@ -57,7 +57,7 @@ export function ContactLinks(): JSX.Element {
               <title>YouTube</title>
               <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
             </svg>
-            <h4 className="text-lg text-slate-700 dark:text-slate-300 font-medium">
+            <h4 className="text-lg font-medium text-slate-700 dark:text-slate-300">
               Livestreams on Youtube
             </h4>
           </div>
@@ -69,10 +69,10 @@ export function ContactLinks(): JSX.Element {
             rel="noreferrer"
             target="_blank"
             title="Nx Youtube channel"
-            className="mt-2 text-sm text-slate-500 hover:text-slate-800 transition dark:hover:text-slate-400 flex items-center gap-2"
+            className="mt-2 flex items-center gap-2 text-sm text-slate-500 transition hover:text-slate-800 dark:hover:text-slate-400"
           >
             <span>Join the Nx Youtube channel</span>
-            <ArrowUpRightIcon aria-hidden="true" className="w-3 h-3" />
+            <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
           </a>
         </div>
         <div>
@@ -88,7 +88,7 @@ export function ContactLinks(): JSX.Element {
               <title>X</title>
               <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
             </svg>
-            <h4 className="text-lg text-slate-700 dark:text-slate-300 font-medium">
+            <h4 className="text-lg font-medium text-slate-700 dark:text-slate-300">
               Follow us on X
             </h4>
           </div>
@@ -101,18 +101,18 @@ export function ContactLinks(): JSX.Element {
             rel="noreferrer"
             target="_blank"
             title="Nx Official X account"
-            className="mt-2 text-sm text-slate-500 hover:text-slate-800 transition dark:hover:text-slate-400 flex items-center gap-2"
+            className="mt-2 flex items-center gap-2 text-sm text-slate-500 transition hover:text-slate-800 dark:hover:text-slate-400"
           >
             <span>
               Follow <span className="font-medium">@nxdevtools</span>
             </span>
-            <ArrowUpRightIcon aria-hidden="true" className="w-3 h-3" />
+            <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
           </a>
         </div>
         <div>
           <div className="flex items-center gap-2">
-            <EnvelopeIcon aria-hidden="true" className="w-4 h-4" />
-            <h4 className="text-lg text-slate-700 dark:text-slate-300 font-medium">
+            <EnvelopeIcon aria-hidden="true" className="h-4 w-4" />
+            <h4 className="text-lg font-medium text-slate-700 dark:text-slate-300">
               Nx monthly newsletter
             </h4>
           </div>
@@ -125,16 +125,16 @@ export function ContactLinks(): JSX.Element {
             rel="noreferrer"
             target="_blank"
             title="Nx monthly newsletter"
-            className="mt-2 text-sm text-slate-500 hover:text-slate-800 transition dark:hover:text-slate-400 flex items-center gap-2"
+            className="mt-2 flex items-center gap-2 text-sm text-slate-500 transition hover:text-slate-800 dark:hover:text-slate-400"
           >
             <span>Subscribe to Nx newsletter</span>
-            <ArrowUpRightIcon aria-hidden="true" className="w-3 h-3" />
+            <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
           </a>
         </div>
         <div>
           <div className="flex items-center gap-2">
             <AcademicCapIcon aria-hidden="true" className="h-4 w-4" />
-            <h4 className="text-lg text-slate-700 dark:text-slate-300 font-medium">
+            <h4 className="text-lg font-medium text-slate-700 dark:text-slate-300">
               Documentation
             </h4>
           </div>
@@ -144,16 +144,16 @@ export function ContactLinks(): JSX.Element {
           <Link
             href="/getting-started/intro"
             title="Nx documentation"
-            className="mt-2 text-sm text-slate-500 hover:text-slate-800 transition dark:hover:text-slate-400 flex items-center gap-2"
+            className="mt-2 flex items-center gap-2 text-sm text-slate-500 transition hover:text-slate-800 dark:hover:text-slate-400"
           >
             <span>Nx docs</span>
-            <ChevronRightIcon aria-hidden="true" className="w-3 h-3" />
+            <ChevronRightIcon aria-hidden="true" className="h-3 w-3" />
           </Link>
         </div>
         <div>
           <div className="flex items-center gap-2">
             <BuildingOffice2Icon aria-hidden="true" className="h-4 w-4" />
-            <h4 className="text-lg text-slate-700 dark:text-slate-300 font-medium">
+            <h4 className="text-lg font-medium text-slate-700 dark:text-slate-300">
               Company
             </h4>
           </div>
@@ -166,10 +166,10 @@ export function ContactLinks(): JSX.Element {
             rel="noreferrer"
             target="_blank"
             title="Nx the company"
-            className="mt-2 text-sm text-slate-500 hover:text-slate-800 transition dark:hover:text-slate-400 flex items-center gap-2"
+            className="mt-2 flex items-center gap-2 text-sm text-slate-500 transition hover:text-slate-800 dark:hover:text-slate-400"
           >
             <span>Nx the company</span>
-            <ArrowUpRightIcon aria-hidden="true" className="w-3 h-3" />
+            <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
           </a>
         </div>
       </div>
diff --git a/nx-dev/ui-contact/src/lib/how-can-we-help.tsx b/nx-dev/ui-contact/src/lib/how-can-we-help.tsx
index 5507a08da4094..deb76a6a0637b 100644
--- a/nx-dev/ui-contact/src/lib/how-can-we-help.tsx
+++ b/nx-dev/ui-contact/src/lib/how-can-we-help.tsx
@@ -16,10 +16,10 @@ export function HowCanWeHelp(): JSX.Element {
         </div>
         <div className="mx-auto mt-16 grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-2 lg:gap-8">
           <section className="rounded-xl border border-slate-200 bg-slate-50/20 p-8 dark:border-slate-800/40 dark:bg-slate-800/60">
-            <div className="flex gap-2 items-center">
+            <div className="flex items-center gap-2">
               <ChatBubbleLeftRightIcon
                 aria-hidden="true"
-                className="shrink-0 w-5 h-5"
+                className="h-5 w-5 shrink-0"
               />
               <h3 className="text-lg font-medium text-slate-700 dark:text-slate-300">
                 Question about Nx
@@ -39,12 +39,12 @@ export function HowCanWeHelp(): JSX.Element {
               className="mt-6"
             >
               <span>Ask questions on Discord</span>
-              <ArrowUpRightIcon aria-hidden="true" className="w-3 h-3" />
+              <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
             </ButtonLink>
           </section>
           <section className="rounded-xl border border-slate-200 bg-slate-50/20 p-8 dark:border-slate-800/40 dark:bg-slate-800/60">
-            <div className="flex gap-2 items-center">
-              <UsersIcon aria-hidden="true" className="shrink-0 w-5 h-5" />
+            <div className="flex items-center gap-2">
+              <UsersIcon aria-hidden="true" className="h-5 w-5 shrink-0" />
               <h3 className="text-xl font-medium text-slate-700 dark:text-slate-300">
                 Get in touch with our sales team
               </h3>
diff --git a/nx-dev/ui-contact/src/lib/talk-to-our-sales-team.tsx b/nx-dev/ui-contact/src/lib/talk-to-our-sales-team.tsx
index 44a905ce2b668..abe9e589e712a 100644
--- a/nx-dev/ui-contact/src/lib/talk-to-our-sales-team.tsx
+++ b/nx-dev/ui-contact/src/lib/talk-to-our-sales-team.tsx
@@ -20,8 +20,8 @@ export function TalkToOurSalesTeam(): JSX.Element {
               </span>
               .
             </p>
-            <div className="mt-6 lg:mt-12 mx-auto grid w-full grid-cols-4 md:grid-cols-2 gap-2">
-              <div className="col-span-1 flex items-center justify-center h-14 lg:h-28">
+            <div className="mx-auto mt-6 grid w-full grid-cols-4 gap-2 md:grid-cols-2 lg:mt-12">
+              <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
                 <svg
                   role="img"
                   xmlns="http://www.w3.org/2000/svg"
@@ -34,7 +34,7 @@ export function TalkToOurSalesTeam(): JSX.Element {
                 </svg>
               </div>
 
-              <div className="col-span-1 flex items-center justify-center h-14 lg:h-28">
+              <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
                 <svg
                   role="img"
                   viewBox="0 0 24 24"
@@ -46,7 +46,7 @@ export function TalkToOurSalesTeam(): JSX.Element {
                   <path d="M5.223 17.905h6.76l1.731 3.047H0l4.815-8.344 2.018-3.494 1.733 3.002zm2.52-10.371L9.408 4.65l9.415 16.301h-3.334zm2.59-4.486h3.33L24 20.952h-3.334z" />
                 </svg>
               </div>
-              <div className="col-span-1 flex items-center justify-center h-14 lg:h-28">
+              <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
                 <svg
                   role="img"
                   viewBox="0 0 24 24"
@@ -58,7 +58,7 @@ export function TalkToOurSalesTeam(): JSX.Element {
                   <path d="M15.337 23.979l7.216-1.561s-2.604-17.613-2.625-17.73c-.018-.116-.114-.192-.211-.192s-1.929-.136-1.929-.136-1.275-1.274-1.439-1.411c-.045-.037-.075-.057-.121-.074l-.914 21.104h.023zM11.71 11.305s-.81-.424-1.774-.424c-1.447 0-1.504.906-1.504 1.141 0 1.232 3.24 1.715 3.24 4.629 0 2.295-1.44 3.76-3.406 3.76-2.354 0-3.54-1.465-3.54-1.465l.646-2.086s1.245 1.066 2.28 1.066c.675 0 .975-.545.975-.932 0-1.619-2.654-1.694-2.654-4.359-.034-2.237 1.571-4.416 4.827-4.416 1.257 0 1.875.361 1.875.361l-.945 2.715-.02.01zM11.17.83c.136 0 .271.038.405.135-.984.465-2.064 1.639-2.508 3.992-.656.213-1.293.405-1.889.578C7.697 3.75 8.951.84 11.17.84V.83zm1.235 2.949v.135c-.754.232-1.583.484-2.394.736.466-1.777 1.333-2.645 2.085-2.971.193.501.309 1.176.309 2.1zm.539-2.234c.694.074 1.141.867 1.429 1.755-.349.114-.735.231-1.158.366v-.252c0-.752-.096-1.371-.271-1.871v.002zm2.992 1.289c-.02 0-.06.021-.078.021s-.289.075-.714.21c-.423-1.233-1.176-2.37-2.508-2.37h-.115C12.135.209 11.669 0 11.265 0 8.159 0 6.675 3.877 6.21 5.846c-1.194.365-2.063.636-2.16.674-.675.213-.694.232-.772.87-.075.462-1.83 14.063-1.83 14.063L15.009 24l.927-21.166z" />
                 </svg>
               </div>
-              <div className="col-span-1 flex items-center justify-center h-14 lg:h-28">
+              <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
                 <svg
                   role="img"
                   viewBox="0 0 24 24"
@@ -75,7 +75,7 @@ export function TalkToOurSalesTeam(): JSX.Element {
                   <path d="M15.55 13.706c.015.487.326.883.728.883.778 0 1.109-.954 1.089-1.596-.015-.487-.331-.888-.733-.888-.678.01-1.11.958-1.084 1.6Zm-.411-.025c-.03-.834.622-1.682 1.566-1.682.632 0 1.044.422 1.069 1.07.03.877-.578 1.68-1.566 1.68-.633 0-1.05-.42-1.07-1.069Zm-8.96-.221a.6.6 0 0 1-.13.035c-.055.01-.15.03-.296.05a.47.47 0 0 0-.206.065c-.035.03-.06.06-.065.1-.01.045.005.076.045.106.04.025.1.04.19.04.066 0 .131-.01.197-.03.065-.02.12-.05.16-.085.03-.025.05-.06.07-.1.005-.026.02-.086.035-.181Zm.824-.507a2.388 2.388 0 0 1-.035.26l-.141.784c-.01.07.015.125.08.16l-.005.03h-.798l-.005-.2a1.59 1.59 0 0 1-.382.165 1.47 1.47 0 0 1-.381.045c-.256 0-.407-.025-.507-.115-.105-.09-.156-.15-.15-.281a.44.44 0 0 1 .095-.231.567.567 0 0 1 .211-.146c.08-.04.18-.065.321-.09a6.58 6.58 0 0 1 .598-.065c.135-.01.22-.045.26-.06.056-.02.076-.046.086-.091.015-.08-.01-.126-.115-.146-.286-.055-.823.035-1.104.106l.15-.407a7.014 7.014 0 0 1 1.07-.085c.57-.01.757.156.752.367Zm2.308 1.23.276-1.562h.763l-.276 1.561h-.763Zm.317-1.923c.025-.13.226-.23.451-.23.226 0 .392.105.372.23-.025.13-.226.231-.452.231-.23.005-.391-.1-.371-.23Zm3.427 1.205c-.035.01-.08.025-.13.035-.055.015-.15.03-.296.05a.47.47 0 0 0-.206.065.149.149 0 0 0-.065.1c-.01.046.01.08.045.106.04.025.1.04.19.04.066 0 .131-.01.197-.03.065-.02.12-.05.16-.085.03-.025.05-.06.07-.1.005-.026.02-.086.035-.181Zm.824-.512a1.652 1.652 0 0 1-.04.26l-.141.784c-.01.07.015.125.075.16l-.005.026h-.798l-.005-.2c-.115.07-.256.13-.381.165a1.307 1.307 0 0 1-.382.045c-.256 0-.401-.026-.507-.116-.105-.09-.155-.15-.15-.28a.425.425 0 0 1 .095-.232.635.635 0 0 1 .211-.15c.08-.04.181-.065.316-.09.141-.02.337-.046.603-.066a.9.9 0 0 0 .26-.055c.056-.02.076-.045.086-.09.015-.08-.01-.126-.115-.146-.287-.056-.824.035-1.104.105l.15-.407c.366-.055.708-.09 1.069-.09.582.006.768.166.763.377Zm-9.305.668a2.73 2.73 0 0 1-.633.07c-.366 0-.652-.181-.637-.512.01-.221.27-.688.938-.688.211 0 .372.035.593.161l.095-.542a1.763 1.763 0 0 0-.753-.126c-.873.01-1.706.407-1.812 1.21-.105.818.894 1.023 1.335 1.023.256 0 .522-.01.773-.035l.1-.562Zm6.193-1.004.055-.317.798-.175-.085.492h.391l-.075.316h-.377l-.23 1.255s-.769-.005-.773 0l.23-1.25h-.29l.06-.316h.296v-.005Zm3.885 1.565h-.778l.391-2.173.758.02-.371 2.153Zm-6.35-1.194c-.1 0-.19.03-.27.09-.08.06-.13.15-.15.267-.026.135-.01.235.044.296.056.06.13.09.236.09.07 0 .14-.01.196-.04a.38.38 0 0 0 .15-.13.54.54 0 0 0 .086-.206c.02-.126.005-.216-.056-.276a.322.322 0 0 0-.235-.091Zm-1.39 1.731.372-2.088h.668l-.05.267c.06-.08.15-.146.28-.201.13-.055.277-.09.432-.09.176 0 .281.01.412.075.13.07.22.165.27.296a.8.8 0 0 1 .036.427.934.934 0 0 1-.377.612c-.205.15-.386.19-.652.19-.096 0-.17-.01-.236-.025a.421.421 0 0 1-.15-.06.823.823 0 0 1-.126-.115l-.125.718h-.753v-.006Zm13.843-1.54c-.005-.126-.065-.211-.196-.211-.311 0-.648.612-.703.858.512.005.909-.301.899-.647Zm.065.963.06.04c-.15.312-.461.563-.828.563-.296 0-.542-.2-.557-.572-.025-.668.602-1.29 1.114-1.29.221 0 .422.096.432.331.02.532-.728.693-1.22.703a.714.714 0 0 0-.02.196c.01.22.14.407.417.407.246-.001.481-.192.602-.377Zm-3.057-.978c.056-.005.14-.015.176-.015.055 0 .11.01.11.065 0 .035-.06.27-.07.326l-.12.522c-.05.216-.1.442-.146.617h.306l.17-.833c.523-.547.728-.723.849-.723.055 0 .095.03.095.096.006.096-.055.316-.075.376l-.176.607c-.04.136-.07.261-.065.347.005.135.085.19.206.19.22 0 .386-.23.527-.461l-.04-.075c-.056.09-.191.29-.296.29-.036 0-.066-.02-.066-.075-.005-.07.026-.176.045-.246l.196-.708c.05-.195.076-.32.076-.386-.005-.13-.08-.196-.2-.196-.201 0-.468.146-1.035.798h-.01l.07-.316c.041-.176.076-.356.116-.482-.196.07-.477.15-.647.181l.004.1Zm3.328-.567a.27.27 0 0 1 .276-.271c.146 0 .276.115.276.27a.27.27 0 0 1-.276.271.265.265 0 0 1-.276-.27Zm.276.23a.22.22 0 0 0 .22-.226.218.218 0 0 0-.22-.226.218.218 0 0 0-.22.226c0 .131.095.226.22.226Zm-.055-.07h-.05v-.311h.12c.076 0 .11.025.11.09 0 .056-.034.08-.08.085l.091.136h-.055l-.08-.136h-.056v.136Zm.055-.175c.04 0 .076-.006.076-.05 0-.04-.036-.046-.07-.046h-.066v.096h.06Z" />
                 </svg>
               </div>
-              <div className="col-span-1 flex items-center justify-center h-14 lg:h-28">
+              <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
                 <svg
                   role="img"
                   viewBox="0 0 24 24"
@@ -87,7 +87,7 @@ export function TalkToOurSalesTeam(): JSX.Element {
                   <path d="M.5 10.1a.505.505 0 00-.197.048.497.497 0 00-.25.68l1.138 2.475c.179.38.38.592.721.592.342 0 .542-.22.72-.592l1.003-2.186a.144.144 0 01.144-.092.16.16 0 01.157.16v2.118a.535.535 0 101.066 0v-1.73a.531.531 0 01.566-.552.52.52 0 01.541.551v1.73a.531.531 0 00.53.593.539.539 0 00.535-.592v-1.73a.531.531 0 01.564-.552.52.52 0 01.543.551v1.73a.531.531 0 00.528.593.535.535 0 00.535-.592v-1.969a1.234 1.234 0 00-1.283-1.23 1.647 1.647 0 00-1.14.486 1.26 1.26 0 00-1.095-.483 1.807 1.807 0 00-1.074.483 1.287 1.287 0 00-.961-.483 1.177 1.177 0 00-1.158.786l-.729 1.716-.933-2.203.011-.004A.505.505 0 00.5 10.1zm18.43.06a.27.27 0 00-.266.274h.002v3.142a.27.27 0 10.535 0v-1.222c0-1.037.571-1.56 1.27-1.643a.266.266 0 00.238-.274.258.258 0 00-.266-.269 1.465 1.465 0 00-1.242.88v-.614a.266.266 0 00-.271-.274zm-6.735.008a.273.273 0 00-.25.217l-.912 2.627-.902-2.62a.28.28 0 00-.274-.22.266.266 0 00-.27.258.493.493 0 00.034.144l1.09 3.037.02-.007a.319.319 0 00.298.242.3.3 0 00.293-.242l.903-2.583.896 2.583a.3.3 0 00.293.242h.018a.319.319 0 00.293-.242l1.097-3.038a.512.512 0 00.033-.144.258.258 0 00-.265-.25.262.262 0 00-.258.209l-.918 2.63-.904-2.626a.285.285 0 00-.278-.217h-.025a.273.273 0 00-.012 0zm10.168.008a1.75 1.75 0 00-1.691 1.851 1.765 1.765 0 001.76 1.858l-.008.013a1.784 1.784 0 001.33-.539.228.228 0 00.082-.17.228.228 0 00-.379-.168 1.435 1.435 0 01-1.018.415 1.237 1.237 0 01-1.24-1.207h2.555a.247.247 0 00.246-.247c0-.945-.593-1.806-1.637-1.806zm-5.744.002a1.571 1.571 0 00-.158.006 2.384 2.384 0 00-1.078.205.22.22 0 00-.143.222.24.24 0 00.235.229.266.266 0 00.095-.024 1.822 1.822 0 01.834-.162c.691 0 1.07.334 1.07.979v.125a3.796 3.796 0 00-1.103-.15c-.892 0-1.52.4-1.52 1.16l-.003-.004c0 .736.671 1.117 1.34 1.117a1.575 1.575 0 001.298-.62v.343a.247.247 0 00.254.25.254.254 0 00.258-.262v-1.983a1.416 1.416 0 00-.379-1.046 1.571 1.571 0 00-1-.385zm5.719.43c.714 0 1.085.565 1.139 1.214h-2.278a1.222 1.222 0 011.139-1.215zm-5.885 1.382a3.75 3.75 0 011.057.153V12.49c0 .57-.539.973-1.2.973-.485 0-.904-.261-.904-.713 0-.467.375-.76 1.047-.76Z" />
                 </svg>
               </div>
-              <div className="col-span-1 flex items-center justify-center h-14 lg:h-28">
+              <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
                 <svg
                   role="img"
                   viewBox="0 0 24 24"
@@ -99,7 +99,7 @@ export function TalkToOurSalesTeam(): JSX.Element {
                   <path d="M16.71.243l-.12 2.71a.18.18 0 00.29.15l1.06-.8.9.7a.18.18 0 00.28-.14l-.1-2.76 1.33-.1a1.2 1.2 0 011.279 1.2v21.596a1.2 1.2 0 01-1.26 1.2l-16.096-.72a1.2 1.2 0 01-1.15-1.16l-.75-19.797a1.2 1.2 0 011.13-1.27L16.7.222zM13.64 9.3c0 .47 3.16.24 3.59-.08 0-3.2-1.72-4.89-4.859-4.89-3.15 0-4.899 1.72-4.899 4.29 0 4.45 5.999 4.53 5.999 6.959 0 .7-.32 1.1-1.05 1.1-.96 0-1.35-.49-1.3-2.16 0-.36-3.649-.48-3.769 0-.27 4.03 2.23 5.2 5.099 5.2 2.79 0 4.969-1.49 4.969-4.18 0-4.77-6.099-4.64-6.099-6.999 0-.97.72-1.1 1.13-1.1.45 0 1.25.07 1.19 1.87z" />
                 </svg>
               </div>
-              <div className="col-span-1 flex items-center justify-center h-14 lg:h-28">
+              <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
                 <svg
                   role="img"
                   viewBox="0 0 24 24"
@@ -111,7 +111,7 @@ export function TalkToOurSalesTeam(): JSX.Element {
                   <path d="M6.989 3.47l4.66 3.181c.105.07.228.108.354.111a.634.634 0 0 0 .354-.111l4.664-3.192a.637.637 0 0 0-.089-1.087L12.272.065a.64.64 0 0 0-.56 0L7.067 2.372a.636.636 0 0 0-.078 1.098zm6.597 4.179c0 .211.104.408.276.528l3.736 2.553a.628.628 0 0 0 .776-.05l3.134-2.803a.637.637 0 0 0-.028-.973l-2.992-2.393a.635.635 0 0 0-.751-.029l-3.874 2.65a.644.644 0 0 0-.277.517zm-9.291 3.474a.64.64 0 0 1 .209.538.625.625 0 0 1-.315.485l-2.231 1.337a.63.63 0 0 1-.718-.049.64.64 0 0 1-.21-.693l.825-2.596a.63.63 0 0 1 1.023-.281l1.417 1.259zm12.1.271l-4.033-2.76a.634.634 0 0 0-.708 0l-4.033 2.76a.646.646 0 0 0-.276.485.664.664 0 0 0 .212.521l4.03 3.605a.635.635 0 0 0 .842 0l4.03-3.605a.647.647 0 0 0-.064-1.006zm-10.758-.713l-3.13-2.803a.648.648 0 0 1-.213-.503.626.626 0 0 1 .237-.481l2.992-2.407a.641.641 0 0 1 .754-.029l3.87 2.65a.639.639 0 0 1 0 1.07l-3.732 2.553a.633.633 0 0 1-.778-.05zm16.073 4.026l-3.187-1.908a.627.627 0 0 0-.744.071l-3.895 3.477a.644.644 0 0 0-.204.587.636.636 0 0 0 .388.483l5.404 2.19a.634.634 0 0 0 .815-.332l1.675-3.752a.64.64 0 0 0-.252-.816zm.442-4.561l.825 2.596h-.007a.635.635 0 0 1-.927.742l-2.234-1.337a.623.623 0 0 1-.305-.485.631.631 0 0 1 .209-.538l1.416-1.262a.63.63 0 0 1 1.023.284zm-11.82 6.786a.637.637 0 0 0-.202-.585L6.235 12.87a.627.627 0 0 0-.744-.071l-3.187 1.908a.648.648 0 0 0-.255.813l1.678 3.752a.632.632 0 0 0 .814.332l5.4-2.19a.637.637 0 0 0 .391-.482zm1.912 1.07l4.334 1.755c.212.091.358.29.382.521a.635.635 0 0 1-.269.596l-4.338 3.013A.625.625 0 0 1 12 24a.64.64 0 0 1-.354-.114l-4.334-3.013a.635.635 0 0 1 .124-1.117l4.334-1.755a.642.642 0 0 1 .474.001z" />
                 </svg>
               </div>
-              <div className="col-span-1 flex items-center justify-center h-14 lg:h-28">
+              <div className="col-span-1 flex h-14 items-center justify-center lg:h-28">
                 <svg
                   role="img"
                   viewBox="0 0 24 24"
diff --git a/nx-dev/ui-fence/src/lib/fence.tsx b/nx-dev/ui-fence/src/lib/fence.tsx
index 92e9892c6341f..3617ab7183dbe 100644
--- a/nx-dev/ui-fence/src/lib/fence.tsx
+++ b/nx-dev/ui-fence/src/lib/fence.tsx
@@ -171,7 +171,7 @@ export function Fence({
               <button
                 type="button"
                 className={
-                  'opacity-0 transition-opacity group-hover:opacity-100 not-prose flex border border-slate-200 bg-slate-50/50 p-2 dark:border-slate-700 dark:bg-slate-800/60' +
+                  'not-prose flex border border-slate-200 bg-slate-50/50 p-2 opacity-0 transition-opacity group-hover:opacity-100 dark:border-slate-700 dark:bg-slate-800/60' +
                   (highlightOptions && highlightOptions[0]
                     ? ''
                     : ' rounded-tr-lg')
@@ -192,7 +192,7 @@ export function Fence({
               selected={selectedOption}
               onChange={highlightChange}
             >
-              <SparklesIcon className="h-5 w-5 mr-1"></SparklesIcon>
+              <SparklesIcon className="mr-1 h-5 w-5"></SparklesIcon>
             </Selector>
           )}
         </div>
diff --git a/nx-dev/ui-fence/src/lib/fences/code-output.tsx b/nx-dev/ui-fence/src/lib/fences/code-output.tsx
index df5246b80affa..6a20c8b186c99 100644
--- a/nx-dev/ui-fence/src/lib/fences/code-output.tsx
+++ b/nx-dev/ui-fence/src/lib/fences/code-output.tsx
@@ -8,7 +8,7 @@ export function CodeOutput({
   fileName: string;
 }): JSX.Element {
   return (
-    <div className="hljs not-prose w-full overflow-x-auto border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60 rounded-lg">
+    <div className="hljs not-prose w-full overflow-x-auto rounded-lg border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60">
       {!!fileName && (
         <div className="flex border-b border-slate-200 bg-slate-50 px-4 py-2 italic text-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:text-slate-500">
           {fileName}
diff --git a/nx-dev/ui-fence/src/lib/fences/terminal-output.tsx b/nx-dev/ui-fence/src/lib/fences/terminal-output.tsx
index 34d366ac877ed..d55e8d4061b3a 100644
--- a/nx-dev/ui-fence/src/lib/fences/terminal-output.tsx
+++ b/nx-dev/ui-fence/src/lib/fences/terminal-output.tsx
@@ -13,8 +13,8 @@ export function TerminalOutput({
   const commandLines = command.split('\n').filter(Boolean);
   return (
     <TerminalShellWrapper>
-      <div className="p-4 pt-2 overflow-x-auto">
-        <div className="flex flex-col items-left">
+      <div className="overflow-x-auto p-4 pt-2">
+        <div className="items-left flex flex-col">
           {commandLines.map((line, index) => {
             return (
               <div key={index} className="flex items-center">
@@ -33,7 +33,7 @@ export function TerminalOutput({
             );
           })}
         </div>
-        <div className="flex not-prose">{content}</div>
+        <div className="not-prose flex">{content}</div>
       </div>
     </TerminalShellWrapper>
   );
diff --git a/nx-dev/ui-fence/src/lib/fences/terminal-shell.tsx b/nx-dev/ui-fence/src/lib/fences/terminal-shell.tsx
index c8685ba353ccd..bc52795e5e1ce 100644
--- a/nx-dev/ui-fence/src/lib/fences/terminal-shell.tsx
+++ b/nx-dev/ui-fence/src/lib/fences/terminal-shell.tsx
@@ -6,12 +6,12 @@ export function TerminalShellWrapper({
   children: ReactNode;
 }): JSX.Element {
   return (
-    <div className="hljs not-prose w-full overflow-x-auto border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60 rounded-lg">
-      <div className="relative flex justify-center p-2 border-b border-slate-200 bg-slate-100/50 text-slate-400 dark:border-slate-700 dark:bg-slate-700/50 dark:text-slate-500">
-        <div className="absolute flex items-center gap-2 left-2 top-3">
-          <span className="w-2 h-2 bg-red-400 rounded-full dark:bg-red-600" />
-          <span className="w-2 h-2 bg-yellow-400 rounded-full dark:bg-yellow-600" />
-          <span className="w-2 h-2 bg-green-400 rounded-full dark:bg-green-600" />
+    <div className="hljs not-prose w-full overflow-x-auto rounded-lg border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60">
+      <div className="relative flex justify-center border-b border-slate-200 bg-slate-100/50 p-2 text-slate-400 dark:border-slate-700 dark:bg-slate-700/50 dark:text-slate-500">
+        <div className="absolute left-2 top-3 flex items-center gap-2">
+          <span className="h-2 w-2 rounded-full bg-red-400 dark:bg-red-600" />
+          <span className="h-2 w-2 rounded-full bg-yellow-400 dark:bg-yellow-600" />
+          <span className="h-2 w-2 rounded-full bg-green-400 dark:bg-green-600" />
         </div>
         <span className="h-5"></span>
       </div>
diff --git a/nx-dev/ui-home/src/lib/hero.tsx b/nx-dev/ui-home/src/lib/hero.tsx
index d200450d05615..20f1d63199583 100644
--- a/nx-dev/ui-home/src/lib/hero.tsx
+++ b/nx-dev/ui-home/src/lib/hero.tsx
@@ -23,9 +23,9 @@ export function Hero(): JSX.Element {
 
   return (
     <header className="bg-contain bg-fixed bg-clip-border bg-center bg-no-repeat bg-origin-border lg:bg-local">
-      <div className="mx-auto max-w-3xl pt-20 px-4">
+      <div className="mx-auto max-w-3xl px-4 pt-20">
         <div className="hidden sm:mb-8 sm:flex sm:justify-center">
-          <div className="relative rounded-full px-3 py-1 text-sm leading-6 ring-1 ring-slate-900/10 dark:ring-slate-100/10 hover:ring-slate-900/20 dark:hover:ring-slate-100/20 transition-all">
+          <div className="relative rounded-full px-3 py-1 text-sm leading-6 ring-1 ring-slate-900/10 transition-all hover:ring-slate-900/20 dark:ring-slate-100/10 dark:hover:ring-slate-100/20">
             Introducing{' '}
             <span className="text-blue-500 dark:text-sky-500">Nx Agents</span>,
             the next leap in CI.{' '}
@@ -60,12 +60,12 @@ export function Hero(): JSX.Element {
             </span>{' '}
             CI
           </h1>
-          <h2 className="mt-6 text-lg leading-8 font-medium dark:text-slate-100">
+          <h2 className="mt-6 text-lg font-medium leading-8 dark:text-slate-100">
             Nx is a{' '}
             <span
               onClick={() => setDisplayBuildSystem(!displayBuildSystem)}
               className={cx(
-                'cursor-pointer  hover:underline inline-flex items-center rounded-md hover:bg-slate-50 my-0.5 px-1.5 py-0.5 transition text-md font-medium ring-1 ring-inset ring-slate-500/10 hover:dark:bg-slate-400/10 dark:ring-slate-400/20',
+                'text-md  my-0.5 inline-flex cursor-pointer items-center rounded-md px-1.5 py-0.5 font-medium ring-1 ring-inset ring-slate-500/10 transition hover:bg-slate-50 hover:underline dark:ring-slate-400/20 hover:dark:bg-slate-400/10',
                 displayBuildSystem && 'bg-yellow-500/10 dark:bg-yellow-500/20'
               )}
             >
@@ -89,7 +89,7 @@ export function Hero(): JSX.Element {
             <span
               onClick={() => setDisplayTools(!displayTools)}
               className={cx(
-                'cursor-pointer hover:underline inline-flex items-center rounded-md hover:bg-slate-50 my-0.5 px-1.5 py-0.5 transition text-md font-medium ring-1 ring-inset ring-slate-500/10 hover:dark:bg-slate-400/10 dark:ring-slate-400/20',
+                'text-md my-0.5 inline-flex cursor-pointer items-center rounded-md px-1.5 py-0.5 font-medium ring-1 ring-inset ring-slate-500/10 transition hover:bg-slate-50 hover:underline dark:ring-slate-400/20 hover:dark:bg-slate-400/10',
                 displayTools && 'bg-cyan-500/10 dark:bg-cyan-500/20'
               )}
             >
@@ -114,7 +114,7 @@ export function Hero(): JSX.Element {
             <span
               onClick={() => setDisplayCi(!displayCi)}
               className={cx(
-                'cursor-pointer hover:underline inline-flex items-center rounded-md hover:bg-slate-50 my-0.5 px-1.5 py-0.5 transition text-md font-medium ring-1 ring-inset ring-slate-500/10 hover:dark:bg-slate-400/10 dark:ring-slate-400/20',
+                'text-md my-0.5 inline-flex cursor-pointer items-center rounded-md px-1.5 py-0.5 font-medium ring-1 ring-inset ring-slate-500/10 transition hover:bg-slate-50 hover:underline dark:ring-slate-400/20 hover:dark:bg-slate-400/10',
                 displayCi && 'bg-fuchsia-500/10 dark:bg-fuchsia-500/20'
               )}
             >
@@ -155,7 +155,7 @@ export function Hero(): JSX.Element {
               Contact us
             </ButtonLink>
           </div>
-          <div className="mt-4 flex gap-2 text-md items-center justify-center italic">
+          <div className="text-md mt-4 flex items-center justify-center gap-2 italic">
             Built with
             <svg
               role="img"
@@ -190,16 +190,16 @@ export function Hero(): JSX.Element {
             src="/images/illustrations/nxdev-light.webp"
             alt="light"
             aria-hidden="true"
-            className="dark:hidden block"
+            className="block dark:hidden"
           />
           <img
             src="/images/illustrations/nxdev-dark.webp"
             alt="dark"
             aria-hidden="true"
-            className="dark:block hidden"
+            className="hidden dark:block"
           />
           <div className="relative" aria-hidden="true">
-            <div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-white dark:from-slate-900 pt-[7%]"></div>
+            <div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-white pt-[7%] dark:from-slate-900"></div>
           </div>
         </div>
       </div>
diff --git a/nx-dev/ui-home/src/lib/nx-with-ci.tsx b/nx-dev/ui-home/src/lib/nx-with-ci.tsx
index 881edc18cc13a..59b66f66d97ab 100644
--- a/nx-dev/ui-home/src/lib/nx-with-ci.tsx
+++ b/nx-dev/ui-home/src/lib/nx-with-ci.tsx
@@ -92,7 +92,7 @@ export function NxWithCi(): JSX.Element {
         <div className="flex items-end">
           <div className="w-full">
             <div className="flex">
-              <div className="shrink-0 w-28 border-r border-slate-200 dark:border-slate-500 py-3 text-slate-700 dark:text-slate-400">
+              <div className="w-28 shrink-0 border-r border-slate-200 py-3 text-slate-700 dark:border-slate-500 dark:text-slate-400">
                 CI without Nx
               </div>
               <div className="flex-grow py-1">
@@ -100,7 +100,7 @@ export function NxWithCi(): JSX.Element {
                   initial={{ display: 'none', width: 0 }}
                   variants={{ visible: { display: 'flex', width: '90%' } }}
                   transition={{ type: 'tween', duration: 1 }}
-                  className="flex-grow items-center justify-end text-slate-600 dark:text-slate-400 bg-slate-200 dark:bg-slate-700 py-2 px-4 rounded-r-lg"
+                  className="flex-grow items-center justify-end rounded-r-lg bg-slate-200 py-2 px-4 text-slate-600 dark:bg-slate-700 dark:text-slate-400"
                 >
                   <Counter from={0} to={90} round={0} progress={progress} />
                   <span className="ml-1">minutes</span>
@@ -108,15 +108,15 @@ export function NxWithCi(): JSX.Element {
               </div>
             </div>
             <div className="flex">
-              <div className="shrink-0 font-medium w-28 border-r border-slate-200 dark:border-slate-500 py-3 text-slate-700 dark:text-slate-400">
+              <div className="w-28 shrink-0 border-r border-slate-200 py-3 font-medium text-slate-700 dark:border-slate-500 dark:text-slate-400">
                 CI with Nx
               </div>
-              <div className="flex-grow flex gap-4 py-1 font-medium">
+              <div className="flex flex-grow gap-4 py-1 font-medium">
                 <motion.div
                   initial={{ display: 'none', width: 0 }}
                   variants={{ visible: { display: 'flex', width: '10%' } }}
                   transition={{ type: 'tween', duration: 1 }}
-                  className="bg-blue-500 dark:bg-sky-500 rounded-r-lg"
+                  className="rounded-r-lg bg-blue-500 dark:bg-sky-500"
                 />
                 <div className="flex items-center text-slate-700 dark:text-slate-400">
                   <Counter from={0} to={10} round={0} progress={progress} />
@@ -128,7 +128,7 @@ export function NxWithCi(): JSX.Element {
               <a
                 href="https://www.youtube.com/watch?v=KPCMg_Dn0Eo"
                 target="_blank"
-                className="hover:underline text-sm font-medium"
+                className="text-sm font-medium hover:underline"
                 title="Find out how to reduce CI time with Nx"
                 rel="noreferrer"
               >
@@ -138,13 +138,13 @@ export function NxWithCi(): JSX.Element {
           </div>
         </div>
       </motion.div>
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-8 lg:pb-16">
+      <div className="mx-auto max-w-7xl px-4 pb-8 sm:px-6 lg:px-8 lg:pb-16">
         <dl className="grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-3">
           <div className="relative">
             <dt className="text-base font-semibold leading-7 text-slate-900 dark:text-slate-100">
-              <div className="relative group">
-                <div className="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-lg blur-sm opacity-25 group-hover:opacity-90 transition duration-1000 group-hover:duration-200"></div>
-                <div className="relative flex gap-4 items-center rounded-lg border border-slate-200 bg-white p-4 text-lg shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 dark:border-slate-800/40 dark:bg-slate-800">
+              <div className="group relative">
+                <div className="absolute -inset-1 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 opacity-25 blur-sm transition duration-1000 group-hover:opacity-90 group-hover:duration-200"></div>
+                <div className="relative flex items-center gap-4 rounded-lg border border-slate-200 bg-white p-4 text-lg shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 dark:border-slate-800/40 dark:bg-slate-800">
                   <NxCacheIcon className="h-8 w-8" aria-hidden="true" />
                   <Link
                     href="/ci/features/remote-cache"
@@ -162,9 +162,9 @@ export function NxWithCi(): JSX.Element {
           </div>
           <div className="relative">
             <dt className="text-base font-semibold leading-7 text-slate-900 dark:text-slate-100">
-              <div className="relative group">
-                <div className="absolute -inset-1 bg-gradient-to-r from-emerald-500 to-green-500 rounded-lg blur-sm opacity-25 group-hover:opacity-90 transition duration-1000 group-hover:duration-200"></div>
-                <div className="relative flex gap-4 items-center rounded-lg border border-slate-200 bg-white p-4 text-lg shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 dark:border-slate-800/40 dark:bg-slate-800">
+              <div className="group relative">
+                <div className="absolute -inset-1 rounded-lg bg-gradient-to-r from-emerald-500 to-green-500 opacity-25 blur-sm transition duration-1000 group-hover:opacity-90 group-hover:duration-200"></div>
+                <div className="relative flex items-center gap-4 rounded-lg border border-slate-200 bg-white p-4 text-lg shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 dark:border-slate-800/40 dark:bg-slate-800">
                   <NxAgentsIcon className="h-8 w-8" aria-hidden="true" />
                   <a
                     href="/ci/features/distribute-task-execution"
@@ -183,9 +183,9 @@ export function NxWithCi(): JSX.Element {
           </div>
           <div className="relative">
             <dt className="text-base font-semibold leading-7 text-slate-900 dark:text-slate-100">
-              <div className="relative group opacity-70">
-                <div className="absolute -inset-1 bg-slate-500 rounded-lg blur-sm opacity-25"></div>
-                <div className="relative flex gap-4 items-center rounded-lg border border-slate-200 bg-white p-4 text-lg shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 dark:border-slate-800/40 dark:bg-slate-800">
+              <div className="group relative opacity-70">
+                <div className="absolute -inset-1 rounded-lg bg-slate-500 opacity-25 blur-sm"></div>
+                <div className="relative flex items-center gap-4 rounded-lg border border-slate-200 bg-white p-4 text-lg shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 dark:border-slate-800/40 dark:bg-slate-800">
                   <SparklesIcon
                     className="block h-8 w-8 sm:hidden md:block"
                     aria-hidden="true"
@@ -194,7 +194,7 @@ export function NxWithCi(): JSX.Element {
                   <span className="absolute inset-0"></span>Tusky
                   {/*</a>*/}
                   <div className="flex-grow" />
-                  <span className="dark:bg-slate-400/10 dark:text-slate-400 dark:ring-slate-400/20 inline-flex items-center rounded-md bg-slate-50 px-2 py-1 text-xs font-medium text-slate-600 ring-1 ring-inset ring-slate-500/10">
+                  <span className="inline-flex items-center rounded-md bg-slate-50 px-2 py-1 text-xs font-medium text-slate-600 ring-1 ring-inset ring-slate-500/10 dark:bg-slate-400/10 dark:text-slate-400 dark:ring-slate-400/20">
                     Coming soon
                   </span>
                 </div>
diff --git a/nx-dev/ui-markdoc/src/lib/icons.tsx b/nx-dev/ui-markdoc/src/lib/icons.tsx
index c2688ebbbf8f0..f38a843658f8a 100644
--- a/nx-dev/ui-markdoc/src/lib/icons.tsx
+++ b/nx-dev/ui-markdoc/src/lib/icons.tsx
@@ -9,7 +9,7 @@ export const frameworkIcons: Record<
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 48 49"
       >
         <path
@@ -24,7 +24,7 @@ export const frameworkIcons: Record<
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 52 54"
       >
         <path
@@ -59,7 +59,7 @@ export const frameworkIcons: Record<
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 132 134"
       >
         <path fill="#F7DF1E" d="M0 0h60v60H0V0z" />
@@ -85,7 +85,7 @@ export const frameworkIcons: Record<
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 47 48"
       >
         <path
@@ -100,7 +100,7 @@ export const frameworkIcons: Record<
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 196 205"
       >
         <path fill="#fff" d="M117.167 31h61v69h-61z" />
@@ -138,7 +138,7 @@ export const frameworkIcons: Record<
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="#3178C6"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
       >
         <rect width="24" height="24" fill="#fff" rx="2" ry="2" />
@@ -151,7 +151,7 @@ export const frameworkIcons: Record<
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="red"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
       >
         <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814z" />
@@ -181,7 +181,7 @@ export const frameworkIcons: Record<
         xmlns="http://www.w3.org/2000/svg"
         stroke="currentColor"
         fill="transparent"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
       >
         <path d="M22.167 7.167v-2.5a2.5 2.5 0 0 0-2.5-2.5h-15a2.5 2.5 0 0 0-2.5 2.5v15a2.5 2.5 0 0 0 2.5 2.5h2.5m15-15c-2.76 0-5 2.24-5 5s-2.24 5-5 5-5 2.24-5 5m15-15V19.59a2.577 2.577 0 0 1-2.576 2.576H7.167" />
@@ -192,7 +192,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         fill="currentColor"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -205,7 +205,7 @@ export const frameworkIcons: Record<
       <svg
         fill="#339933"
         role="img"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -218,7 +218,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         fill="#000000"
-        className="adaptive-icon w-full h-full"
+        className="adaptive-icon h-full w-full"
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
@@ -233,7 +233,7 @@ export const frameworkIcons: Record<
       <svg
         fill="#E0234E"
         role="img"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -246,7 +246,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="20 0 350 339.32"
       >
         <path
@@ -276,7 +276,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="100 150 450 450"
       >
         <path
@@ -330,7 +330,7 @@ export const frameworkIcons: Record<
       <svg
         fill="#000000"
         role="img"
-        className="adaptive-icon w-full h-full"
+        className="adaptive-icon h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -343,7 +343,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         fill="#000000"
-        className="adaptive-icon w-full h-full"
+        className="adaptive-icon h-full w-full"
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
@@ -358,7 +358,7 @@ export const frameworkIcons: Record<
       <svg
         fill="#FF4785"
         role="img"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -372,7 +372,7 @@ export const frameworkIcons: Record<
       <svg
         xmlns="http://www.w3.org/2000/svg"
         role="img"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 166 155.3"
       >
         <defs>
@@ -469,7 +469,7 @@ export const frameworkIcons: Record<
       <svg
         fill="#324FFF"
         role="img"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -483,7 +483,7 @@ export const frameworkIcons: Record<
       <svg
         viewBox="0 0 410 404"
         role="img"
-        className="w-full h-full"
+        className="h-full w-full"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -529,7 +529,7 @@ export const frameworkIcons: Record<
       <svg
         fill="#2596BE"
         role="img"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -543,7 +543,7 @@ export const frameworkIcons: Record<
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 800 800"
       >
         <path fill="#212121" d="M0 0H800V800H0z"></path>
@@ -605,7 +605,7 @@ export const frameworkIcons: Record<
   dotnet: {
     image: (
       <svg
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 456 456"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -635,7 +635,7 @@ export const frameworkIcons: Record<
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 60 64"
       >
         <path
@@ -659,7 +659,7 @@ export const frameworkIcons: Record<
         id="Layer_1"
         data-name="Layer 1"
         xmlns="http://www.w3.org/2000/svg"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 90 66.06"
       >
         <defs>
@@ -686,7 +686,7 @@ export const frameworkIcons: Record<
   go: {
     image: (
       <svg
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 32 32"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -715,7 +715,7 @@ export const frameworkIcons: Record<
   vue: {
     image: (
       <svg
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 -17.5 256 256"
         xmlns="http://www.w3.org/2000/svg"
         preserveAspectRatio="xMinYMin meet"
@@ -740,7 +740,7 @@ export const frameworkIcons: Record<
       <svg
         version="1.1"
         viewBox="0 0 108 108"
-        className="adaptive-icon w-full h-full"
+        className="adaptive-icon h-full w-full"
         xmlns="http://www.w3.org/2000/svg"
         xmlnsXlink="http://www.w3.org/1999/xlink"
       >
@@ -824,7 +824,7 @@ export const frameworkIcons: Record<
   nuxt: {
     image: (
       <svg
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 900 900"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -840,7 +840,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 98.1 118"
       >
         <path
@@ -866,7 +866,7 @@ export const frameworkIcons: Record<
   gatsby: {
     image: (
       <svg
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 32 32"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -887,7 +887,7 @@ export const frameworkIcons: Record<
       <svg
         fill="#FF5D01"
         role="img"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -901,7 +901,7 @@ export const frameworkIcons: Record<
       <svg
         fill="#2EAD33"
         role="img"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -915,7 +915,7 @@ export const frameworkIcons: Record<
       <svg
         fill="#F69220"
         role="img"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -929,7 +929,7 @@ export const frameworkIcons: Record<
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="currentColor"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 340 340"
       >
         <path
@@ -950,7 +950,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 630 630"
       >
         <title>JavaScript Unofficial Logo</title>
@@ -964,7 +964,7 @@ export const frameworkIcons: Record<
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="#09D3AC"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
       >
         <path d="M21.92 10.846c0-1.223-1.44-2.308-3.655-2.97.533-2.25.3-4.04-.76-4.645a1.695 1.695 0 00-.85-.213c-.989 0-2.239.69-3.501 1.886-1.262-1.186-2.509-1.873-3.496-1.873a1.68 1.68 0 00-.863.216c-1.054.607-1.273 2.386-.747 4.625-2.203.659-3.636 1.735-3.64 2.953-.003 1.218 1.442 2.308 3.656 2.968-.533 2.251-.302 4.04.76 4.645.259.145.552.218.848.213.991 0 2.241-.69 3.503-1.886 1.26 1.186 2.507 1.873 3.496 1.873a1.703 1.703 0 00.863-.216c1.054-.607 1.271-2.386.747-4.616 2.204-.668 3.636-1.744 3.638-2.96zm-7.953-5.541c1.454-1.301 2.363-1.442 2.686-1.442a.836.836 0 01.43.103c.508.29.71 1.31.549 2.663a10.075 10.075 0 01-.178 1.028 17.347 17.347 0 00-2.233-.367 17.49 17.49 0 00-1.463-1.79c.065-.065.136-.131.21-.195zm-4.401 6.548c.138.266.286.532.438.8.153.268.313.54.49.808-.48-.07-.948-.156-1.391-.259.124-.451.282-.895.463-1.35zm-.492-3.38c.45-.105.92-.192 1.408-.26-.177.263-.33.533-.49.815-.16.282-.3.533-.437.802a20.901 20.901 0 01-.48-1.358zM10 10.84c.22-.465.462-.93.726-1.396.267-.465.552-.918.847-1.35a20.569 20.569 0 013.176.004c.295.428.577.886.844 1.34.266.452.511.926.731 1.39a20.079 20.079 0 01-1.571 2.746 20.309 20.309 0 01-3.176-.004 19.91 19.91 0 01-.845-1.34 20.831 20.831 0 01-.725-1.39H10zm5.834-2.623c.483.068.95.155 1.392.258-.131.438-.288.888-.469 1.34-.14-.266-.285-.532-.44-.8a37.617 37.617 0 00-.476-.798h-.007zm.49 4.425c.153-.269.298-.537.437-.805.177.462.355.917.48 1.36-.448.105-.919.19-1.407.258.172-.263.337-.534.497-.813h-.007zm-3.165-6.54c.32.342.633.711.94 1.107a22.694 22.694 0 00-.928-.021c-.314 0-.636 0-.946.021a15 15 0 01.934-1.106zM9.22 3.974a.856.856 0 01.438-.099 2.328 2.328 0 01.922.233 6.937 6.937 0 011.775 1.203l.208.19a17.477 17.477 0 00-1.449 1.776 17.553 17.553 0 00-2.246.365 9.036 9.036 0 01-.177-1.006c-.185-1.34.028-2.363.527-2.655l.002-.007zm-.94 9.002a10.4 10.4 0 01-.983-.355c-1.26-.533-2.042-1.216-2.042-1.8 0-.585.785-1.265 2.044-1.788a10.232 10.232 0 01.966-.345 17.382 17.382 0 00.81 2.155 17.534 17.534 0 00-.794 2.133zm4.084 3.39c-1.454 1.302-2.363 1.44-2.688 1.44a.832.832 0 01-.43-.102c-.507-.29-.71-1.31-.548-2.663a9.957 9.957 0 01.177-1.027c.736.17 1.482.292 2.234.366.447.629.936 1.227 1.463 1.79l-.208.197zm.811-.8c-.32-.34-.634-.71-.942-1.106.305.014.616.021.93.021.314 0 .636 0 .946-.02-.307.395-.62.764-.935 1.105h.001zm3.938 2.13a.856.856 0 01-.44.105c-.323 0-1.243-.142-2.692-1.438l-.207-.19a17.466 17.466 0 001.447-1.775 17.236 17.236 0 002.247-.366c.078.345.14.682.178 1.007.176 1.338-.029 2.361-.535 2.65l.002.008zm1.918-5.049c-.304.125-.625.24-.966.343a17.487 17.487 0 00-.812-2.155c.312-.692.579-1.404.798-2.13.333.1.662.22.983.354 1.259.533 2.042 1.216 2.04 1.8-.002.585-.785 1.257-2.045 1.781l.002.007zm-5.873-.18c.322 0 .637-.096.905-.274a1.63 1.63 0 00.601-.731 1.63 1.63 0 00.094-.942 1.63 1.63 0 00-.445-.835 1.63 1.63 0 00-.834-.447 1.63 1.63 0 00-.942.092 1.63 1.63 0 00-.732.6 1.63 1.63 0 00-.276.905 1.628 1.628 0 00.123.624 1.63 1.63 0 001.506 1.007zM2.328 1.011v19.645H24V1.012H2.328zm20.825 18.8H3.176V1.859h19.977v17.953zm-15.09-6.019c-.533 2.251-.303 4.04.759 4.645.259.145.552.218.849.213.99 0 2.24-.69 3.503-1.886 1.26 1.186 2.506 1.873 3.495 1.873.302.006.6-.069.863-.216 1.055-.607 1.271-2.386.748-4.616 2.203-.66 3.636-1.737 3.637-2.953.002-1.216-1.44-2.308-3.653-2.97.532-2.25.3-4.04-.76-4.645a1.695 1.695 0 00-.85-.213c-.99 0-2.24.69-3.502 1.886-1.262-1.186-2.508-1.873-3.496-1.873a1.68 1.68 0 00-.862.216C7.739 3.862 7.52 5.64 8.046 7.88c-2.203.659-3.636 1.735-3.64 2.953-.003 1.218 1.444 2.297 3.658 2.961h-.002zm4.297 2.573c-1.454 1.301-2.363 1.44-2.688 1.44a.832.832 0 01-.43-.103c-.507-.29-.71-1.31-.548-2.663a9.957 9.957 0 01.178-1.027 17.68 17.68 0 002.233.366c.447.629.936 1.227 1.463 1.79l-.208.197zm4.402-6.55a24.03 24.03 0 00-.44-.8c-.155-.269-.32-.533-.484-.798.483.068.95.155 1.392.258-.13.438-.286.888-.467 1.34h-.001zm.483 3.373c-.448.105-.918.19-1.407.258a20.514 20.514 0 00.927-1.617c.187.47.348.921.476 1.368l.004-.008zm-.925-2.37a20.06 20.06 0 01-1.572 2.747 20.256 20.256 0 01-3.176-.004 19.938 19.938 0 01-1.576-2.73c.22-.465.462-.93.726-1.396.266-.465.552-.918.847-1.35a20.571 20.571 0 013.176.004c.294.428.577.886.843 1.34.266.452.513.935.733 1.398l-.001-.009zm-5.826 2.642c-.48-.07-.948-.156-1.391-.259.13-.437.289-.888.47-1.34.138.266.286.532.438.8.153.268.306.531.483.8zM10 9.023c-.154.266-.3.532-.437.802a17.869 17.869 0 01-.488-1.353c.45-.104.92-.191 1.408-.259-.165.263-.323.534-.483.81zm3.175 6.542c-.32-.34-.634-.71-.943-1.106.305.014.616.021.93.021.314 0 .636 0 .946-.02a16.35 16.35 0 01-.933 1.105zm3.937 2.13a.856.856 0 01-.44.105c-.323 0-1.243-.142-2.691-1.438l-.208-.19a17.479 17.479 0 001.447-1.775 17.234 17.234 0 002.247-.366c.079.344.14.682.178 1.007.178 1.338-.027 2.361-.533 2.65v.008zm.938-8.994c.333.102.662.22.983.355 1.26.533 2.042 1.216 2.04 1.8-.001.585-.783 1.272-2.043 1.796-.304.124-.625.24-.966.342a17.487 17.487 0 00-.811-2.155c.312-.697.578-1.413.797-2.145v.007zm-4.084-3.389c1.454-1.301 2.363-1.442 2.687-1.442a.836.836 0 01.43.103c.507.29.71 1.31.548 2.663a10.076 10.076 0 01-.178 1.028 17.345 17.345 0 00-2.233-.367 17.476 17.476 0 00-1.463-1.79c.067-.072.138-.138.211-.202l-.002.007zm-.807.792c.32.34.633.71.94 1.106a22.694 22.694 0 00-.928-.021c-.314 0-.636 0-.946.02a15 15 0 01.934-1.105zM9.22 3.974a.856.856 0 01.438-.1 2.328 2.328 0 01.922.233 6.937 6.937 0 011.775 1.203l.208.19a17.477 17.477 0 00-1.449 1.776 17.553 17.553 0 00-2.246.365 9.036 9.036 0 01-.177-1.006c-.185-1.34.028-2.363.527-2.655l.002-.007zM7.299 9.031a10.232 10.232 0 01.966-.345 17.382 17.382 0 00.81 2.155 17.536 17.536 0 00-.798 2.13 10.426 10.426 0 01-.984-.354c-1.26-.533-2.041-1.216-2.041-1.8 0-.584.788-1.263 2.047-1.786zm5.859.177a1.63 1.63 0 00-.906.274 1.63 1.63 0 00-.601.73 1.63 1.63 0 00-.094.942 1.63 1.63 0 003.229-.314 1.627 1.627 0 00-.12-.627 1.63 1.63 0 00-.353-.533 1.63 1.63 0 00-.53-.356 1.628 1.628 0 00-.625-.125v.01za1.63 1.63 0 00-.906.274 1.63 1.63 0 00-.601.73 1.63 1.63 0 00-.094.942 1.63 1.63 0 003.229-.314 1.627 1.627 0 00-.12-.627 1.63 1.63 0 00-.353-.533 1.63 1.63 0 00-.53-.356 1.628 1.628 0 00-.625-.125v.01za1.63 1.63 0 00-.906.274 1.63 1.63 0 00-.601.73 1.63 1.63 0 00-.094.942 1.63 1.63 0 003.229-.314 1.627 1.627 0 00-.12-.627 1.63 1.63 0 00-.353-.533 1.63 1.63 0 00-.53-.356 1.628 1.628 0 00-.625-.125v.01zm8.761 1.64c0-1.223-1.44-2.307-3.654-2.97.533-2.25.3-4.039-.76-4.644a1.695 1.695 0 00-.85-.213c-.989 0-2.239.69-3.501 1.885-1.262-1.186-2.509-1.873-3.496-1.873a1.68 1.68 0 00-.863.217c-1.054.607-1.273 2.386-.747 4.625-2.203.658-3.636 1.734-3.64 2.952-.003 1.218 1.442 2.308 3.656 2.969-.533 2.25-.302 4.039.76 4.644.259.145.552.219.848.213.991 0 2.241-.69 3.503-1.885 1.26 1.186 2.507 1.873 3.496 1.873.302.005.6-.07.863-.217 1.054-.607 1.271-2.386.747-4.616 2.204-.671 3.636-1.747 3.638-2.963v.004zm-7.952-5.544c1.454-1.301 2.363-1.442 2.686-1.442a.836.836 0 01.43.103c.508.29.71 1.31.549 2.663a10.075 10.075 0 01-.178 1.028 17.347 17.347 0 00-2.233-.367 17.49 17.49 0 00-1.463-1.79c.065-.065.136-.131.21-.195zm-4.401 6.548c.138.266.286.532.438.8.153.268.313.54.49.808-.48-.07-.948-.156-1.391-.259.124-.451.282-.895.463-1.35zm-.492-3.38c.45-.105.92-.192 1.408-.26-.177.263-.33.533-.49.815-.16.282-.3.533-.437.802a20.901 20.901 0 01-.48-1.358zM10 10.84c.22-.465.462-.93.726-1.396.267-.465.552-.918.847-1.35a20.569 20.569 0 013.176.004c.295.428.577.886.844 1.34.266.452.511.926.731 1.39a20.079 20.079 0 01-1.571 2.746 20.309 20.309 0 01-3.176-.004 19.91 19.91 0 01-.845-1.34 20.831 20.831 0 01-.725-1.39H10zm5.834-2.623c.483.068.95.155 1.392.258-.131.438-.288.888-.469 1.34-.14-.266-.285-.532-.44-.8a37.617 37.617 0 00-.476-.798h-.007zm.49 4.425c.153-.269.298-.537.437-.805.177.462.355.917.48 1.36-.448.105-.919.19-1.407.258.172-.263.337-.534.497-.813h-.007zm-3.165-6.54c.32.342.633.711.94 1.107a22.694 22.694 0 00-.928-.021c-.314 0-.636 0-.946.021a15 15 0 01.934-1.106zM9.22 3.974a.856.856 0 01.438-.099 2.328 2.328 0 01.922.233 6.937 6.937 0 011.775 1.203l.208.19a17.477 17.477 0 00-1.449 1.776 17.553 17.553 0 00-2.246.365 9.036 9.036 0 01-.177-1.006c-.185-1.34.028-2.363.527-2.655l.002-.007zm-.94 9.002a10.4 10.4 0 01-.983-.355c-1.26-.533-2.042-1.216-2.042-1.8 0-.585.785-1.265 2.044-1.788a10.232 10.232 0 01.966-.345 17.382 17.382 0 00.81 2.155 17.534 17.534 0 00-.794 2.133zm4.084 3.39c-1.454 1.302-2.363 1.44-2.688 1.44a.832.832 0 01-.43-.102c-.507-.29-.71-1.31-.548-2.663a9.957 9.957 0 01.177-1.027c.736.17 1.482.292 2.234.366.447.629.936 1.227 1.463 1.79l-.208.197zm.811-.8c-.32-.34-.634-.71-.942-1.106.305.014.616.021.93.021.314 0 .636 0 .946-.02-.307.395-.62.764-.935 1.105h.001zm3.938 2.13a.856.856 0 01-.44.105c-.323 0-1.243-.142-2.692-1.438l-.207-.19a17.466 17.466 0 001.447-1.775 17.236 17.236 0 002.247-.366c.078.345.14.682.178 1.007.176 1.338-.029 2.361-.535 2.65l.002.008zm1.918-5.049c-.304.125-.625.24-.966.343a17.487 17.487 0 00-.812-2.155c.312-.692.579-1.404.798-2.13.333.1.662.22.983.354 1.259.533 2.042 1.216 2.04 1.8-.002.585-.785 1.257-2.045 1.781l.002.007zm-5.873-.18c.322 0 .637-.096.905-.274a1.63 1.63 0 00.601-.731 1.63 1.63 0 00.094-.942 1.63 1.63 0 00-.445-.835 1.63 1.63 0 00-.834-.447 1.63 1.63 0 00-.942.092 1.63 1.63 0 00-.732.6 1.63 1.63 0 00-.276.905 1.628 1.628 0 00.123.624 1.63 1.63 0 001.506 1.007zM.85 22.14V2.49L0 3.341v19.647h21.669l.849-.847H.85z"></path>
@@ -975,7 +975,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="w-full h-full text-black dark:text-white"
+        className="h-full w-full text-black dark:text-white"
         viewBox="0 0 24 24"
         fill="currentColor"
       >
@@ -1010,7 +1010,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="adaptive-icon w-full h-full"
+        className="adaptive-icon h-full w-full"
         viewBox="0 0 24 24"
       >
         <title>Cypress</title>
@@ -1022,7 +1022,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="adaptive-icon w-full h-full"
+        className="adaptive-icon h-full w-full"
         fill="#000020"
         viewBox="0 0 24 24"
       >
@@ -1036,7 +1036,7 @@ export const frameworkIcons: Record<
       <svg
         fill="#61DAFB"
         role="img"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -1049,7 +1049,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="0 0 728.55 727.44"
       >
         <title>Azure Pipelines</title>
@@ -1095,7 +1095,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="w-full h-full"
+        className="h-full w-full"
         width="500"
         height="500"
         viewBox="0 0 62.42 62.42"
@@ -1132,7 +1132,7 @@ export const frameworkIcons: Record<
   circleci: {
     image: (
       <svg
-        className="adaptive-icon w-full h-full"
+        className="adaptive-icon h-full w-full"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 390 390"
       >
@@ -1149,7 +1149,7 @@ export const frameworkIcons: Record<
   github: {
     image: (
       <svg
-        className="adaptive-icon w-full h-full"
+        className="adaptive-icon h-full w-full"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="-1 0 100 100"
       >
@@ -1167,7 +1167,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="w-full h-full"
+        className="h-full w-full"
         width="463.16"
         height="446.09"
         viewBox="0 0 463.16 446.09"
@@ -1202,7 +1202,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="w-full h-full"
+        className="h-full w-full"
         viewBox="-2 0 448 620"
       >
         <title>jenkins-logo</title>
@@ -1459,7 +1459,7 @@ export const frameworkIcons: Record<
       <svg
         fill="#000000"
         role="img"
-        className="adaptive-icon w-full h-full"
+        className="adaptive-icon h-full w-full"
         height="256"
         preserveAspectRatio="xMidYMid"
         viewBox="0 0 256 256"
@@ -1475,7 +1475,7 @@ export const frameworkIcons: Record<
       <svg
         fill="currentColor"
         role="img"
-        className="adaptive-icon w-full h-full"
+        className="adaptive-icon h-full w-full"
         viewBox="0.34 -0.059977834648891726 33.11668247084116 39.96397783464889"
         xmlns="http://www.w3.org/2000/svg"
         width="2047"
@@ -1493,7 +1493,7 @@ export const frameworkIcons: Record<
     image: (
       <svg
         width="32"
-        className="w-full h-full"
+        className="h-full w-full"
         height="32"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 32 32"
@@ -1544,7 +1544,7 @@ export const frameworkIcons: Record<
         width="32"
         height="32"
         viewBox="0 0 32 32"
-        className="w-full h-full"
+        className="h-full w-full"
       >
         <g fill="none">
           <path
@@ -1576,7 +1576,7 @@ export const frameworkIcons: Record<
         viewBox="0 0 24 24"
         strokeWidth="2"
         stroke="currentColor"
-        className="w-full h-full"
+        className="h-full w-full"
         fill="none"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -1595,7 +1595,7 @@ export const frameworkIcons: Record<
         height="15"
         viewBox="0 0 15 15"
         fill="none"
-        className="adaptive-icon w-full h-full"
+        className="adaptive-icon h-full w-full"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
@@ -1611,7 +1611,7 @@ export const frameworkIcons: Record<
         xmlns="http://www.w3.org/2000/svg"
         width="24"
         height="24"
-        className="w-full h-full"
+        className="h-full w-full"
         fill="currentColor"
         viewBox="0 0 24 24"
       >
diff --git a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
index 2cc1930dfa2ea..a64114bfa7010 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
@@ -79,9 +79,9 @@ export function Cards({
     >
       {children}
       {moreLink && (
-        <div className="flex justify-end mt-2 col-span-full">
+        <div className="col-span-full mt-2 flex justify-end">
           <Link
-            className="transition-all duration-200 ease-in-out flex items-center no-underline text-sm px-4 py-0 border-transparent hover:text-slate-900 dark:hover:text-sky-400 whitespace-nowrap font-semibold group"
+            className="group flex items-center whitespace-nowrap border-transparent px-4 py-0 text-sm font-semibold no-underline transition-all duration-200 ease-in-out hover:text-slate-900 dark:hover:text-sky-400"
             href={moreLink}
           >
             Browse more
@@ -121,7 +121,7 @@ export function LinkCard({
       {icon && (
         <div
           className={cx(
-            'flex items-center justify-center w-24 h-24 rounded-lg mb-2',
+            'mb-2 flex h-24 w-24 items-center justify-center rounded-lg',
             {
               'h-12 w-12': appearance === 'small',
             }
@@ -132,13 +132,13 @@ export function LinkCard({
       )}
       <div className={cx('pt-4', { 'pt-2': appearance === 'small' })}>
         {appearance === 'small' && type ? null : (
-          <div className="text-xs font-medium text-slate-600 dark:text-slate-300 uppercase mb-1">
+          <div className="mb-1 text-xs font-medium uppercase text-slate-600 dark:text-slate-300">
             {type}
           </div>
         )}
         <h3
           className={cx(
-            'text-lg font-semibold text-slate-900 dark:text-white m-0',
+            'm-0 text-lg font-semibold text-slate-900 dark:text-white',
             { 'text-sm font-normal': appearance === 'small' }
           )}
         >
@@ -176,12 +176,12 @@ export function Card({
       key={title}
       href={url}
       title={title}
-      className="group no-underline flex flex-col items-stretch rounded-md border border-slate-200 bg-slate-50/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
+      className="group flex flex-col items-stretch rounded-md border border-slate-200 bg-slate-50/40 text-sm no-underline shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
     >
       {!!hasYoutubeId && (
         <div className="max-h-24">
           <img
-            className="!m-0 rounded-t-md bg-black object-contain !w-full h-full"
+            className="!m-0 h-full !w-full rounded-t-md bg-black object-contain"
             alt="Youtube Link"
             src={`https://img.youtube.com/vi/${hasYoutubeId}/default.jpg`}
           />
diff --git a/nx-dev/ui-markdoc/src/lib/tags/pill.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/pill.component.tsx
index ef1e6393d0418..e971985192683 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/pill.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/pill.component.tsx
@@ -9,7 +9,7 @@ export function Pill({
   children: ReactNode;
 }): JSX.Element {
   return (
-    <span className="group inline-flex relative rounded-md border border-slate-200 mr-2 mb-2 bg-slate-50/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
+    <span className="group relative mr-2 mb-2 inline-flex rounded-md border border-slate-200 bg-slate-50/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
       <span className="flex flex-col p-3">
         <Link
           href={url}