chore(repo): fix file formatting (#26463)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->

Files are unformatted.

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

Files are formatted.

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

e2e/angular/src/tailwind.test.ts

@@ -72,7 +72,7 @@ describe('Tailwind support', () => {
 
   const createTailwindConfigFile = (
     tailwindConfigFile = 'tailwind.config.js',
-    libSpacing: typeof spacing['projectVariant1']
+    libSpacing: (typeof spacing)['projectVariant1']
   ) => {
     const tailwindConfig = `const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
     const { join } = require('path');
@@ -98,7 +98,7 @@ describe('Tailwind support', () => {
 
   const updateTailwindConfig = (
     tailwindConfigPath: string,
-    projectSpacing: typeof spacing['root']
+    projectSpacing: (typeof spacing)['root']
   ) => {
     const tailwindConfig = readFile(tailwindConfigPath);
 
@@ -173,7 +173,7 @@ describe('Tailwind support', () => {
 
     const assertLibComponentStyles = (
       lib: string,
-      libSpacing: typeof spacing['root']
+      libSpacing: (typeof spacing)['root']
     ) => {
       const builtComponentContent = readFile(
         `dist/${lib}/esm2022/lib/foo.component.mjs`
@@ -327,7 +327,7 @@ describe('Tailwind support', () => {
 
     const assertAppComponentStyles = (
       outputPath: string,
-      appSpacing: typeof spacing['root']
+      appSpacing: (typeof spacing)['root']
     ) => {
       const mainBundlePath = listFiles(outputPath).find((file) =>
         /^main[\.-]/.test(file)

e2e/utils/create-project-utils.ts

@@ -65,7 +65,7 @@ const nxPackages = [
   `@nx/expo`,
 ] as const;
 
-type NxPackage = typeof nxPackages[number];
+type NxPackage = (typeof nxPackages)[number];
 
 /**
  * Sets up a new project in the temporary project path

graph/client/src/app/feature-projects/panels/search-depth.tsx

@@ -50,7 +50,7 @@ export const SearchDepth = memo(
             <button
               data-cy="decrement-depth-filter"
               title="Remove ancestor level"
-              className="inline-flex items-center rounded-l-md border border-slate-300 bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+              className="inline-flex items-center rounded-l-md border border-slate-300 bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
               onClick={decrementDepthFilter}
             >
               <MinusIcon className="h-4 w-4"></MinusIcon>
@@ -58,14 +58,14 @@ export const SearchDepth = memo(
             <span
               id="depthFilterValue"
               data-cy="depth-value"
-              className="block w-full flex-1 rounded-none border-t border-b border-slate-300 bg-white p-1.5 text-center font-mono dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+              className="block w-full flex-1 rounded-none border-b border-t border-slate-300 bg-white p-1.5 text-center font-mono dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
             >
               {searchDepth}
             </span>
             <button
               data-cy="increment-depth-filter"
               title="Add ancestor level"
-              className="inline-flex items-center rounded-r-md border border-slate-300 bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+              className="inline-flex items-center rounded-r-md border border-slate-300 bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
               onClick={incrementDepthFilter}
             >
               <PlusIcon className="h-4 w-4"></PlusIcon>

graph/client/src/app/feature-projects/panels/tracing-panel.tsx

@@ -28,7 +28,7 @@ export const TracingPanel = memo(
     return (
       <div className="mt-10 px-4">
         <div className="transition duration-200 ease-in-out group-hover:opacity-60">
-          <h3 className="cursor-text pb-2 text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs">
+          <h3 className="cursor-text pb-2 text-sm font-semibold uppercase tracking-wide text-slate-800 lg:text-xs dark:text-slate-200">
             Tracing Path
           </h3>
           <div className="mb-3 flex cursor-pointer flex-row rounded-md border text-center text-xs dark:border-slate-600">
@@ -38,7 +38,7 @@ export const TracingPanel = memo(
                 algorithm === 'shortest'
                   ? 'border-blue-500 dark:border-sky-500'
                   : 'border-slate-300 dark:border-slate-600'
-              } flex-1 rounded-l-md border bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
+              } flex-1 rounded-l-md border bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
             >
               <span>Shortest</span>
             </button>
@@ -48,7 +48,7 @@ export const TracingPanel = memo(
                 algorithm === 'all'
                   ? 'border-blue-500 dark:border-sky-500'
                   : 'border-slate-300 dark:border-slate-600'
-              } flex-1 rounded-r-md border bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
+              } flex-1 rounded-r-md border bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
             >
               <span>All</span>
             </button>
@@ -66,7 +66,7 @@ export const TracingPanel = memo(
                   <span>{start}</span>
                 </div>
 
-                <div className="absolute top-2 right-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition-all transition duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
+                <div className="absolute right-2 top-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition transition-all duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
                   Reset
                   <span className="rounded-md p-1">
                     <XCircleIcon className="h-5 w-5"></XCircleIcon>
@@ -95,7 +95,7 @@ export const TracingPanel = memo(
                   <span>{end}</span>
                 </div>
 
-                <div className="absolute top-2 right-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition-all transition duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
+                <div className="absolute right-2 top-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition transition-all duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
                   Reset
                   <span className="rounded-md p-1">
                     <XCircleIcon className="h-5 w-5" />

graph/client/src/app/feature-tasks/task-list.tsx

@@ -87,11 +87,11 @@ function SubProjectList({
   return (
     <>
       {headerText !== '' ? (
-        <h3 className="mt-4 cursor-text py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs">
+        <h3 className="mt-4 cursor-text py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 lg:text-xs dark:text-slate-200">
           {headerText}
         </h3>
       ) : null}
-      <ul className="mt-2 -ml-3">
+      <ul className="-ml-3 mt-2">
         {sortedProjects.map((project) => {
           return (
             <ProjectListItem

graph/client/src/app/ui-tooltips/task-node-actions.tsx

@@ -9,9 +9,9 @@ export function TaskNodeActions(props: TaskNodeTooltipProps) {
   }, [props.id]);
   const project = props.id.split(':')[0];
   return (
-    <div className="overflow-auto w-full min-w-[350px] max-w-full rounded-md border border-slate-200 dark:border-slate-800 w-full">
+    <div className="w-full w-full min-w-[350px] max-w-full overflow-auto rounded-md border border-slate-200 dark:border-slate-800">
       <div
-        className="flex justify-between items-center w-full bg-slate-50 px-4 py-2 text-xs font-medium uppercase text-slate-500 dark:bg-slate-800 dark:text-slate-400"
+        className="flex w-full items-center justify-between bg-slate-50 px-4 py-2 text-xs font-medium uppercase text-slate-500 dark:bg-slate-800 dark:text-slate-400"
         onClick={() => setIsOpen(!isOpen)}
         data-cy="inputs-accordion"
       >
@@ -53,11 +53,11 @@ function InputAccordion({ section, inputs }) {
   return [
     <li
       key={section}
-      className="flex justify-between items-center whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300"
+      className="flex items-center justify-between whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300"
       onClick={() => setIsOpen(!isOpen)}
       data-cy="input-section-entry"
     >
-      <span className="block truncate font-normal font-bold">{section}</span>
+      <span className="block truncate font-bold font-normal">{section}</span>
       <span>
         {isOpen ? (
           <ChevronUpIcon className="h-4 w-4" />

graph/ui-code-block/src/lib/json-code-block.tsx

@@ -47,7 +47,7 @@ export function JsonCodeBlock(props: JsonCodeBlockProps): JSX.Element {
   }, [copied]);
   return (
     <div className="code-block group relative w-full">
-      <div className="absolute top-0 right-0 z-10 flex">
+      <div className="absolute right-0 top-0 z-10 flex">
         <CopyToClipboard
           text={jsonString}
           onCopy={() => {
@@ -104,12 +104,12 @@ export function sourcesRenderer(
       }
       return (
         <span
-          className="flex group/line min-w-0 flex shrink-1"
+          className="group/line shrink-1 flex flex min-w-0"
           key={`code-group${idx}`}
         >
           <span>{element}</span>
           {sourceElement && (
-            <span className="opacity-0 min-w-0 flex shrink-1 group-hover/line:opacity-100 transition-opacity duration-150 ease-in-out inline pl-2">
+            <span className="shrink-1 inline flex min-w-0 pl-2 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
               {sourceElement}
             </span>
           )}

graph/ui-components/src/lib/debounced-text-input.tsx

@@ -75,7 +75,7 @@ export function DebouncedTextInput({
           data-cy="textFilterReset"
           type="reset"
           onClick={resetClicked}
-          className="absolute top-1 right-1 inline-block rounded-md bg-slate-50 p-1 text-slate-400 dark:bg-slate-800"
+          className="absolute right-1 top-1 inline-block rounded-md bg-slate-50 p-1 text-slate-400 dark:bg-slate-800"
         >
           <BackspaceIcon className="h-5 w-5"></BackspaceIcon>
         </button>

graph/ui-components/src/lib/dropdown.tsx

@@ -9,7 +9,7 @@ export function Dropdown(props: DropdownProps) {
   const { className, children, ...rest } = props;
   return (
     <select
-      className={`form-select flex items-center rounded-md rounded-md border border-slate-300 bg-white pl-4 pr-8 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700 ${className}`}
+      className={`form-select flex items-center rounded-md rounded-md border border-slate-300 bg-white py-2 pl-4 pr-8 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700 ${className}`}
       {...rest}
     >
       {children}

graph/ui-project-details/src/lib/pill.tsx

@@ -17,9 +17,9 @@ export function Pill({
         color === 'grey' &&
           'bg-slate-400/10 text-slate-600 ring-slate-400/40 dark:text-slate-400 dark:ring-slate-400/30',
         color === 'green' &&
-          'dark:bg-green-500/10 bg-green-400/10 dark:text-green-400 text-green-500 dark:ring-green-500/20 ring-green-500/40',
+          'bg-green-400/10 text-green-500 ring-green-500/40 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20',
         color === 'yellow' &&
-          'bg-yellow-50 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 dark:ring-yellow-500/20 ring-yellow-500/40'
+          'bg-yellow-50 text-yellow-600 ring-yellow-500/40 dark:bg-yellow-900/30 dark:text-yellow-400 dark:ring-yellow-500/20'
       )}
     >
       {text}

graph/ui-project-details/src/lib/target-configuration-details/fading-collapsible.tsx

@@ -43,7 +43,7 @@ export function FadingCollapsible({ children }: { children: ReactNode }) {
       </div>
       {isCollapsible && (
         <div
-          className="h-4 w-4 absolute bottom-2 right-1/2 cursor-pointer"
+          className="absolute bottom-2 right-1/2 h-4 w-4 cursor-pointer"
           onClick={(e) => {
             e.stopPropagation();
             toggleCollapsed();

graph/ui-project-details/src/lib/target-configuration-details/tooltip-trigger-text.tsx

@@ -6,7 +6,7 @@ export function TooltipTriggerText({
   children: string | ReactNode;
 }) {
   return (
-    <span className="underline cursor-help underline-offset-8 decoration-2 decoration-dotted decoration-slate-700/50 dark:decoration-slate-400/50">
+    <span className="cursor-help underline decoration-slate-700/50 decoration-dotted decoration-2 underline-offset-8 dark:decoration-slate-400/50">
       {children}
     </span>
   );

graph/ui-theme/src/lib/theme-panel.stories.tsx

@@ -5,7 +5,7 @@ const meta: Meta<typeof ThemePanel> = {
   component: ThemePanel,
   decorators: [
     (Story) => (
-      <div className="bg-white dark:bg-slate-800 block h-auto w-auto border-2 px-8 py-4">
+      <div className="block h-auto w-auto border-2 bg-white px-8 py-4 dark:bg-slate-800">
         <div className="flex justify-end">
           <Story className="justify-items-end" />
         </div>

graph/ui-tooltips/src/lib/project-edge-tooltip.tsx

@@ -39,7 +39,7 @@ export function ProjectEdgeNodeTooltip({
                 key={fileDep.fileName}
                 className={`whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300 ${
                   fileClickCallback !== undefined
-                    ? 'hover:underline hover:cursor-pointer'
+                    ? 'hover:cursor-pointer hover:underline'
                     : ''
                 }`}
                 onClick={

graph/ui-tooltips/src/lib/project-node-tooltip.tsx

@@ -26,10 +26,10 @@ export function ProjectNodeToolTip({
 }: ProjectNodeToolTipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
-      <h4 className="flex justify-between items-center gap-4">
+      <h4 className="flex items-center justify-between gap-4">
         <div className="flex items-center">
           <Tag className="mr-3">{type}</Tag>
-          <span className="font-mono mr-3">{id}</span>
+          <span className="mr-3 font-mono">{id}</span>
         </div>
         {openConfigCallback && (
           <button

graph/ui-tooltips/src/lib/task-node-tooltip.tsx

@@ -28,11 +28,11 @@ export function TaskNodeTooltip({
 }: TaskNodeTooltipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
-      <h4 className="flex justify-between items-center gap-4 mb-3">
+      <h4 className="mb-3 flex items-center justify-between gap-4">
         <div className="flex grow items-center justify-between">
           <div className="flex items-center">
             <Tag className="mr-3">{executor}</Tag>
-            <span className="font-mono mr-3">{id}</span>
+            <span className="mr-3 font-mono">{id}</span>
           </div>
           {openConfigCallback && (
             <button

nx-dev/feature-ai/src/lib/feed-container.tsx

@@ -135,7 +135,7 @@ export function FeedContainer(): JSX.Element {
 
                 <div
                   className={cx(
-                    'fixed bottom-0 left0 right-0 w-full py-4 px-4 lg:py-6 lg:px-0',
+                    'left0 fixed bottom-0 right-0 w-full px-4 py-4 lg:px-0 lg:py-6',
                     'bg-gradient-to-t from-white via-white/75 dark:from-slate-900 dark:via-slate-900/75'
                   )}
                 >

nx-dev/feature-ai/src/lib/feed/feed-question.tsx

@@ -1,7 +1,7 @@
 export function FeedQuestion({ content }: { content: string }) {
   return (
-    <div className="flex justify-end w-full">
+    <div className="flex w-full justify-end">
-      <p className="px-4 py-2 bg-blue-500 dark:bg-sky-500 selection:bg-sky-900 rounded-lg text-white text-base whitespace-pre-wrap break-words">
+      <p className="whitespace-pre-wrap break-words rounded-lg bg-blue-500 px-4 py-2 text-base text-white selection:bg-sky-900 dark:bg-sky-500">
         {content}
       </p>
     </div>

nx-dev/feature-ai/src/lib/feed/feed.tsx

@@ -10,12 +10,12 @@ export function Feed({
   onFeedback: (statement: 'bad' | 'good', chatItemUid: string) => void;
 }) {
   return (
-    <div className="flow-root my-12">
+    <div className="my-12 flow-root">
       <ul role="list" className="-mb-8 space-y-12">
         {activity.map((activityItem, activityItemIdx) => (
           <li
             key={[activityItem.role, activityItem.id].join('-')}
-            className="pt-12 relative flex items-start space-x-3 feed-item"
+            className="feed-item relative flex items-start space-x-3 pt-12"
           >
             {activityItem.role === 'assistant' ? (
               <FeedAnswer

nx-dev/feature-ai/src/lib/loading-state.tsx

@@ -1,8 +1,8 @@
 export function LoadingState(): JSX.Element {
   return (
-    <div className="w-full flex items-center justify-center px-4 gap-4 py-2 text-blue-500 dark:text-sky-500 transition ease-in-out duration-150">
+    <div className="flex w-full items-center justify-center gap-4 px-4 py-2 text-blue-500 transition duration-150 ease-in-out dark:text-sky-500">
       <svg
-        className="animate-spin h-5 w-5"
+        className="h-5 w-5 animate-spin"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         stroke="currentColor"

nx-dev/feature-ai/src/lib/prompt.tsx

@@ -62,7 +62,7 @@ export function Prompt({
     <form
       ref={formRef}
       onSubmit={handleSubmit}
-      className="relative flex gap-2 max-w-3xl mx-auto py-0 px-2 shadow-lg rounded-md border border-slate-300 bg-white dark:border-slate-900 dark:bg-slate-700"
+      className="relative mx-auto flex max-w-3xl gap-2 rounded-md border border-slate-300 bg-white px-2 py-0 shadow-lg dark:border-slate-900 dark:bg-slate-700"
     >
       <div
         className={cx(
@@ -104,7 +104,7 @@ export function Prompt({
           </Button>
         )}
       </div>
-      <div className="overflow-y-auto w-full h-full max-h-[300px]">
+      <div className="h-full max-h-[300px] w-full overflow-y-auto">
         <Textarea
           onKeyDown={(event) => {
             if (
@@ -123,7 +123,7 @@ export function Prompt({
           name="query"
           maxLength={500}
           disabled={isGenerating}
-          className="block w-full p-0 resize-none bg-transparent text-sm placeholder-slate-500 pl-2 py-[1.3rem] focus-within:outline-none focus:placeholder-slate-400 dark:focus:placeholder-slate-300 dark:text-white focus:outline-none focus:ring-0 border-none disabled:cursor-not-allowed"
+          className="block w-full resize-none border-none bg-transparent p-0 py-[1.3rem] pl-2 text-sm placeholder-slate-500 focus-within:outline-none focus:placeholder-slate-400 focus:outline-none focus:ring-0 disabled:cursor-not-allowed dark:text-white dark:focus:placeholder-slate-300"
           placeholder="How does caching work?"
           rows={1}
         />
@@ -134,7 +134,7 @@ export function Prompt({
           size="small"
           type="submit"
           disabled={isGenerating}
-          className="self-end w-12 h-12 disabled:cursor-not-allowed"
+          className="h-12 w-12 self-end disabled:cursor-not-allowed"
         >
           <div hidden className="sr-only">
             Ask

nx-dev/feature-ai/src/lib/sidebar/activity-limit-reached.tsx

@@ -2,7 +2,7 @@ import { InformationCircleIcon } from '@heroicons/react/24/outline';
 
 export function ActivityLimitReached(): JSX.Element {
   return (
-    <div className="rounded-md bg-slate-50 dark:bg-slate-800/40 ring-slate-100 dark:ring-slate-700 ring-1 p-4 shadow-sm">
+    <div className="rounded-md bg-slate-50 p-4 shadow-sm ring-1 ring-slate-100 dark:bg-slate-800/40 dark:ring-slate-700">
       <div className="flex">
         <div className="flex-shrink-0">
           <InformationCircleIcon

nx-dev/feature-ai/src/lib/sidebar/sidebar-container.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 export function SidebarContainer({ children }: { children: ReactNode[] }) {
   return (
     <div id="sidebar" data-testid="sidebar">
-      <div className="hidden h-full w-72 flex-col border-r border-slate-200 dark:border-slate-700 dark:bg-slate-900 md:flex">
+      <div className="hidden h-full w-72 flex-col border-r border-slate-200 md:flex dark:border-slate-700 dark:bg-slate-900">
         <div className="relative flex flex-col gap-4 overflow-y-scroll p-4">
           {...children}
         </div>

nx-dev/feature-ai/src/lib/sidebar/warning-message.tsx

@@ -2,7 +2,7 @@ import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 
 export function WarningMessage(): JSX.Element {
   return (
-    <div className="rounded-md bg-yellow-50 dark:bg-yellow-900/30 ring-1 ring-yellow-100 dark:ring-yellow-900 p-4">
+    <div className="rounded-md bg-yellow-50 p-4 ring-1 ring-yellow-100 dark:bg-yellow-900/30 dark:ring-yellow-900">
       <h3 className="flex gap-x-3 text-sm font-medium text-yellow-600 dark:text-yellow-400">
         <ExclamationTriangleIcon
           className="h-5 w-5 text-yellow-500 dark:text-yellow-400"

nx-dev/feature-package-schema-viewer/src/lib/content.tsx

@@ -115,7 +115,7 @@ export function Content({
   };
 
   return (
-    <div data-document="main" className="min-w-0 flex-auto pt-8 pb-24 lg:pb-16">
+    <div data-document="main" className="min-w-0 flex-auto pb-24 pt-8 lg:pb-16">
       <div className="mb-8 flex w-full items-center space-x-2">
         <div className="w-full flex-grow space-x-4">
           <div

nx-dev/feature-package-schema-viewer/src/lib/ui/headings.tsx

@@ -11,7 +11,7 @@ export const Heading1 = ({ title }: { title: string }) => (
     <Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
       <LinkIcon
         role="img"
-        className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
+        className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100"
       />
     </Link>
   </h1>
@@ -26,7 +26,7 @@ export const Heading2 = ({ title }: { title: string }) => (
     <Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
       <LinkIcon
         role="img"
-        className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
+        className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100"
       />
     </Link>
   </h2>
@@ -41,7 +41,7 @@ export const Heading3 = ({ title }: { title: string }) => (
     <Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
       <LinkIcon
         role="img"
-        className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
+        className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100"
       />
     </Link>
   </h3>

nx-dev/feature-package-schema-viewer/src/lib/ui/package-reference.tsx

@@ -120,7 +120,7 @@ function EmptyList({
     <li className="relative flex px-2 py-2 transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800/60">
       <div className="flex-shrink-0 self-start rounded-lg border-slate-200 bg-slate-100 p-2 dark:border-slate-600 dark:bg-slate-700">
         <InformationCircleIcon
-          className="h-5 w-5 flex-shrink-0 rounded-md border-slate-200 bg-slate-50 dark:bg-slate-800 dark:bg-slate-700"
+          className="h-5 w-5 flex-shrink-0 rounded-md border-slate-200 bg-slate-50 dark:bg-slate-700 dark:bg-slate-800"
           role="img"
         />
       </div>

nx-dev/feature-search/src/lib/algolia-search.global.css

@@ -3,7 +3,7 @@
 }
 
 body .DocSearch-Container {
-  @apply fixed top-0 left-0 z-[50] flex h-screen w-screen cursor-auto flex-col bg-black/10 p-4 backdrop-blur-sm dark:bg-white/10 sm:p-6 md:p-[10vh] lg:p-[12vh];
+  @apply fixed left-0 top-0 z-[50] flex h-screen w-screen cursor-auto flex-col bg-black/10 p-4 backdrop-blur-sm sm:p-6 md:p-[10vh] lg:p-[12vh] dark:bg-white/10;
 }
 
 .DocSearch-LoadingIndicator svg {
@@ -243,11 +243,11 @@ body .DocSearch-Container {
 }
 
 .DocSearch-Hit > a {
-  @apply block py-4 px-6;
+  @apply block px-6 py-4;
 }
 
 .DocSearch-Hit--Result {
-  @apply py-3 px-4 !important;
+  @apply px-4 py-3 !important;
 }
 
 .DocSearch-Hit {
@@ -296,7 +296,7 @@ body .DocSearch-Container {
 }
 
 .DocSearch-Footer {
-  @apply flex flex-none justify-end border-t border-slate-200 py-4 px-6 dark:border-slate-800;
+  @apply flex flex-none justify-end border-t border-slate-200 px-6 py-4 dark:border-slate-800;
 }
 
 .DocSearch-Commands {
@@ -330,11 +330,11 @@ body .DocSearch-Container {
 }
 
 .DocSearch-StartScreen .DocSearch-Help {
-  @apply py-16 px-6 text-center text-slate-400 dark:text-slate-600;
+  @apply px-6 py-16 text-center text-slate-400 dark:text-slate-600;
 }
 
 .DocSearch-NoResults {
-  @apply px-4 pt-10 pb-8;
+  @apply px-4 pb-8 pt-10;
 }
 
 .DocSearch-NoResults .DocSearch-Title {

nx-dev/nx-dev/pages/404.tsx

@@ -45,7 +45,7 @@ export function FourOhFour(): JSX.Element {
                   src={illustrationUrl}
                   className="drop-shadow"
                 />
-                <h1 className="mt-4 text-4xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100 sm:text-6xl lg:ml-8">
+                <h1 className="mt-4 text-4xl font-extrabold tracking-tight text-slate-900 sm:text-6xl lg:ml-8 dark:text-slate-100">
                   <span className="sr-only">404 - </span>Page not found!
                 </h1>
               </div>

nx-dev/nx-dev/pages/500.tsx

@@ -22,7 +22,7 @@ export default function FiveOhOh(): JSX.Element {
                   src="/images/illustrations/500.svg"
                   className="drop-shadow"
                 />
-                <h1 className="mt-4 text-4xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100 sm:text-6xl lg:ml-8">
+                <h1 className="mt-4 text-4xl font-extrabold tracking-tight text-slate-900 sm:text-6xl lg:ml-8 dark:text-slate-100">
                   <div className="sr-only">500 - </div>Internal Server Error!
                 </h1>
               </div>

nx-dev/nx-dev/pages/community.tsx

@@ -46,7 +46,7 @@ export default function Community(): JSX.Element {
             <ConnectWithUs />
           </div>
           <article id="nx-champions" className="relative">
-            <div className="mx-auto max-w-7xl items-stretch py-12 px-4 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:py-16 lg:px-8">
+            <div className="mx-auto max-w-7xl items-stretch px-4 py-12 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:px-8 lg:py-16">
               <div className="md:col-span-2">
                 <header>
                   <SectionHeading as="h1" variant="title" id="champions">

nx-dev/nx-dev/pages/conf.tsx

@@ -74,9 +74,9 @@ export default function ConfPage(): JSX.Element {
                   <path d="M153.224 267C150.787 267 148.615 266.58 146.707 265.74C144.812 264.899 143.304 263.731 142.184 262.236C141.076 260.729 140.473 258.98 140.375 256.99H145.027C145.126 258.214 145.544 259.27 146.283 260.16C147.021 261.038 147.987 261.717 149.181 262.199C150.375 262.681 151.698 262.922 153.15 262.922C154.775 262.922 156.215 262.638 157.471 262.069C158.726 261.501 159.711 260.71 160.424 259.697C161.138 258.683 161.495 257.51 161.495 256.175C161.495 254.779 161.151 253.549 160.461 252.486C159.772 251.411 158.763 250.571 157.434 249.965C156.104 249.36 154.48 249.057 152.56 249.057H149.532V244.979H152.56C154.061 244.979 155.378 244.707 156.511 244.163C157.655 243.62 158.548 242.854 159.188 241.865C159.84 240.876 160.166 239.715 160.166 238.38C160.166 237.095 159.883 235.977 159.317 235.025C158.751 234.074 157.951 233.332 156.917 232.801C155.895 232.269 154.689 232.004 153.298 232.004C151.993 232.004 150.763 232.245 149.606 232.727C148.461 233.196 147.526 233.882 146.8 234.784C146.073 235.674 145.679 236.749 145.618 238.01H141.187C141.261 236.02 141.858 234.278 142.978 232.782C144.098 231.275 145.563 230.101 147.372 229.26C149.193 228.42 151.193 228 153.372 228C155.711 228 157.717 228.476 159.391 229.427C161.064 230.366 162.351 231.608 163.249 233.153C164.148 234.698 164.597 236.366 164.597 238.158C164.597 240.296 164.037 242.118 162.917 243.626C161.809 245.134 160.301 246.178 158.394 246.759V247.055C160.781 247.451 162.646 248.47 163.988 250.114C165.329 251.745 166 253.765 166 256.175C166 258.239 165.44 260.092 164.32 261.736C163.212 263.367 161.698 264.652 159.778 265.591C157.858 266.53 155.674 267 153.224 267Z" />
                 </svg>
               </div>
-              <div className="mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pl-16 lg:pb-0">
+              <div className="mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pb-0 lg:pl-16">
                 <h2>
-                  <div className="font-input-mono mb-4 inline-block rounded-lg border border-slate-200 bg-white/40 p-4 py-4 px-6 text-xl text-sm font-extrabold leading-none tracking-tight shadow-sm transition hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800 sm:text-2xl lg:text-2xl">
+                  <div className="font-input-mono mb-4 inline-block rounded-lg border border-slate-200 bg-white/40 p-4 px-6 py-4 text-sm text-xl font-extrabold leading-none tracking-tight shadow-sm transition hover:bg-white sm:text-2xl lg:text-2xl dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
                     <span className="sr-only">Announcing Nx Conf on </span>{' '}
                     September 26, 2023
                   </div>
@@ -178,7 +178,7 @@ export default function ConfPage(): JSX.Element {
                   rel="noreferrer"
                   target="_blank"
                   href="https://www.youtube.com/live/IQ5YyEYZw68"
-                  className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
+                  className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
                 >
                   <span className="group-hover:underline">
                     Watch the live stream recording
@@ -228,9 +228,9 @@ export default function ConfPage(): JSX.Element {
         </div>
         <div className="w-full overflow-hidden">
           {/*NAVIGATION*/}
-          <div className="hidden border-t border-b border-slate-200 dark:border-slate-700 md:block">
+          <div className="hidden border-b border-t border-slate-200 md:block dark:border-slate-700">
             <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
-              <div className="font-input-mono grid-cols-7 items-center divide-x divide-slate-200 text-center dark:divide-slate-700 md:grid">
+              <div className="font-input-mono grid-cols-7 items-center divide-x divide-slate-200 text-center md:grid dark:divide-slate-700">
                 <div className="p-8">
                   <svg
                     id="nx-conf-logo"

nx-dev/nx-dev/pages/launch-nx.tsx

@@ -48,9 +48,9 @@ export default function ConfPage(): JSX.Element {
         <Header />
         <LaunchNxIntro />
         {/*NAVIGATION*/}
-        <div className="hidden border-t border-b border-slate-200 dark:border-slate-700 md:block">
+        <div className="hidden border-b border-t border-slate-200 md:block dark:border-slate-700">
           <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
-            <div className="font-input-mono grid-cols-5 items-center divide-x divide-slate-200 text-center dark:divide-slate-700 md:grid">
+            <div className="font-input-mono grid-cols-5 items-center divide-x divide-slate-200 text-center md:grid dark:divide-slate-700">
               <div className="p-6">
                 <svg
                   className="inline-block dark:text-white"

nx-dev/ui-common/src/lib/champion-card.tsx

@@ -18,8 +18,8 @@ export function ChampionCard({ data }: { data: Champion }): JSX.Element {
     <figure className="relative flex flex-col-reverse rounded-lg border border-slate-200 bg-white/40 p-4 text-sm shadow-sm  transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
       <blockquote className="mt-4 text-slate-600 dark:text-slate-400">
         <p className="mb-4">{data.expertise}</p>
-        <div className="mt-0.5 ml text-xs text-slate-400 dark:text-slate-500 inline">
+        <div className="ml mt-0.5 inline text-xs text-slate-400 dark:text-slate-500">
-          <ChatBubbleLeftIcon className="h-4 w-4 inline" />{' '}
+          <ChatBubbleLeftIcon className="inline h-4 w-4" />{' '}
           {data.contact[0].label}
         </div>
       </blockquote>
@@ -38,7 +38,7 @@ export function ChampionCard({ data }: { data: Champion }): JSX.Element {
             </a>
           </div>
           <div className="mt-0.5 text-xs text-slate-400 dark:text-slate-500">
-            <MapIcon className="h-4 w-4 inline" /> {data.location}
+            <MapIcon className="inline h-4 w-4" /> {data.location}
           </div>
         </div>
       </figcaption>

nx-dev/ui-common/src/lib/champion-perks.tsx

@@ -63,7 +63,7 @@ export function ChampionPerks(): JSX.Element {
                   aria-hidden="true"
                 />
                 <HeartIcon
-                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"
+                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:-translate-y-1 group-hover:translate-x-8 group-hover:opacity-100 dark:text-fuchsia-500"
                   aria-hidden="true"
                 />
                 <GiftIcon
@@ -89,7 +89,7 @@ export function ChampionPerks(): JSX.Element {
                   aria-hidden="true"
                 />
                 <VideoCameraIcon
-                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"
+                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:-translate-y-1 group-hover:translate-x-8 group-hover:opacity-100 dark:text-fuchsia-500"
                   aria-hidden="true"
                 />
                 <MicrophoneIcon
@@ -116,7 +116,7 @@ export function ChampionPerks(): JSX.Element {
                   aria-hidden="true"
                 />
                 <LightBulbIcon
-                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"
+                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:-translate-y-1 group-hover:translate-x-8 group-hover:opacity-100 dark:text-fuchsia-500"
                   aria-hidden="true"
                 />
                 <ChatBubbleBottomCenterTextIcon
@@ -143,7 +143,7 @@ export function ChampionPerks(): JSX.Element {
                   aria-hidden="true"
                 />
                 <UsersIcon
-                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"
+                  className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:-translate-y-1 group-hover:translate-x-8 group-hover:opacity-100 dark:text-fuchsia-500"
                   aria-hidden="true"
                 />
                 <UserPlusIcon
@@ -159,7 +159,7 @@ export function ChampionPerks(): JSX.Element {
             <dd className="mt-2 text-base text-slate-500 dark:text-slate-400">
               When you're ready to join, fill out the{' '}
               <a
-                className="underline text-slate-900 dark:text-slate-100"
+                className="text-slate-900 underline dark:text-slate-100"
                 href="https://forms.gle/wYd9mC3ka64ki96G7"
               >
                 application form

nx-dev/ui-common/src/lib/flip-card.tsx

@@ -38,20 +38,20 @@ export function FlipCard({
           }
         }}
         className={cx(
-          'block group perspective',
+          'perspective group block',
           isFlippable && !isFlipped ? 'cursor-pointer' : 'cursor-default'
         )}
       >
         <div
           className={cx(
-            'relative preserve-3d transition w-full h-full duration-200 content-center rounded-lg border-2 shadow-sm focus-within:ring-offset-2 bg-white/60 dark:bg-slate-800/90',
+            'preserve-3d relative h-full w-full content-center rounded-lg border-2 bg-white/60 shadow-sm transition duration-200 focus-within:ring-offset-2 dark:bg-slate-800/90',
             isFlippable && isFlipped
               ? 'my-rotate-y-180 bg-white dark:bg-slate-800'
               : '',
             isFlippable
               ? isFlipped
                 ? 'border-blue-400 dark:border-slate-800'
-                : 'border-blue-400 dark:border-slate-800 hover:[transform:rotateY(10deg)]'
+                : 'border-blue-400 hover:[transform:rotateY(10deg)] dark:border-slate-800'
               : 'border-1 border-slate-300 dark:border-slate-800'
           )}
         >
@@ -65,7 +65,7 @@ export function FlipCard({
 
 export function FlipCardFront({ children }: { children: ReactNode }) {
   return (
-    <div className="absolute backface-hidden w-full h-full flex flex-col justify-center items-center text-center font-bold text-3xl px-2">
+    <div className="backface-hidden absolute flex h-full w-full flex-col items-center justify-center px-2 text-center text-3xl font-bold">
       {children}
     </div>
   );
@@ -75,7 +75,7 @@ export function FlipCardBack({ children }: { children: ReactNode }) {
   return (
     <FlipCardContext.Consumer>
       {() => (
-        <div className="my-rotate-y-180 backface-hidden w-full h-full overflow-hidden rounded-md dark:text-slate-100 text-slate-900 text-3xl dark:bg-slate-800 bg-white">
+        <div className="my-rotate-y-180 backface-hidden h-full w-full overflow-hidden rounded-md bg-white text-3xl text-slate-900 dark:bg-slate-800 dark:text-slate-100">
           <div className="p-4 text-sm sm:text-sm md:text-sm lg:text-lg">
             {children}
           </div>

nx-dev/ui-common/src/lib/headers/default-menu-item.tsx

@@ -19,7 +19,7 @@ export function DefaultMenuItem({
   return (
     <Tag
       className={cx(
-        'relative flex flex-1 gap-4 rounded-lg py-4 px-2 transition duration-150 ease-in-out',
+        'relative flex flex-1 gap-4 rounded-lg px-2 py-4 transition duration-150 ease-in-out',
         item.isHighlight
           ? 'bg-slate-50 hover:bg-slate-100 dark:bg-slate-800/80 dark:hover:bg-slate-700/60'
           : 'hover:bg-slate-50 dark:hover:bg-slate-800/60',

nx-dev/ui-common/src/lib/plugin-card.tsx

@@ -49,7 +49,7 @@ export function PluginCard({
           className="flex grow flex-col focus:outline-none"
         >
           <span className="absolute inset-0" aria-hidden="true" />
-          <p className="line-clamp-3 mb-2 grow text-sm">{description}</p>
+          <p className="mb-2 line-clamp-3 grow text-sm">{description}</p>
 
           <div className="flex flex-wrap items-center justify-between py-0.5 text-xs font-medium capitalize">
             <div className="my-1 mr-1">

nx-dev/ui-common/src/lib/youtube.component.tsx

@@ -62,10 +62,10 @@ export function YouTube(props: {
         width={props.width || '100%'}
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
         loading="lazy"
-        className="rounded-lg shadow-lg mb-1"
+        className="mb-1 rounded-lg shadow-lg"
       />
       {props.caption && (
-        <p className="md:w-1/2 mx-auto pt-0 text-slate-500 dark:text-slate-400">
+        <p className="mx-auto pt-0 text-slate-500 md:w-1/2 dark:text-slate-400">
           {props.caption}
         </p>
       )}

nx-dev/ui-community/src/lib/plugin-directory.tsx

@@ -88,56 +88,56 @@ export function PluginDirectory({
               type="search"
             />
           </div>
-          <div className="text-xs my-2 flex whitespace-nowrap">
+          <div className="my-2 flex whitespace-nowrap text-xs">
-            <div className="py-1 mr-1">Order by:</div>
+            <div className="mr-1 py-1">Order by:</div>
             <div className="flex flex-wrap gap-1">
               <button
-                className="rounded-sm border border-slate-200 bg-white py-1 px-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
+                className="rounded-sm border border-slate-200 bg-white px-1 py-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
                 onClick={() => setOrderBy('lastPublishDate')}
               >
-                <ClockIcon className="h-4 w-4 inline-block mr-0.5 align-bottom"></ClockIcon>
+                <ClockIcon className="mr-0.5 inline-block h-4 w-4 align-bottom"></ClockIcon>
                 Release Date
                 {modifiers.orderBy === 'lastPublishDate' &&
                 modifiers.orderDirection === 'ASC' ? (
-                  <ArrowLongUpIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongUpIcon>
+                  <ArrowLongUpIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongUpIcon>
                 ) : null}
                 {modifiers.orderBy === 'lastPublishDate' &&
                 modifiers.orderDirection === 'DESC' ? (
-                  <ArrowLongDownIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongDownIcon>
+                  <ArrowLongDownIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongDownIcon>
                 ) : null}
               </button>
               <button
-                className="rounded-sm border border-slate-200 bg-white py-1 px-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
+                className="rounded-sm border border-slate-200 bg-white px-1 py-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
                 onClick={() => setOrderBy('npmDownloads')}
               >
-                <ArrowDownTrayIcon className="h-4 w-4 inline-block mr-0.5 align-bottom"></ArrowDownTrayIcon>
+                <ArrowDownTrayIcon className="mr-0.5 inline-block h-4 w-4 align-bottom"></ArrowDownTrayIcon>
                 Downloads
                 {modifiers.orderBy === 'npmDownloads' &&
                 modifiers.orderDirection === 'ASC' ? (
-                  <ArrowLongUpIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongUpIcon>
+                  <ArrowLongUpIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongUpIcon>
                 ) : null}
                 {modifiers.orderBy === 'npmDownloads' &&
                 modifiers.orderDirection === 'DESC' ? (
-                  <ArrowLongDownIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongDownIcon>
+                  <ArrowLongDownIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongDownIcon>
                 ) : null}
               </button>
               <button
-                className="rounded-sm border border-slate-200 bg-white py-1 px-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
+                className="rounded-sm border border-slate-200 bg-white px-1 py-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
                 onClick={() => setOrderBy('githubStars')}
               >
-                <StarIcon className="h-4 w-4 inline-block mr-0.5 align-bottom"></StarIcon>
+                <StarIcon className="mr-0.5 inline-block h-4 w-4 align-bottom"></StarIcon>
                 GH Stars
                 {modifiers.orderBy === 'githubStars' &&
                 modifiers.orderDirection === 'ASC' ? (
-                  <ArrowLongUpIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongUpIcon>
+                  <ArrowLongUpIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongUpIcon>
                 ) : null}
                 {modifiers.orderBy === 'githubStars' &&
                 modifiers.orderDirection === 'DESC' ? (
-                  <ArrowLongDownIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongDownIcon>
+                  <ArrowLongDownIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongDownIcon>
                 ) : null}
               </button>
               <button
-                className="rounded-sm border border-slate-200 bg-white py-1 px-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
+                className="rounded-sm border border-slate-200 bg-white px-1 py-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
                 onClick={() => setOrderBy('nxVersion')}
               >
                 {/* Nx Logo */}
@@ -145,7 +145,7 @@ export function PluginDirectory({
                   role="img"
                   viewBox="0 0 24 24"
                   xmlns="http://www.w3.org/2000/svg"
-                  className="h-4 w-4 inline-block mx-0.5 align-bottom"
+                  className="mx-0.5 inline-block h-4 w-4 align-bottom"
                   fill="currentColor"
                 >
                   <title>Nx</title>
@@ -154,11 +154,11 @@ export function PluginDirectory({
                 Nx Version
                 {modifiers.orderBy === 'nxVersion' &&
                 modifiers.orderDirection === 'DESC' ? (
-                  <ArrowLongUpIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongUpIcon>
+                  <ArrowLongUpIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongUpIcon>
                 ) : null}
                 {modifiers.orderBy === 'nxVersion' &&
                 modifiers.orderDirection === 'ASC' ? (
-                  <ArrowLongDownIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongDownIcon>
+                  <ArrowLongDownIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongDownIcon>
                 ) : null}
               </button>
             </div>

nx-dev/ui-conference/src/lib/components/code-of-conduct.tsx

@@ -1,6 +1,6 @@
 export function CodeOfConduct(): JSX.Element {
   return (
-    <div className="border-t border-b border-slate-200 dark:border-slate-700">
+    <div className="border-b border-t border-slate-200 dark:border-slate-700">
       <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
         <article className="grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
           <div className="px-5 py-12 md:pr-12">
@@ -27,7 +27,7 @@ export function CodeOfConduct(): JSX.Element {
           <div className="divide-y divide-slate-200 py-12 dark:divide-slate-700">
             <div className="px-5 py-12 md:pl-12">
               <a
-                className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
+                className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
                 href="https://docs.google.com/document/d/1biFWD08Wrd99gRZNv4Q1tawEYGZEI3bd3J55E5uG2ZU/edit?usp=sharing"
               >
                 <span className="group-hover:underline">

nx-dev/ui-conference/src/lib/components/schedule.tsx

@@ -11,13 +11,13 @@ export const scheduleRow = (item: ScheduleItem): JSX.Element => (
   <div key={item.title + item.time} className="w-full">
     <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
       <article className="grid w-full grid-cols-1 md:grid-cols-5 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
-        <div className="font-input-mono px-5 pt-12 pb-8 md:py-12">
+        <div className="font-input-mono px-5 pb-8 pt-12 md:py-12">
           <span className="hidden md:block">{item.time}</span>
-          <span className="mb-4 rounded-md py-4 px-6 md:hidden">
+          <span className="mb-4 rounded-md px-6 py-4 md:hidden">
             {item.time}
           </span>
         </div>
-        <div className="font-input-mono col-span-2 px-5 md:py-12 md:px-8">
+        <div className="font-input-mono col-span-2 px-5 md:px-8 md:py-12">
           {item.videoUrl ? (
             <h3 className="mb-4 underline">
               <a href={item.videoUrl} target="_blank" rel="noreferrer">
@@ -29,7 +29,7 @@ export const scheduleRow = (item: ScheduleItem): JSX.Element => (
           )}
           <div className="text-sm">{item.speakers.join(' & ')}</div>
         </div>
-        <p className="col-span-2 px-5 pt-8 pb-12 md:py-12 md:px-8">
+        <p className="col-span-2 px-5 pb-12 pt-8 md:px-8 md:py-12">
           {item.description}
         </p>
       </article>
@@ -40,13 +40,13 @@ export const breakRow = (item: ScheduleItem): JSX.Element => (
   <div key={item.title + item.time} className="w-full">
     <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
       <div className="grid w-full grid-cols-1 md:grid-cols-5">
-        <div className="font-input-mono px-5 pt-12 pb-8 md:py-12">
+        <div className="font-input-mono px-5 pb-8 pt-12 md:py-12">
           <span className="hidden md:block">{item.time}</span>
-          <span className="mb-4 rounded-md py-4 px-6 md:hidden">
+          <span className="mb-4 rounded-md px-6 py-4 md:hidden">
             {item.time}
           </span>
         </div>
-        <div className="px-5 pb-12 md:col-span-4 md:border-l md:border-slate-200 md:py-12 md:px-8 md:dark:border-slate-700">
+        <div className="px-5 pb-12 md:col-span-4 md:border-l md:border-slate-200 md:px-8 md:py-12 md:dark:border-slate-700">
           {item.videoUrl ? (
             <h3 className="font-input-mono underline">
               <a href={item.videoUrl} target="_blank" rel="noreferrer">

nx-dev/ui-conference/src/lib/components/speakers.tsx

@@ -21,7 +21,7 @@ export function Speakers(speakers: Array<Member>) {
               {row.map((speaker) => (
                 <div
                   key={speaker.name}
-                  className="border-slate-200 py-8 odd:border-b dark:border-slate-700 md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
+                  className="border-slate-200 py-8 odd:border-b md:odd:border-b-0 md:odd:border-r md:odd:pr-12 md:even:pl-12 dark:border-slate-700"
                 >
                   <div className="px-5">
                     <MemberCard

nx-dev/ui-conference/src/lib/conf-location.tsx

@@ -1,6 +1,6 @@
 export function ConfLocation(): JSX.Element {
   return (
-    <div className="border-t border-b border-slate-200 dark:border-slate-700">
+    <div className="border-b border-t border-slate-200 dark:border-slate-700">
       <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
         <article className="grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
           <div className="px-5 py-12 md:pr-12">

nx-dev/ui-conference/src/lib/conf-schedule-short.tsx

@@ -184,7 +184,7 @@ export function ConfScheduleShort(): JSX.Element {
           </div>
         </div>
       </div>
-      <section className="w-full divide-y divide-slate-200 border-t border-b border-slate-200 dark:divide-slate-700 dark:border-slate-700">
+      <section className="w-full divide-y divide-slate-200 border-b border-t border-slate-200 dark:divide-slate-700 dark:border-slate-700">
         <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
           <article className="md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
             <div className="px-5 py-12 md:pr-12">

nx-dev/ui-conference/src/lib/conf-sponsors.tsx

@@ -107,7 +107,7 @@ export function ConfSponsors(): JSX.Element {
                   {row.map((speaker) => (
                     <div
                       key={speaker.name}
-                      className="border-slate-600 py-8 odd:border-b md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
+                      className="border-slate-600 py-8 odd:border-b md:odd:border-b-0 md:odd:border-r md:odd:pr-12 md:even:pl-12"
                     >
                       <div className="h-full px-5">
                         <SponsorCard

nx-dev/ui-conference/src/lib/conf-workshop.tsx

@@ -1,13 +1,13 @@
 export function ConfWorkshop(): JSX.Element {
   return (
-    <div className="border-t border-b border-slate-200 dark:border-slate-700">
+    <div className="border-b border-t border-slate-200 dark:border-slate-700">
       <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
         <article className="grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
           <div className="px-5 py-12 md:pr-12">
             <div className="font-input-mono text-slate-700 dark:text-slate-300">
               Day 1 - Sunday, Oct. 16 | Day 2 - Tuesday, Oct. 18
             </div>
-            <h2 className="font-input-mono pt-8 pb-2 text-2xl">
+            <h2 className="font-input-mono pb-2 pt-8 text-2xl">
               Learn from the Creators of Nx, First Hand!
             </h2>
             <p className="text-md mb-8">
@@ -22,7 +22,7 @@ export function ConfWorkshop(): JSX.Element {
               monorepo that not just works initially but scales with your team
               and organization.
             </p>
-            <h4 className="font-input-mono mt-8 mb-4 text-lg">
+            <h4 className="font-input-mono mb-4 mt-8 text-lg">
               $800 All-Inclusive / $400 Day 2 only
             </h4>
             <p className="mb-4">
@@ -152,7 +152,7 @@ export function ConfWorkshop(): JSX.Element {
             </div>*/}
             <div className="px-5 py-12 md:pl-12">
               <a
-                className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
+                className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
                 href="https://ti.to/nx-conf/nx-conf-2022?utm_source=nxdev"
               >
                 <span className="group-hover:underline">Save your ticket!</span>

nx-dev/ui-conference/src/lib/launch-week/agenda.tsx

@@ -70,7 +70,7 @@ export function LaunchWeekAgenda(): JSX.Element {
 
   return (
     <div className="border-t border-slate-200 dark:border-slate-700">
-      <section className="w-full divide-y divide-slate-200 border-t border-b border-slate-200 dark:divide-slate-700 dark:border-slate-700">
+      <section className="w-full divide-y divide-slate-200 border-b border-t border-slate-200 dark:divide-slate-700 dark:border-slate-700">
         <div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
           <article className="md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
             <div className="px-5 py-12 md:pr-12">
@@ -82,7 +82,7 @@ export function LaunchWeekAgenda(): JSX.Element {
                 rel="noreferrer"
                 target="_blank"
                 href="https://youtu.be/fy0K2Smyj5A"
-                className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
+                className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
               >
                 <span className="group-hover:underline">
                   Watch the conference recording
@@ -128,7 +128,7 @@ const launchWeekScheduleRow = (item: ScheduleItem): JSX.Element => (
       <article className="grid w-full grid-cols-1 md:grid-cols-5 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
         <div className="font-input-mono flex items-center px-5 py-6">
           <span className="hidden md:block">{item.time}</span>
-          <span className="mb-4 rounded-md py-4 px-6 md:hidden">
+          <span className="mb-4 rounded-md px-6 py-4 md:hidden">
             {item.time}
           </span>
         </div>

nx-dev/ui-conference/src/lib/launch-week/announcements.tsx

@@ -41,7 +41,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     This is what Nx Project Crystal is all about.
                   </p>
                 </div>
-                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -110,7 +110,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     powerful monorepo capabilities.
                   </p>
                 </div>
-                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -175,7 +175,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     maintaining CI/CD infrastructure.
                   </p>
                 </div>
-                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -237,7 +237,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     and optimize your codebase and pipelines.
                   </p>
                 </div>
-                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -295,7 +295,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     chime in for our live-stream!
                   </p>
                 </div>
-                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
+                <div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
                   <ButtonLink
                     variant="primary"
                     size="default"

nx-dev/ui-conference/src/lib/launch-week/community-partners.tsx

@@ -59,11 +59,11 @@ export function LaunchNxCommunityPartners(): JSX.Element {
   return (
     <div className="border-t border-slate-200 dark:border-slate-700">
       <div className="mx-auto max-w-7xl py-6">
-        <div className="mx-auto mt-10 px-6 grid max-w-lg grid-cols-1 items-center gap-8 sm:max-w-xl md:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+        <div className="mx-auto mt-10 grid max-w-lg grid-cols-1 items-center gap-8 px-6 sm:max-w-xl md:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
           {partners.map((partner) => (
             <a
               key={partner.name}
-              className="flex justify-center w-full h-full bg-white p-8 rounded-lg"
+              className="flex h-full w-full justify-center rounded-lg bg-white p-8"
               href={partner.linkTarget}
             >
               <img

nx-dev/ui-conference/src/lib/launch-week/intro.tsx

@@ -24,9 +24,9 @@ export function LaunchNxIntro() {
             />
           </svg>
         </div>
-        <div className="mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pl-16 lg:pb-0">
+        <div className="mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pb-0 lg:pl-16">
           <h2>
-            <div className="font-input-mono mb-4 inline-block rounded-lg border border-slate-200 bg-white/40 p-4 py-4 px-6 text-xl text-sm font-extrabold leading-none tracking-tight shadow-sm transition hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800 sm:text-2xl lg:text-2xl">
+            <div className="font-input-mono mb-4 inline-block rounded-lg border border-slate-200 bg-white/40 p-4 px-6 py-4 text-sm text-xl font-extrabold leading-none tracking-tight shadow-sm transition hover:bg-white sm:text-2xl lg:text-2xl dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
               <span className="sr-only">Announcing Launch Nx on </span> February
               5-9, 2024
             </div>
@@ -49,7 +49,7 @@ export function LaunchNxIntro() {
 
           <a
             href="#conf"
-            className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
+            className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
           >
             <span className="group-hover:underline">Watch the talks</span>
             <svg
@@ -72,7 +72,7 @@ export function LaunchNxIntro() {
             rel="noreferrer"
             target="_blank"
             href="https://youtu.be/fy0K2Smyj5A"
-            className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
+            className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
           >
             <span className="group-hover:underline">
               Watch the full conference recording

nx-dev/ui-fence/src/lib/fence.tsx

@@ -160,7 +160,7 @@ export function Fence({
   return (
     <div className="code-block group relative w-full">
       <div>
-        <div className="absolute top-0 right-0 z-10 flex">
+        <div className="absolute right-0 top-0 z-10 flex">
           {enableCopy && enableCopy === true && (
             <CopyToClipboard
               text={command && command !== '' ? command : children}

nx-dev/ui-fence/src/lib/selector.tsx

@@ -22,7 +22,7 @@ export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
             <div className="relative">
               <Listbox.Button
                 className={
-                  'relative w-full cursor-pointer border border-slate-200 dark:border-slate-700 py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm' +
+                  'relative w-full cursor-pointer border border-slate-200 py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm dark:border-slate-700' +
                   (props.className ? ` ${props.className}` : '')
                 }
               >
@@ -51,13 +51,13 @@ export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
               >
                 <Listbox.Options
                   static
-                  className="absolute z-10 mt-1 pl-0 max-h-60 w-full overflow-auto rounded-sm py-1 text-base shadow-md focus:outline-none sm:text-sm bg-white dark:bg-slate-800/60 dark:focus-within:ring-sky-500"
+                  className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-sm bg-white py-1 pl-0 text-base shadow-md focus:outline-none sm:text-sm dark:bg-slate-800/60 dark:focus-within:ring-sky-500"
                 >
                   {props.items.map((item, personIdx) => (
                     <Listbox.Option
                       key={personIdx}
                       className={({ active }) =>
-                        `relative list-none cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 select-none py-2 px-3`
+                        `relative cursor-pointer select-none list-none px-3 py-2 hover:bg-slate-50 dark:hover:bg-slate-800`
                       }
                       value={item}
                     >

nx-dev/ui-home/src/lib/extensible-and-integrated.tsx

@@ -10,7 +10,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
       id="extensible-and-integrated"
       className="overflow-hidden bg-slate-50 pt-28 dark:bg-slate-800/40"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
         <header className="max-w-2xl">
           <SectionHeading
             as="h1"
@@ -80,7 +80,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
           </p>
         </div>
       </div>
-      <div className="relative mx-auto max-w-7xl px-4 pt-6 pb-12 sm:px-6 lg:px-8 lg:pb-4 lg:pt-6">
+      <div className="relative mx-auto max-w-7xl px-4 pb-12 pt-6 sm:px-6 lg:px-8 lg:pb-4 lg:pt-6">
         <Tab.Group>
           <Tab.List>
             <div className="flex justify-between space-x-4 md:justify-start">

nx-dev/ui-home/src/lib/extensible-and-integrated/github-intergration-tab.tsx

@@ -45,11 +45,11 @@ export function GitHubIntegrationTab(): JSX.Element {
         </div>
         {/*HORIZONTAL LINK*/}
         <div className="absolute right-0 hidden w-48 translate-x-full translate-y-12 items-center md:flex">
-          <span className="absolute top-0 left-0 -mt-1 -ml-1 flex h-2 w-2">
+          <span className="absolute left-0 top-0 -ml-1 -mt-1 flex h-2 w-2">
             <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
             <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
           </span>
-          <span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-2 w-2">
+          <span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-2 w-2">
             <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
             <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
           </span>
@@ -132,11 +132,11 @@ export function GitHubIntegrationTab(): JSX.Element {
         </div>
         {/*HORIZONTAL LINK*/}
         <div className="absolute bottom-80 right-0 hidden w-24 translate-x-full translate-y-12 items-center md:flex">
-          <span className="absolute top-0 left-0 -mt-1 -ml-1 flex h-2 w-2">
+          <span className="absolute left-0 top-0 -ml-1 -mt-1 flex h-2 w-2">
             <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
             <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
           </span>
-          <span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-2 w-2">
+          <span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-2 w-2">
             <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
             <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
           </span>
@@ -148,7 +148,7 @@ export function GitHubIntegrationTab(): JSX.Element {
         aria-hidden="true"
         className="relative hidden px-4 pr-6 md:flex lg:col-span-2 lg:h-full lg:px-0"
       >
-        <div className="absolute -top-28 left-36 mx-auto h-[510px] w-full w-auto max-w-none overflow-hidden rounded-xl border border-slate-200 shadow-xl dark:border-slate-700">
+        <div className="absolute -top-28 left-36 mx-auto h-[510px] w-auto w-full max-w-none overflow-hidden rounded-xl border border-slate-200 shadow-xl dark:border-slate-700">
           <Image
             src="/images/nx-cloud.webp"
             alt="Nx Cloud app"
@@ -157,7 +157,7 @@ export function GitHubIntegrationTab(): JSX.Element {
             height={510}
           />
         </div>
-        <div className="absolute left-12 -bottom-2 mx-auto flex w-full w-auto max-w-none overflow-hidden rounded-xl border border-slate-200 shadow-xl">
+        <div className="absolute -bottom-2 left-12 mx-auto flex w-auto w-full max-w-none overflow-hidden rounded-xl border border-slate-200 shadow-xl">
           <Image
             src="/images/github-nxcloud.webp"
             alt="Nx Cloud GitHub app"

nx-dev/ui-home/src/lib/extensible-and-integrated/graph-tab.tsx

@@ -39,17 +39,17 @@ export function GraphTab(): JSX.Element {
         </div>
       </div>
       <div className="relative -top-5 mr-0.5 hidden grow items-center lg:flex">
-        <span className="absolute top-0 left-0 -mt-1 -ml-1 flex h-2 w-2">
+        <span className="absolute left-0 top-0 -ml-1 -mt-1 flex h-2 w-2">
           <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
           <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
         </span>
-        <span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-2 w-2">
+        <span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-2 w-2">
           <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
           <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
         </span>
         <div className="-m-0.5 h-0.5 w-full bg-slate-200 dark:bg-slate-700" />
       </div>
-      <div className="z-10 h-auto overflow-hidden rounded-lg border border-slate-200 shadow dark:border-slate-700 lg:min-h-[485px] lg:w-[690px]">
+      <div className="z-10 h-auto overflow-hidden rounded-lg border border-slate-200 shadow lg:min-h-[485px] lg:w-[690px] dark:border-slate-700">
         <div className="flex h-7 w-full items-center justify-start space-x-1.5 bg-slate-200 px-3 dark:bg-slate-700">
           <span className="h-2 w-2 rounded-full bg-red-400"></span>
           <span className="h-2 w-2 rounded-full bg-yellow-400"></span>

nx-dev/ui-home/src/lib/extensible-and-integrated/ide-integration-tab.tsx

@@ -46,7 +46,7 @@ export function IdeIntegrationTab(): JSX.Element {
       className="wrapper my-8 grid h-full items-center gap-16 md:grid-cols-2 lg:grid-cols-3"
     >
       <div className="lg:col-span-2">
-        <div className="w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow-lg shadow dark:hidden dark:border-slate-700">
+        <div className="w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow shadow-lg dark:hidden dark:border-slate-700">
           <Image
             src="/images/nx-console/vscode-light.webp"
             alt="Nx Console app screenshot"
@@ -55,7 +55,7 @@ export function IdeIntegrationTab(): JSX.Element {
             height={800}
           />
         </div>
-        <div className="hidden w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow-lg shadow dark:block dark:border-slate-700">
+        <div className="hidden w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow shadow-lg dark:block dark:border-slate-700">
           <Image
             src="/images/nx-console/vscode-dark.webp"
             alt="Nx Console app screenshot"
@@ -69,7 +69,7 @@ export function IdeIntegrationTab(): JSX.Element {
         {features.map((feature) => (
           <div
             key={feature.name}
-            className="group relative rounded-lg px-4 py-2 transition hover:bg-slate-100 dark:hover:bg-slate-800/40 sm:flex"
+            className="group relative rounded-lg px-4 py-2 transition hover:bg-slate-100 sm:flex dark:hover:bg-slate-800/40"
           >
             <div
               className={cx(
@@ -77,11 +77,11 @@ export function IdeIntegrationTab(): JSX.Element {
                 feature.connectionWidth
               )}
             >
-              <span className="absolute top-0 left-0 -mt-1 -ml-1 flex h-2 w-2">
+              <span className="absolute left-0 top-0 -ml-1 -mt-1 flex h-2 w-2">
                 <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 transition dark:bg-sky-500" />
                 <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 transition group-hover:bg-blue-600 group-hover:bg-sky-600 dark:bg-slate-700" />
               </span>
-              <span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-2 w-2">
+              <span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-2 w-2">
                 <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 transition dark:bg-sky-500" />
                 <span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 transition group-hover:bg-blue-600 group-hover:bg-sky-600 dark:bg-slate-700" />
               </span>
@@ -90,7 +90,7 @@ export function IdeIntegrationTab(): JSX.Element {
             <div className="sm:flex-shrink-0">
               <div className="flow-root">{feature.icon}</div>
             </div>
-            <div className="mt-3 sm:mt-0 sm:ml-3">
+            <div className="mt-3 sm:ml-3 sm:mt-0">
               <h3 className="text-sm font-medium">{feature.name}</h3>
               <Link href={feature.link}>
                 <span className="absolute inset-0" aria-hidden="true" />

nx-dev/ui-home/src/lib/getting-started.tsx

@@ -4,9 +4,9 @@ export function GettingStarted(): JSX.Element {
   return (
     <article
       id="getting-started"
-      className="border-t border-b border-slate-200 bg-gradient-to-r from-cyan-500 to-blue-500 shadow-inner dark:border-slate-700"
+      className="border-b border-t border-slate-200 bg-gradient-to-r from-cyan-500 to-blue-500 shadow-inner dark:border-slate-700"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-24 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:px-8 lg:py-24">
         <div>
           <h2 className="text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
             <span className="block">Ready to dive in?</span>

nx-dev/ui-home/src/lib/hero.tsx

@@ -41,7 +41,7 @@ export function Hero(): JSX.Element {
         </div>
         <div className="text-center">
           <h1
-            className="text-3xl font-bold leading-none tracking-tight text-black dark:text-white sm:mt-6 sm:text-5xl md:text-6xl"
+            className="text-3xl font-bold leading-none tracking-tight text-black sm:mt-6 sm:text-5xl md:text-6xl dark:text-white"
             data-cy="primary-heading"
           >
             <span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">

nx-dev/ui-home/src/lib/improve-worst-ci-case.tsx

@@ -4,9 +4,9 @@ export function ImproveWorstCiCase(): JSX.Element {
   return (
     <article
       id="getting-started"
-      className="border-t border-b border-slate-200 bg-gradient-to-r from-cyan-500 to-blue-500 shadow-inner dark:border-slate-700"
+      className="border-b border-t border-slate-200 bg-gradient-to-r from-cyan-500 to-blue-500 shadow-inner dark:border-slate-700"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-24 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:px-8 lg:py-24">
         <div>
           <h2 className="text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
             <span className="block">Taste the performance,</span>

nx-dev/ui-home/src/lib/migrate.tsx

@@ -6,7 +6,7 @@ export function Migrate(): JSX.Element {
       id="getting-started"
       className="bg-gradient-to-r from-pink-500 to-fuchsia-500"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-24 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:px-8 lg:py-24">
         <div>
           <h2 className="text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
             <span className="block">Already have a monorepo?</span>

nx-dev/ui-home/src/lib/migrations-and-code-generation.tsx

@@ -7,7 +7,7 @@ export function MigrationsAndCodeGeneration(): JSX.Element {
       id="affected-and-code-generation"
       className="relative overflow-hidden bg-slate-50 py-28 dark:bg-slate-800/40"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:py-16 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:px-8 lg:py-16">
         <div>
           <header>
             <SectionHeading as="h1" variant="title" id="evergreen-setup">

nx-dev/ui-home/src/lib/monorepo-styles.tsx

@@ -7,7 +7,7 @@ export function MonorepoStyles(): JSX.Element {
       id="monorepo-styles"
       className="relative overflow-hidden bg-slate-50 pt-28 dark:bg-slate-800/40"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:py-16 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:px-8 lg:py-16">
         <div>
           <header>
             <SectionHeading as="h1" variant="title" id="monorepo-styles">

nx-dev/ui-home/src/lib/nx-statistics.tsx

@@ -3,13 +3,13 @@ import { LogoCloud } from './logo-cloud';
 
 export function NxStatistics(): JSX.Element {
   return (
-    <div className="bg-white pt-12 dark:bg-slate-900 sm:pt-28">
+    <div className="bg-white pt-12 sm:pt-28 dark:bg-slate-900">
       <div className="mx-auto max-w-7xl px-4 pt-12 sm:px-6 lg:px-8">
         <div className="mx-auto max-w-4xl text-center">
           <SectionHeading as="h2" variant="display" id="trusted-by-all">
             Trusted by developers, enterprises and open-source projects.
           </SectionHeading>
-          <p className="sr-only mt-3 text-lg text-slate-700 dark:text-slate-400 sm:mt-4">
+          <p className="sr-only mt-3 text-lg text-slate-700 sm:mt-4 dark:text-slate-400">
             Whether your workspace{' '}
             <span className="font-semibold">
               has a single project or a thousand
@@ -21,13 +21,13 @@ export function NxStatistics(): JSX.Element {
       {/*LOGO CLOUD*/}
       <LogoCloud />
       {/*STATISTICS*/}
-      <div className="mt-10 bg-slate-50 pb-12 dark:bg-slate-800/40 sm:pb-16">
+      <div className="mt-10 bg-slate-50 pb-12 sm:pb-16 dark:bg-slate-800/40">
         <div className="relative">
           <div className="absolute inset-0 h-1/2 border-b border-slate-200 bg-white dark:border-black dark:bg-slate-900"></div>
           <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="mx-auto max-w-4xl">
-              <dl className="overflow-hidden rounded-lg bg-white shadow dark:bg-slate-900 sm:grid sm:grid-cols-3">
+              <dl className="overflow-hidden rounded-lg bg-white shadow sm:grid sm:grid-cols-3 dark:bg-slate-900">
-                <div className="flex flex-col border-b border-slate-50 p-6 text-center dark:border-slate-800/40 sm:border-0 sm:border-r">
+                <div className="flex flex-col border-b border-slate-50 p-6 text-center sm:border-0 sm:border-r dark:border-slate-800/40">
                   <dt className="order-2 mt-2 text-base font-medium leading-6">
                     developers use it every day
                   </dt>
@@ -35,7 +35,7 @@ export function NxStatistics(): JSX.Element {
                     2M+
                   </dd>
                 </div>
-                <div className="flex flex-col border-t border-b border-slate-50 p-6 text-center dark:border-slate-800/40 sm:border-0 sm:border-l sm:border-r">
+                <div className="flex flex-col border-b border-t border-slate-50 p-6 text-center sm:border-0 sm:border-l sm:border-r dark:border-slate-800/40">
                   <dt className="order-2 mt-2 text-base font-medium leading-6">
                     of Fortune 500 companies use Nx for key projects
                   </dt>
@@ -43,7 +43,7 @@ export function NxStatistics(): JSX.Element {
                     50%
                   </dd>
                 </div>
-                <div className="flex flex-col border-t border-slate-50 p-6 text-center dark:border-slate-800/40 sm:border-0 sm:border-l">
+                <div className="flex flex-col border-t border-slate-50 p-6 text-center sm:border-0 sm:border-l dark:border-slate-800/40">
                   <dt className="order-2 mt-2 text-base font-medium leading-6">
                     monthly npm downloads
                   </dt>

nx-dev/ui-home/src/lib/nx-with-ci.tsx

@@ -99,7 +99,7 @@ export function NxWithCi(): JSX.Element {
                   whileInView="end"
                   variants={ciBar}
                   viewport={{ once: true }}
-                  className="flex-grow items-center justify-end rounded-r-lg bg-slate-200 py-2 px-4 text-slate-600 dark:bg-slate-700 dark:text-slate-400"
+                  className="flex-grow items-center justify-end rounded-r-lg bg-slate-200 px-4 py-2 text-slate-600 dark:bg-slate-700 dark:text-slate-400"
                 >
                   <Counter value={90}></Counter>
                   <span className="ml-1">minutes</span>

nx-dev/ui-home/src/lib/testimonials.tsx

@@ -78,7 +78,7 @@ export function Testimonials(): JSX.Element {
       id="next-generation"
       className="relative bg-slate-50 pt-28 dark:bg-slate-800/40"
     >
-      <div className="mx-auto max-w-7xl items-stretch py-12 px-4 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:py-16 lg:px-8">
+      <div className="mx-auto max-w-7xl items-stretch px-4 py-12 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:px-8 lg:py-16">
         <div className="md:col-span-2">
           <header>
             <SectionHeading as="h1" variant="title" id="testimonials">

nx-dev/ui-home/src/lib/why-is-nx-fast.tsx

@@ -4,12 +4,12 @@ export function WhyIsNxFast(): JSX.Element {
       id="why-is-nx-fast"
       className="relative bg-slate-50 pt-28 dark:bg-slate-800/40"
     >
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
         <header className="max-w-prose">
           <h1 className="text-lg font-semibold tracking-tight text-blue-500 dark:text-sky-500">
             Full monorepo support
           </h1>
-          <p className="mt-4 text-3xl font-semibold tracking-tight text-slate-900 dark:text-slate-100 sm:text-5xl">
+          <p className="mt-4 text-3xl font-semibold tracking-tight text-slate-900 sm:text-5xl dark:text-slate-100">
             How Nx makes your workspace performant
           </p>
         </header>

nx-dev/ui-markdoc/src/lib/nodes/heading.component.tsx

@@ -22,7 +22,7 @@ export function Heading({
     >
       {children}
       <Link aria-hidden="true" href={`#${id}`}>
-        <LinkIcon className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100" />
+        <LinkIcon className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100" />
       </Link>
     </Component>
   );

nx-dev/ui-markdoc/src/lib/tags/disclosure.component.tsx

@@ -37,21 +37,21 @@ export function Disclosure({
   return (
     <span
       className={cx(
-        'my-6 block rounded-md flex-col ring-1 bg-slate-50 dark:bg-slate-800/40 ring-slate-100 dark:ring-slate-700',
+        'my-6 block flex-col rounded-md bg-slate-50 ring-1 ring-slate-100 dark:bg-slate-800/40 dark:ring-slate-700',
         ui.backgroundColor,
         ui.borderColor
       )}
     >
       <span
         onClick={() => setCollapsed(!collapsed)}
-        className="flex-shrink-0 cursor-pointer flex p-4"
+        className="flex flex-shrink-0 cursor-pointer p-4"
       >
         {collapsed ? ui.downIcon : ui.upIcon}
         <span className={cx('ml-3 block text-sm font-medium', ui.titleColor)}>
           {title}
         </span>
       </span>
-      <span className={cx('p-4 pl-12 pt-0 block', collapsed ? 'hidden' : '')}>
+      <span className={cx('block p-4 pl-12 pt-0', collapsed ? 'hidden' : '')}>
         <span className={cx('prose-sm block', ui.textColor)}>{children}</span>
       </span>
     </span>

nx-dev/ui-markdoc/src/lib/tags/github-repository.component.tsx

@@ -8,7 +8,7 @@ export function GithubRepository({
   title?: string;
 }): JSX.Element {
   return (
-    <div className="not-prose group relative my-12 mx-auto flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
+    <div className="not-prose group relative mx-auto my-12 flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
       <div className="absolute inset-0 z-0 w-2 bg-blue-500 transition-all duration-150 group-hover:w-full dark:bg-sky-500"></div>
       <div className="w-2 bg-blue-500 dark:bg-sky-500"></div>
 

nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx

@@ -92,7 +92,7 @@ export function Graph({
 
   return (
     <div className="my-6 w-full place-content-center overflow-hidden rounded-md ring-1 ring-slate-200 dark:ring-slate-700">
-      <div className="relative flex justify-center p-2 border-b border-slate-200 bg-slate-100/50 dark:border-slate-700 dark:bg-slate-700/50 font-bold">
+      <div className="relative flex justify-center border-b border-slate-200 bg-slate-100/50 p-2 font-bold dark:border-slate-700 dark:bg-slate-700/50">
         {title}
       </div>
       {type === 'project' ? (

nx-dev/ui-markdoc/src/lib/tags/pill.component.tsx

@@ -9,7 +9,7 @@ export function Pill({
   children: ReactNode;
 }): JSX.Element {
   return (
-    <span className="group relative mr-2 mb-2 inline-flex rounded-md border border-slate-200 bg-slate-50/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
+    <span className="group relative mb-2 mr-2 inline-flex rounded-md border border-slate-200 bg-slate-50/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
       <span className="flex flex-col p-3">
         <Link
           href={url}

nx-dev/ui-markdoc/src/lib/tags/short-embed.tsx

@@ -83,7 +83,7 @@ export function ShortEmbeds({
     <ShortEmbedContext.Provider
       value={{ current: currentVideo, userInteraction }}
     >
-      <aside id="short-embed" className="fixed w-80 bottom-5 right-5 z-50">
+      <aside id="short-embed" className="fixed bottom-5 right-5 z-50 w-80">
         <Transition
           appear={true}
           show={isShowing}
@@ -94,23 +94,23 @@ export function ShortEmbeds({
           leaveFrom="opacity-100 translate-y-0"
           leaveTo="opacity-0 translate-y-full"
         >
-          <div className="relative mt-12 w-full h-full rounded-xl shadow-xl coding flex flex-col border border-slate-200 bg-slate-50 p-2 leading-normal text-slate-800 subpixel-antialiased dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
+          <div className="coding relative mt-12 flex h-full w-full flex-col rounded-xl border border-slate-200 bg-slate-50 p-2 leading-normal text-slate-800 subpixel-antialiased shadow-xl dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
             <Button
               size="small"
               variant="secondary"
               onClick={() => {
                 setTimeout(() => setIsShowing(false), 500);
               }}
-              className="absolute top-2 right-2"
+              className="absolute right-2 top-2"
               title="Close"
             >
-              <XMarkIcon className="w-4 h-4" />
+              <XMarkIcon className="h-4 w-4" />
             </Button>
-            <h3 className="text-center not-prose">Relevant Videos</h3>
+            <h3 className="not-prose text-center">Relevant Videos</h3>
-            <div className="grid grid-cols-1 gap-4 justify-items-center w-full">
+            <div className="grid w-full grid-cols-1 justify-items-center gap-4">
               {children}
               <div>
-                <div className="text-base font-medium pb-1">Continue with:</div>
+                <div className="pb-1 text-base font-medium">Continue with:</div>
                 <div className="flex flex-col gap-2">
                   {videoData
                     .filter(
@@ -127,7 +127,7 @@ export function ShortEmbeds({
                             setUserInteraction(true);
                             setCurrentVideo(config);
                           }}
-                          className="hover:cursor-pointer flex text-sm h-24 rounded-lg overflow-hidden border border-slate-200 bg-white/40 shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
+                          className="flex h-24 overflow-hidden rounded-lg border border-slate-200 bg-white/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:cursor-pointer hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
                         >
                           <div className="w-32 shrink-0">
                             <img
@@ -136,7 +136,7 @@ export function ShortEmbeds({
                               alt={`Another recommendation: ${config.title}`}
                             />
                           </div>
-                          <div className="p-2 shrink overflow-ellipsis h-full w-full grid grid-cols-1 content-center">
+                          <div className="grid h-full w-full shrink grid-cols-1 content-center overflow-ellipsis p-2">
                             {config.title}
                           </div>
                         </div>
@@ -160,7 +160,7 @@ export function ShortVideo({ embedUrl, title }: VideoData) {
   }
 
   return (
-    <div className="w-full h-96 rounded-lg overflow-hidden">
+    <div className="h-96 w-full overflow-hidden rounded-lg">
       <iframe
         className="!m-0 border-0"
         width="100%"

nx-dev/ui-markdoc/src/lib/tags/side-by-side.component.tsx

@@ -3,7 +3,7 @@ import { Children, ReactNode } from 'react';
 export function SideBySide({ children }: { children: ReactNode }) {
   const [first, ...rest] = Children.toArray(children);
   return (
-    <div className="not-prose grid items-center divide-x divide-solid divide-slate-50 dark:divide-slate-800 md:grid-cols-2">
+    <div className="not-prose grid items-center divide-x divide-solid divide-slate-50 md:grid-cols-2 dark:divide-slate-800">
       <div className="md:pr-6">{first}</div>
       <div className="md:pl-6">{rest}</div>
     </div>

nx-dev/ui-markdoc/src/lib/tags/stackblitz-button.component.tsx

@@ -10,7 +10,7 @@ export function StackblitzButton({
   const resolvedUrl = url.replace('https://', '');
 
   return (
-    <div className="not-prose group relative my-12 mx-auto flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
+    <div className="not-prose group relative mx-auto my-12 flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
       <div className="absolute inset-0 z-0 w-2 bg-blue-500 transition-all duration-150 group-hover:w-full dark:bg-sky-500"></div>
       <div className="w-2 bg-blue-500 dark:bg-sky-500"></div>
 

nx-dev/ui-markdoc/src/lib/tags/video-link.component.tsx

@@ -20,7 +20,7 @@ const youtubeIcon = (
     role="img"
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
-    className="w-6 h-6"
+    className="h-6 w-6"
   >
     <path d="M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14c-1.88-.5-9.38-.5-9.38-.5s-7.5 0-9.38.5A3.02 3.02 0 0 0 .5 6.19C0 8.07 0 12 0 12s0 3.93.5 5.81a3.02 3.02 0 0 0 2.12 2.14c1.87.5 9.38.5 9.38.5s7.5 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.81zM9.54 15.57V8.43L15.82 12l-6.28 3.57z" />
   </svg>
@@ -28,16 +28,16 @@ const youtubeIcon = (
 
 export function VideoLink({ text, link }: { text: string; link: string }) {
   return (
-    <div className="flex no-prose">
+    <div className="no-prose flex">
       <a
         href={link}
         target="_blank"
         rel="noopener noreferrer"
-        className="flex items-center no-underline space-x-2 border-transparent"
+        className="flex items-center space-x-2 border-transparent no-underline"
       >
-        <div className="flex items-center justify-between pl-2 pr-2 space-x-2 border rounded-md border-slate-200 py-1 pl-3 transition hover:border-slate-500 dark:border-slate-700/40 dark:hover:border-slate-700">
+        <div className="flex items-center justify-between space-x-2 rounded-md border border-slate-200 py-1 pl-2 pl-3 pr-2 transition hover:border-slate-500 dark:border-slate-700/40 dark:hover:border-slate-700">
           {youtubeIcon}
-          <span className="font-semibold text-md hover:text-slate-900 dark:hover:text-sky-400">
+          <span className="text-md font-semibold hover:text-slate-900 dark:hover:text-sky-400">
             {text || 'Jump to section in video'}
           </span>
         </div>

nx-dev/ui-markdoc/src/lib/tags/video-loop.component.tsx

@@ -43,8 +43,8 @@ export function VideoLoop({
   return (
     <video ref={videoRef} autoPlay muted loop>
       <source src={src} type="video/mp4" />
-      <div className="text-center p-4">
+      <div className="p-4 text-center">
-        <p className="font-bold pb-3">
+        <p className="pb-3 font-bold">
           Your browser does not support the video tag. Here is a description of
           the video:
         </p>

nx-dev/ui-theme/src/lib/theme-switcher.component.tsx

@@ -67,7 +67,7 @@ export function ThemeSwitcher(): JSX.Element {
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Listbox.Options className="absolute top-full -right-10 z-50 mt-2 w-36 origin-top-right divide-y divide-slate-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none dark:divide-slate-800 dark:bg-slate-900 dark:ring-white/5">
+            <Listbox.Options className="absolute -right-10 top-full z-50 mt-2 w-36 origin-top-right divide-y divide-slate-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none dark:divide-slate-800 dark:bg-slate-900 dark:ring-white/5">
               {availableThemes.map((t) => (
                 <Listbox.Option key={t.value} value={t.value} as={Fragment}>
                   {({ active, selected }) => (

packages/create-nx-workspace/bin/types/bundler-list.ts

@@ -1,4 +1,4 @@
 // Bundler to be used to build the application
 export const bundlerList = ['webpack', 'vite', 'rspack'];
 
-export type Bundler = typeof bundlerList[number];
+export type Bundler = (typeof bundlerList)[number];

packages/create-nx-workspace/bin/types/framework-list.ts

@@ -1,4 +1,4 @@
 // Framework option to be used when the node-standalone preset is selected
 export const frameworkList = ['express', 'fastify', 'koa', 'nest'];
 
-export type Framework = typeof frameworkList[number];
+export type Framework = (typeof frameworkList)[number];

packages/create-nx-workspace/src/utils/nx/ab-testing.ts

@@ -54,7 +54,7 @@ const messageOptions = {
 } as const;
 
 export type MessageKey = keyof typeof messageOptions;
-type MessageData = typeof messageOptions[MessageKey][number];
+type MessageData = (typeof messageOptions)[MessageKey][number];
 
 export class PromptMessages {
   private selectedMessages: { [key in MessageKey]?: number } = {};

packages/create-nx-workspace/src/utils/package-manager.ts

@@ -9,7 +9,7 @@ import { join } from 'path';
 
 export const packageManagerList = ['pnpm', 'yarn', 'npm', 'bun'] as const;
 
-export type PackageManager = typeof packageManagerList[number];
+export type PackageManager = (typeof packageManagerList)[number];
 
 export function detectPackageManager(dir: string = ''): PackageManager {
   return existsSync(join(dir, 'bun.lockb'))

packages/devkit/src/utils/convert-nx-executor.spec.ts

@@ -23,7 +23,8 @@ describe('Convert Nx Executor', () => {
     const {
       TestingArchitectHost,
       // nx-ignore-next-line
-    } = require('@angular-devkit/architect/testing') as typeof import('@angular-devkit/architect/testing');
+    } =
+      require('@angular-devkit/architect/testing') as typeof import('@angular-devkit/architect/testing');
     const { Architect } = require('@angular-devkit/architect');
 
     const registry = new schema.CoreSchemaRegistry();

packages/jest/src/utils/config/config-file.ts

@@ -8,10 +8,10 @@ export const jestConfigExtensions = [
   'mts',
   'cts',
 ] as const;
-export type JestConfigExtension = typeof jestConfigExtensions[number];
+export type JestConfigExtension = (typeof jestConfigExtensions)[number];
 
 export const jestPresetExtensions = ['js', 'cjs', 'mjs'] as const;
-export type JestPresetExtension = typeof jestPresetExtensions[number];
+export type JestPresetExtension = (typeof jestPresetExtensions)[number];
 
 export function getPresetExt(tree: Tree): JestPresetExtension {
   const ext = jestPresetExtensions.find((ext) =>

packages/js/src/generators/release-version/release-version.ts

@@ -205,7 +205,7 @@ To fix this you will either need to add a package.json file at that location, or
               )}Resolving the current version for tag "${tag}" on ${registry}`
             );
             spinner.color =
-              color.spinnerColor as typeof colors[number]['spinnerColor'];
+              color.spinnerColor as (typeof colors)[number]['spinnerColor'];
             spinner.start();
 
             try {

packages/nx/release/changelog-renderer/index.ts

@@ -10,7 +10,7 @@ import type { ProjectGraph } from '../../src/config/project-graph';
 
 // axios types and values don't seem to match
 import _axios = require('axios');
-const axios = _axios as any as typeof _axios['default'];
+const axios = _axios as any as (typeof _axios)['default'];
 
 /**
  * The ChangelogRenderOptions are specific to each ChangelogRenderer implementation, and are taken

packages/nx/src/command-line/release/utils/github.ts

@@ -16,7 +16,7 @@ import { ReleaseVersion, noDiffInChangelogMessage } from './shared';
 
 // axios types and values don't seem to match
 import _axios = require('axios');
-const axios = _axios as any as typeof _axios['default'];
+const axios = _axios as any as (typeof _axios)['default'];
 
 export type RepoSlug = `${string}/${string}`;
 

packages/nx/src/command-line/release/version.ts

@@ -72,7 +72,7 @@ export interface ReleaseVersionGeneratorSchema {
   fallbackCurrentVersionResolver?: 'disk';
   firstRelease?: boolean;
   // auto means the existing prefix will be preserved, and is the default behavior
-  versionPrefix?: typeof validReleaseVersionPrefixes[number];
+  versionPrefix?: (typeof validReleaseVersionPrefixes)[number];
   skipLockFileUpdate?: boolean;
   installArgs?: string;
   installIgnoreScripts?: boolean;

packages/nx/src/command-line/show/project.ts

@@ -26,7 +26,7 @@ export async function showProjectHandler(
     );
   } else {
     const chalk = require('chalk') as typeof import('chalk');
-    const logIfExists = (label, key: keyof typeof node['data']) => {
+    const logIfExists = (label, key: keyof (typeof node)['data']) => {
       if (node.data[key]) {
         console.log(`${chalk.bold(label)}: ${node.data[key]}`);
       }

packages/nx/src/command-line/yargs-utils/shared-options.ts

@@ -247,7 +247,7 @@ const allOutputStyles = [
   'compact',
 ] as const;
 
-export type OutputStyle = typeof allOutputStyles[number];
+export type OutputStyle = (typeof allOutputStyles)[number];
 
 export function withOutputStyleOption(
   yargs: Argv,

packages/nx/src/utils/ab-testing.ts

@@ -40,7 +40,7 @@ const messageOptions = {
 } as const;
 
 export type MessageKey = keyof typeof messageOptions;
-export type MessageData = typeof messageOptions[MessageKey][number];
+export type MessageData = (typeof messageOptions)[MessageKey][number];
 
 export class PromptMessages {
   private selectedMessages = {};

packages/nx/src/utils/find-matching-projects.ts

@@ -7,7 +7,7 @@ const validPatternTypes = [
   'directory', // Pattern is based on the project's root directory
   'unlabeled', // Pattern was passed without specifying a type
 ] as const;
-type ProjectPatternType = typeof validPatternTypes[number];
+type ProjectPatternType = (typeof validPatternTypes)[number];
 
 interface ProjectPattern {
   // If true, the pattern is an exclude pattern