From d2e58dd387b8b0bbc791cccba98d701a8838adc6 Mon Sep 17 00:00:00 2001
From: Vlad Moroz <hi@vladmoroz.com>
Date: Mon, 21 Oct 2024 23:38:16 +0200
Subject: [PATCH] Clean up Tailwind config and docs styles (#746)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Michał Dudak <michal@mui.com>
---
 .../AlertDialogIntroduction/tailwind/index.js |   4 +-
 .../tailwind/index.js                         |  20 +-
 .../tailwind/index.js                         |  10 +-
 .../tailwind/index.js                         |   4 +-
 .../menu/MenuIntroduction/tailwind/index.js   |   6 +-
 .../tailwind/index.js                         |  12 +-
 .../tailwind/index.js                         |   4 +-
 .../tailwind/index.js                         |   8 +-
 .../tailwind/index.js                         |  10 +-
 .../app/(content)/components/[slug]/page.tsx  |   5 +-
 .../(content)/getting-started/[slug]/page.tsx |   5 +-
 docs/src/app/(content)/guides/[slug]/page.tsx |   5 +-
 docs/src/app/(content)/layout.tsx             |   1 +
 docs/src/app/experiments/[slug]/page.tsx      |   1 +
 docs/src/app/layout.tsx                       |   1 -
 docs/src/app/new/page.tsx                     |  10 +
 docs/src/app/new/styles.css                   |   3 +
 docs/src/app/not-found.tsx                    |   3 +-
 docs/src/app/page.tsx                         |   9 +-
 docs/src/app/playground/[slug]/page.tsx       |   1 +
 docs/src/components/content/Description.tsx   |   5 +-
 docs/src/design-system/IconButton.module.css  |   6 +-
 docs/src/design-system/IconButton.tsx         |   2 +-
 docs/src/design-system/IconLinkButton.tsx     |   4 +-
 docs/src/styles/components/select.css         |   4 +-
 docs/src/styles/components/text.css           |  18 +-
 .../styles.module.css => styles/content.css}  |  13 +-
 docs/src/styles/style.css                     |  12 +-
 docs/src/styles/utilities/align-items.css     |  19 --
 docs/src/styles/utilities/align-self.css      |  19 --
 docs/src/styles/utilities/display.css         |  31 --
 docs/src/styles/utilities/flex-direction.css  |  15 -
 docs/src/styles/utilities/gap.css             |  35 --
 docs/src/styles/utilities/height.css          |  35 --
 docs/src/styles/utilities/justify-content.css |  23 --
 docs/src/styles/utilities/margin.css          | 299 ------------------
 docs/src/styles/utilities/padding.css         | 299 ------------------
 docs/src/styles/utilities/position.css        |  15 -
 docs/tailwind.config.ts                       |  13 +-
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  62 ++++
 prettier.config.js                            |   1 +
 42 files changed, 159 insertions(+), 894 deletions(-)
 create mode 100644 docs/src/app/new/page.tsx
 create mode 100644 docs/src/app/new/styles.css
 rename docs/src/{app/(content)/styles.module.css => styles/content.css} (96%)
 delete mode 100644 docs/src/styles/utilities/align-items.css
 delete mode 100644 docs/src/styles/utilities/align-self.css
 delete mode 100644 docs/src/styles/utilities/display.css
 delete mode 100644 docs/src/styles/utilities/flex-direction.css
 delete mode 100644 docs/src/styles/utilities/gap.css
 delete mode 100644 docs/src/styles/utilities/height.css
 delete mode 100644 docs/src/styles/utilities/justify-content.css
 delete mode 100644 docs/src/styles/utilities/margin.css
 delete mode 100644 docs/src/styles/utilities/padding.css
 delete mode 100644 docs/src/styles/utilities/position.css

diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js b/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js
index a01762d0d8..412f188097 100644
--- a/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js
+++ b/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js
@@ -41,7 +41,7 @@ function Controls(props) {
   return (
     <div
       {...props}
-      className="flex flex-row-reverse bg-slate-100 dark:bg-slate-800 gap-2 p-4 mt-8 -mx-4 -mb-4"
+      className="-mx-4 -mb-4 mt-8 flex flex-row-reverse gap-2 bg-slate-100 p-4 dark:bg-slate-800"
     />
   );
 }
@@ -67,7 +67,7 @@ function Backdrop(props) {
   return (
     <AlertDialog.Backdrop
       {...props}
-      className="bg-black/35 fixed inset-0 backdrop-blur-sm z-[2000]"
+      className="fixed inset-0 z-[2000] bg-black/35 backdrop-blur-sm"
     />
   );
 }
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
index a4e58b231c..96ce6a1dce 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
@@ -19,7 +19,7 @@ function Label(props) {
   return (
     // eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/no-noninteractive-element-interactions
     <label
-      className="flex gap-2 mb-2"
+      className="mb-2 flex gap-2"
       onMouseDown={(event) => event.preventDefault()}
       {...props}
     />
@@ -34,12 +34,12 @@ export default function UnstyledCheckboxIntroduction() {
     <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex', gap: 12 }}>
       <Field.Root>
         <CheckboxGroup.Root defaultValue={['red']}>
-          <Field.Label className="font-bold text-lg mb-2 flex">Colors</Field.Label>
+          <Field.Label className="mb-2 flex text-lg font-bold">Colors</Field.Label>
           <div style={{ display: 'flex', flexDirection: 'column' }}>
             <Label>
               <Checkbox name="red">
                 <Indicator>
-                  <CheckIcon className="w-full h-full" />
+                  <CheckIcon className="h-full w-full" />
                 </Indicator>
               </Checkbox>
               Red
@@ -47,7 +47,7 @@ export default function UnstyledCheckboxIntroduction() {
             <Label>
               <Checkbox name="green">
                 <Indicator>
-                  <CheckIcon className="w-full h-full" />
+                  <CheckIcon className="h-full w-full" />
                 </Indicator>
               </Checkbox>
               Green
@@ -55,7 +55,7 @@ export default function UnstyledCheckboxIntroduction() {
             <Label>
               <Checkbox name="blue">
                 <Indicator>
-                  <CheckIcon className="w-full h-full" />
+                  <CheckIcon className="h-full w-full" />
                 </Indicator>
               </Checkbox>
               Blue
@@ -74,11 +74,11 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'w-6 h-6 p-0 rounded-md',
+          'h-6 w-6 rounded-md p-0',
           'border-2 border-solid border-purple-500',
-          'outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 focus-visible:ring-opacity-60',
+          'outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-opacity-60 focus-visible:ring-offset-2',
           'transition-colors duration-150',
-          state.disabled && 'opacity-40 cursor-not-allowed',
+          state.disabled && 'cursor-not-allowed opacity-40',
           state.checked && 'bg-purple-500',
           !state.checked && 'bg-transparent',
           typeof props.className === 'function'
@@ -104,14 +104,14 @@ const Indicator = React.forwardRef(function Indicator(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'h-full inline-block invisible data-[checked]:visible text-gray-100',
+          'invisible inline-block h-full text-gray-100 data-[checked]:visible',
           typeof props.className === 'function'
             ? props.className(state)
             : props.className,
         )
       }
     >
-      <CheckIcon className="w-full h-full" />
+      <CheckIcon className="h-full w-full" />
     </BaseCheckbox.Indicator>
   );
 });
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
index 42197c24eb..2f5f195c79 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
@@ -46,11 +46,11 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'w-6 h-6 p-0 rounded-md',
+          'h-6 w-6 rounded-md p-0',
           'border-2 border-solid border-purple-500',
-          'outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 focus-visible:ring-opacity-60',
+          'outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-opacity-60 focus-visible:ring-offset-2',
           'transition-colors duration-150',
-          state.disabled && 'opacity-40 cursor-not-allowed',
+          state.disabled && 'cursor-not-allowed opacity-40',
           state.checked && 'bg-purple-500',
           !state.checked && 'bg-transparent',
           typeof props.className === 'function'
@@ -76,14 +76,14 @@ const Indicator = React.forwardRef(function Indicator(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'h-full inline-block invisible data-[checked]:visible text-gray-100',
+          'invisible inline-block h-full text-gray-100 data-[checked]:visible',
           typeof props.className === 'function'
             ? props.className(state)
             : props.className,
         )
       }
     >
-      <CheckIcon className="w-full h-full" />
+      <CheckIcon className="h-full w-full" />
     </BaseCheckbox.Indicator>
   );
 });
diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js b/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js
index 988a1e274b..cc71638aa3 100644
--- a/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js
+++ b/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js
@@ -48,7 +48,7 @@ function Controls(props) {
   return (
     <div
       {...props}
-      className="flex flex-row-reverse bg-slate-100 dark:bg-slate-800 gap-2 p-4 mt-8 -mx-4 -mb-4"
+      className="-mx-4 -mb-4 mt-8 flex flex-row-reverse gap-2 bg-slate-100 p-4 dark:bg-slate-800"
     />
   );
 }
@@ -74,7 +74,7 @@ function Backdrop(props) {
   return (
     <Dialog.Backdrop
       {...props}
-      className="bg-black/35 fixed inset-0 backdrop-blur-sm z-[2000]"
+      className="fixed inset-0 z-[2000] bg-black/35 backdrop-blur-sm"
     />
   );
 }
diff --git a/docs/data/components/menu/MenuIntroduction/tailwind/index.js b/docs/data/components/menu/MenuIntroduction/tailwind/index.js
index 74361643e0..a01ccbcd12 100644
--- a/docs/data/components/menu/MenuIntroduction/tailwind/index.js
+++ b/docs/data/components/menu/MenuIntroduction/tailwind/index.js
@@ -73,7 +73,7 @@ const MenuPositioner = React.forwardRef((props, ref) => {
   return (
     <Menu.Positioner
       ref={ref}
-      className="focus-visible:outline-0 closed:pointer-events-none"
+      className="closed:pointer-events-none focus-visible:outline-0"
       {...props}
     />
   );
@@ -83,7 +83,7 @@ const MenuSeparator = React.forwardRef((props, ref) => {
   return (
     <Menu.Separator
       ref={ref}
-      className="border-t border-solid border-slate-200 dark:border-slate-700 my-2"
+      className="my-2 border-t border-solid border-slate-200 dark:border-slate-700"
       {...props}
     />
   );
@@ -93,7 +93,7 @@ const MenuGroupLabel = React.forwardRef((props, ref) => {
   return (
     <Menu.GroupLabel
       ref={ref}
-      className="text-xs font-sans font-semibold text-slate-700 dark:text-slate-200 uppercase p-2 select-none"
+      className="select-none p-2 font-sans text-xs font-semibold uppercase text-slate-700 dark:text-slate-200"
       {...props}
     />
   );
diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js
index 465c128cbe..2b012f5599 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js
+++ b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js
@@ -69,10 +69,10 @@ const NumberFieldGroup = React.forwardRef(function NumberFieldGroup(props, ref)
       ref={ref}
       className={(state) =>
         classNames(
-          'flex items-center mt-1 rounded border border-solid border-gray-300 dark:border-gray-700',
+          'mt-1 flex items-center rounded border border-solid border-gray-300 dark:border-gray-700',
           'overflow-hidden',
-          'focus-within:ring-2 focus-within:ring-blue-200 focus-within:border-blue-500 dark:focus-within:ring-blue-500/50 dark:focus-within:border-blue-400/80',
-          state.disabled && 'opacity-40 cursor-not-allowed',
+          'focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-200 dark:focus-within:border-blue-400/80 dark:focus-within:ring-blue-500/50',
+          state.disabled && 'cursor-not-allowed opacity-40',
           typeof props.className === 'function'
             ? props.className(state)
             : props.className,
@@ -97,7 +97,7 @@ const NumberFieldScrubArea = React.forwardRef(
         ref={ref}
         className={(state) =>
           classNames(
-            'cursor-ns-resize font-bold select-none',
+            'cursor-ns-resize select-none font-bold',
             typeof props.className === 'function'
               ? props.className(state)
               : props.className,
@@ -154,8 +154,8 @@ const NumberFieldInput = React.forwardRef(function NumberFieldInput(props, ref)
           'border border-gray-200 dark:border-gray-700',
           'text-gray-800 dark:text-gray-300',
           'shadow',
-          'overflow-hidden max-w-[150px]',
-          'focus:outline-none focus:z-10',
+          'max-w-[150px] overflow-hidden',
+          'focus:z-10 focus:outline-none',
           'focus:border-blue-600 dark:focus:border-blue-400',
           typeof props.className === 'function'
             ? props.className(state)
diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js
index 41cc11ec57..487134ad41 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js
@@ -50,7 +50,7 @@ const ProgressTrack = React.forwardRef(function ProgressTrack(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'relative w-full h-1 rounded-full bg-gray-400 flex overflow-hidden',
+          'relative flex h-1 w-full overflow-hidden rounded-full bg-gray-400',
           typeof props.className === 'function'
             ? props.className(state)
             : props.className,
@@ -74,7 +74,7 @@ const ProgressIndicator = React.forwardRef(function ProgressIndicator(props, ref
       ref={ref}
       className={(state) =>
         classNames(
-          'bg-blue-500 dark:bg-blue-400 rounded-[inherit]',
+          'rounded-[inherit] bg-blue-500 dark:bg-blue-400',
           typeof props.className === 'function'
             ? props.className(state)
             : props.className,
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
index d1f6449969..46587a381d 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
@@ -45,7 +45,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'font-sans relative w-full items-center grid grid-cols-2 gap-4',
+          'relative grid w-full grid-cols-2 items-center gap-4 font-sans',
           typeof props.className === 'function'
             ? props.className(state)
             : props.className,
@@ -93,7 +93,7 @@ const SliderControl = React.forwardRef(function SliderControl(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'col-span-2 relative flex items-center w-full h-4',
+          'relative col-span-2 flex h-4 w-full items-center',
           state.disabled && 'cursor-not-allowed',
           typeof props.className === 'function'
             ? props.className(state)
@@ -118,7 +118,7 @@ const SliderTrack = React.forwardRef(function SliderTrack(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'w-full h-0.5 rounded-full bg-gray-400 touch-none dark:bg-gray-700',
+          'h-0.5 w-full touch-none rounded-full bg-gray-400 dark:bg-gray-700',
           typeof props.className === 'function'
             ? props.className(state)
             : props.className,
@@ -142,7 +142,7 @@ const SliderThumb = React.forwardRef(function SliderThumb(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'w-4 h-4 box-border rounded-[50%] bg-black touch-none focus-visible:outline focus-visible:outline-black focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-gray-100 dark:focus-visible:outline-gray-300 dark:focus-visible:outline-1 dark:focus-visible:outline-offset-[3px]',
+          'box-border h-4 w-4 touch-none rounded-[50%] bg-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black dark:bg-gray-100 dark:focus-visible:outline-1 dark:focus-visible:outline-offset-[3px] dark:focus-visible:outline-gray-300',
           state.dragging && 'bg-pink-400',
           state.disabled && 'bg-gray-400',
           typeof props.className === 'function'
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
index fe9fc56258..86cff08972 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
@@ -36,7 +36,7 @@ const TabsList = React.forwardRef((props, ref) => {
     <Tabs.List
       ref={ref}
       className={clsx(
-        'mb-4 rounded-xl bg-purple-500 flex font-sans items-center justify-center content-between min-w-tabs-list shadow-lg',
+        'min-w-tabs-list mb-4 flex content-between items-center justify-center rounded-xl bg-purple-500 font-sans shadow-lg',
         className,
       )}
       {...other}
@@ -61,11 +61,11 @@ const Tab = React.forwardRef((props, ref) => {
         clsx(
           `font-sans ${
             selected
-              ? 'text-purple-500 bg-white'
-              : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              ? 'bg-white text-purple-500'
+              : 'bg-transparent text-white hover:bg-purple-400 focus:text-white'
           } ${
             disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
-          } text-sm leading-[1.3] font-semibold w-full py-2.5 px-3 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+          } focus:shadow-outline-purple-light m-1.5 flex w-full justify-center rounded-md border-0 px-3 py-2.5 text-sm font-semibold leading-[1.3] focus:outline-0`,
           className,
         )
       }
@@ -86,7 +86,7 @@ const TabPanel = React.forwardRef((props, ref) => {
     <Tabs.Panel
       ref={ref}
       className={clsx(
-        'py-5 px-3 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 rounded-xl opacity-60 w-full font-sans text-sm',
+        'w-full rounded-xl border border-solid border-slate-200 bg-white px-3 py-5 font-sans text-sm opacity-60 dark:border-slate-700 dark:bg-slate-900',
         className,
       )}
       {...other}
diff --git a/docs/src/app/(content)/components/[slug]/page.tsx b/docs/src/app/(content)/components/[slug]/page.tsx
index ee50eb0641..deb9a2a71b 100644
--- a/docs/src/app/(content)/components/[slug]/page.tsx
+++ b/docs/src/app/(content)/components/[slug]/page.tsx
@@ -17,7 +17,6 @@ import {
 } from 'docs/src/components/ApiReference';
 import { DemoLoader, DemoLoaderProps } from 'docs/src/components/demo/DemoLoader';
 import { getApiReferenceData } from './getApiReferenceData';
-import classes from '../../styles.module.css';
 
 const CATEGORY_SEGMENT = 'components';
 
@@ -69,11 +68,11 @@ export default async function ComponentPage(props: Props) {
 
   return (
     <React.Fragment>
-      <main className={classes.content}>
+      <main className="Content">
         <MDXContent components={{ ...allComponents }} />
         <ApiReference componentsApi={componentsApi} />
         <div>
-          <div className={classes.editLink}>
+          <div className="EditLink">
             <EditPageGithubLink category={CATEGORY_SEGMENT} slug={componentName} />
           </div>
           <div>
diff --git a/docs/src/app/(content)/getting-started/[slug]/page.tsx b/docs/src/app/(content)/getting-started/[slug]/page.tsx
index 496cbe0ed3..b792fee430 100644
--- a/docs/src/app/(content)/getting-started/[slug]/page.tsx
+++ b/docs/src/app/(content)/getting-started/[slug]/page.tsx
@@ -10,7 +10,6 @@ import routes, { getSlugs } from 'docs/data/pages';
 import { Description } from 'docs/src/components/content/Description';
 import { SiblingPageLinks } from 'docs/src/components/SiblingPageLinks';
 import { EditPageGithubLink } from 'docs/src/components/EditPageGithubLink';
-import classes from '../../styles.module.css';
 
 const CATEGORY_SEGMENT = 'getting-started';
 
@@ -39,10 +38,10 @@ export default async function DocsPage(props: Props) {
 
   return (
     <React.Fragment>
-      <main className={classes.content}>
+      <main className="Content">
         <MDXContent components={allComponents} />
         <div>
-          <div className={classes.editLink}>
+          <div className="EditLink">
             <EditPageGithubLink category={CATEGORY_SEGMENT} slug={slug} />
           </div>
           <div>
diff --git a/docs/src/app/(content)/guides/[slug]/page.tsx b/docs/src/app/(content)/guides/[slug]/page.tsx
index 9848b738e7..3833b88fa5 100644
--- a/docs/src/app/(content)/guides/[slug]/page.tsx
+++ b/docs/src/app/(content)/guides/[slug]/page.tsx
@@ -10,7 +10,6 @@ import routes, { getSlugs } from 'docs/data/pages';
 import { Description } from 'docs/src/components/content/Description';
 import { SiblingPageLinks } from 'docs/src/components/SiblingPageLinks';
 import { EditPageGithubLink } from 'docs/src/components/EditPageGithubLink';
-import classes from '../../styles.module.css';
 
 const CATEGORY_SEGMENT = 'guides';
 
@@ -39,10 +38,10 @@ export default async function DocsPage(props: Props) {
 
   return (
     <React.Fragment>
-      <main className={classes.content}>
+      <main className="Content">
         <MDXContent components={allComponents} />
         <div>
-          <div className={classes.editLink}>
+          <div className="EditLink">
             <EditPageGithubLink category={CATEGORY_SEGMENT} slug={slug} />
           </div>
           <div>
diff --git a/docs/src/app/(content)/layout.tsx b/docs/src/app/(content)/layout.tsx
index 92a3130a7c..8ce95c3340 100644
--- a/docs/src/app/(content)/layout.tsx
+++ b/docs/src/app/(content)/layout.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { AppBar } from 'docs/src/components/AppBar';
 import { Navigation } from 'docs/src/components/Navigation';
 import routes from 'docs/data/pages';
+import '../../styles/style.css';
 
 export default function Layout({ children }: React.PropsWithChildren<{}>) {
   return (
diff --git a/docs/src/app/experiments/[slug]/page.tsx b/docs/src/app/experiments/[slug]/page.tsx
index 42d3a8bcd0..4d852d6ab1 100644
--- a/docs/src/app/experiments/[slug]/page.tsx
+++ b/docs/src/app/experiments/[slug]/page.tsx
@@ -4,6 +4,7 @@ import { notFound } from 'next/navigation';
 import { type Dirent } from 'node:fs';
 import { basename, extname } from 'node:path';
 import { readdir } from 'node:fs/promises';
+import '../../../styles/style.css';
 
 interface Props {
   params: {
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
index 92b9549341..de84f9c32b 100644
--- a/docs/src/app/layout.tsx
+++ b/docs/src/app/layout.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Metadata } from 'next';
 import { GoogleAnalytics } from 'docs/src/components/GoogleAnalytics';
 import { DocsProviders } from './DocsProviders';
-import '../styles/style.css';
 
 interface Props {
   children: React.ReactNode;
diff --git a/docs/src/app/new/page.tsx b/docs/src/app/new/page.tsx
new file mode 100644
index 0000000000..06888bc2c0
--- /dev/null
+++ b/docs/src/app/new/page.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import './styles.css';
+
+export default function Page() {
+  return (
+    <div className="flex h-dvh w-dvw items-center justify-center">
+      Here is to the new beginnings.
+    </div>
+  );
+}
diff --git a/docs/src/app/new/styles.css b/docs/src/app/new/styles.css
new file mode 100644
index 0000000000..fb56de2c61
--- /dev/null
+++ b/docs/src/app/new/styles.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind utilities;
+@tailwind components;
diff --git a/docs/src/app/not-found.tsx b/docs/src/app/not-found.tsx
index bf4be8e584..e58ea92a2f 100644
--- a/docs/src/app/not-found.tsx
+++ b/docs/src/app/not-found.tsx
@@ -3,14 +3,13 @@ import * as React from 'react';
 import { AppBar } from 'docs/src/components/AppBar';
 import { Navigation } from 'docs/src/components/Navigation';
 import routes from 'docs/data/pages';
-import classes from './(content)/styles.module.css';
 
 export default function NotFound() {
   return (
     <React.Fragment>
       <AppBar />
       <Navigation routes={routes} />
-      <main className={classes.content}>
+      <main>
         <h1>Page not found</h1>
       </main>
     </React.Fragment>
diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
index a4e1510583..92cd2d41c9 100644
--- a/docs/src/app/page.tsx
+++ b/docs/src/app/page.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Metadata } from 'next';
 import Link from 'next/link';
 import { BaseUIIcon } from 'docs/src/icons/BaseUI';
+import '../styles/style.css';
 
 export default function Home() {
   return (
@@ -18,16 +19,16 @@ export default function Home() {
         maxWidth: 500,
       }}
     >
-      <div className="mb-8">
+      <div className="mb-10">
         <BaseUIIcon />
       </div>
-      <h1 className="Text mb-2 size-7">
+      <h1 className="Text s-7 mb-2">
         Unstyled UI components for building accessible web apps and design systems.
       </h1>
-      <p className="Text color-gray weight-1 mb-8 size-5">
+      <p className="Text color-gray weight-1 s-5 mb-10">
         From the creators of Radix, Floating UI, and MUI.
       </p>
-      <Link className="Link Text size-4" href="/getting-started/overview">
+      <Link className="Link Text s-4" href="/getting-started/overview">
         Documentation
       </Link>
     </div>
diff --git a/docs/src/app/playground/[slug]/page.tsx b/docs/src/app/playground/[slug]/page.tsx
index f42677aa3c..726058272e 100644
--- a/docs/src/app/playground/[slug]/page.tsx
+++ b/docs/src/app/playground/[slug]/page.tsx
@@ -4,6 +4,7 @@ import { notFound } from 'next/navigation';
 import { type Dirent } from 'node:fs';
 import { basename, extname } from 'node:path';
 import { readdir } from 'node:fs/promises';
+import '../../../styles/style.css';
 
 interface Props {
   params: {
diff --git a/docs/src/components/content/Description.tsx b/docs/src/components/content/Description.tsx
index 2a177db57c..fea854068f 100644
--- a/docs/src/components/content/Description.tsx
+++ b/docs/src/components/content/Description.tsx
@@ -10,10 +10,7 @@ export function Description(props: DescriptionProps) {
   const { text, children, ...other } = props;
 
   return (
-    <p
-      {...other}
-      className={clsx('Text size-5 weight-1 color-gray', classes.root, props.className)}
-    >
+    <p {...other} className={clsx('Text s-5 weight-1 color-gray', classes.root, props.className)}>
       {text ?? children}
     </p>
   );
diff --git a/docs/src/design-system/IconButton.module.css b/docs/src/design-system/IconButton.module.css
index 336d38d309..281d9ed082 100644
--- a/docs/src/design-system/IconButton.module.css
+++ b/docs/src/design-system/IconButton.module.css
@@ -28,17 +28,17 @@
   }
 }
 
-.size-1 {
+.s-1 {
   width: var(--space-6);
   height: var(--space-6);
 }
 
-.size-2 {
+.s-2 {
   width: var(--space-7);
   height: var(--space-7);
 }
 
-.size-3 {
+.s-3 {
   width: var(--space-8);
   height: var(--space-8);
 }
diff --git a/docs/src/design-system/IconButton.tsx b/docs/src/design-system/IconButton.tsx
index 848f749abb..080eb3a3cd 100644
--- a/docs/src/design-system/IconButton.tsx
+++ b/docs/src/design-system/IconButton.tsx
@@ -10,7 +10,7 @@ export function IconButton(props: IconButton.Props) {
       type="button"
       aria-label={label}
       {...other}
-      className={clsx(classes.root, classes[`size-${size}`], props.className)}
+      className={clsx(classes.root, classes[`s-${size}`], props.className)}
     />
   );
 
diff --git a/docs/src/design-system/IconLinkButton.tsx b/docs/src/design-system/IconLinkButton.tsx
index 082d776873..f7e29784c0 100644
--- a/docs/src/design-system/IconLinkButton.tsx
+++ b/docs/src/design-system/IconLinkButton.tsx
@@ -11,13 +11,13 @@ export function IconLinkButton(props: IconLinkButton.Props) {
     <Link
       aria-label={label}
       {...(other as React.ComponentPropsWithoutRef<typeof Link>)}
-      className={clsx(classes.root, classes[`size-${size}`], props.className)}
+      className={clsx(classes.root, classes[`s-${size}`], props.className)}
     />
   ) : (
     <a
       aria-label={label}
       {...(other as React.ComponentPropsWithoutRef<'a'>)}
-      className={clsx(classes.root, classes[`size-${size}`], props.className)}
+      className={clsx(classes.root, classes[`s-${size}`], props.className)}
     />
   );
 
diff --git a/docs/src/styles/components/select.css b/docs/src/styles/components/select.css
index 1ab5a9fc12..f6f8708d44 100644
--- a/docs/src/styles/components/select.css
+++ b/docs/src/styles/components/select.css
@@ -50,14 +50,14 @@
   }
 }
 
-.SelectTrigger.size-1 {
+.SelectTrigger.s-1 {
   height: var(--space-6);
   padding-left: var(--space-2);
   padding-right: var(--space-5);
   font-size: var(--fs-2);
 }
 
-.SelectTrigger.size-2 {
+.SelectTrigger.s-2 {
   height: var(--space-7);
   padding-left: var(--space-3);
   padding-right: var(--space-6);
diff --git a/docs/src/styles/components/text.css b/docs/src/styles/components/text.css
index 643646c0fc..afd5b07002 100644
--- a/docs/src/styles/components/text.css
+++ b/docs/src/styles/components/text.css
@@ -6,48 +6,48 @@
   scroll-margin-top: 80px;
 }
 
-.Text.size-1 {
+.Text.s-1 {
   font-size: var(--fs-1);
   line-height: 1;
 }
 
-.Text.size-2 {
+.Text.s-2 {
   font-size: var(--fs-2);
   line-height: 1;
 }
 
-.Text.size-3 {
+.Text.s-3 {
   font-size: var(--fs-3);
   line-height: 20px;
 }
 
-.Text.size-4 {
+.Text.s-4 {
   font-size: var(--fs-4);
   line-height: 23px;
 }
 
-.Text.size-5 {
+.Text.s-5 {
   font-size: var(--fs-5);
   line-height: 23px;
   font-weight: 500;
   letter-spacing: -0.012em;
 }
 
-.Text.size-6 {
+.Text.s-6 {
   font-size: var(--fs-6);
   line-height: 24px;
   font-weight: 500;
   letter-spacing: -0.018em;
 }
 
-.Text.size-7 {
+.Text.s-7 {
   font-size: var(--fs-7);
   line-height: 28px;
   font-weight: 500;
   letter-spacing: -0.031em;
 }
 
-.Text.size-8 {
+.Text.s-8 {
   font-size: var(--fs-8);
   line-height: 37px;
   font-weight: 500;
@@ -55,7 +55,7 @@
   text-indent: -1.1px;
 }
 
-.Text.size-9 {
+.Text.s-9 {
   font-size: var(--fs-9);
   line-height: 1;
   font-weight: 500;
diff --git a/docs/src/app/(content)/styles.module.css b/docs/src/styles/content.css
similarity index 96%
rename from docs/src/app/(content)/styles.module.css
rename to docs/src/styles/content.css
index 81380b5dc4..538d67f76b 100644
--- a/docs/src/app/(content)/styles.module.css
+++ b/docs/src/styles/content.css
@@ -1,5 +1,6 @@
-@layer mdx {
-  .content {
+@layer components {
+  .Content {
+    box-sizing: content-box;
     max-width: 714px;
     padding-top: var(--space-9);
     padding-left: var(--space-6);
@@ -197,9 +198,9 @@
       }
     }
   }
-}
 
-.editLink {
-  padding-top: var(--space-9);
-  padding-bottom: var(--space-9);
+  .EditLink {
+    padding-top: var(--space-9);
+    padding-bottom: var(--space-9);
+  }
 }
diff --git a/docs/src/styles/style.css b/docs/src/styles/style.css
index 3705dfa255..50b7c8a819 100644
--- a/docs/src/styles/style.css
+++ b/docs/src/styles/style.css
@@ -3,6 +3,7 @@
 @import 'shiki.css';
 
 @import 'demo-colors.css';
+@import 'content.css';
 
 @import 'components/badge.css';
 @import 'components/callout.css';
@@ -23,17 +24,6 @@
 @import 'components/textarea.css';
 @import 'components/toggle.css';
 
-@import 'utilities/align-items.css';
-@import 'utilities/align-self.css';
-@import 'utilities/display.css';
-@import 'utilities/flex-direction.css';
-@import 'utilities/gap.css';
-@import 'utilities/height.css';
-@import 'utilities/justify-content.css';
-@import 'utilities/margin.css';
-@import 'utilities/padding.css';
-@import 'utilities/position.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/docs/src/styles/utilities/align-items.css b/docs/src/styles/utilities/align-items.css
deleted file mode 100644
index c8a065bdf9..0000000000
--- a/docs/src/styles/utilities/align-items.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.ai-center {
-  align-items: center;
-}
-
-.ai-start {
-  align-items: start;
-}
-
-.ai-end {
-  align-items: end;
-}
-
-.ai-stretch {
-  align-items: stretch;
-}
-
-.ai-baseline {
-  align-items: baseline;
-}
diff --git a/docs/src/styles/utilities/align-self.css b/docs/src/styles/utilities/align-self.css
deleted file mode 100644
index 3dd57fa89f..0000000000
--- a/docs/src/styles/utilities/align-self.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.as-center {
-  align-self: center;
-}
-
-.as-start {
-  align-self: start;
-}
-
-.as-end {
-  align-self: end;
-}
-
-.as-stretch {
-  align-self: stretch;
-}
-
-.as-baseline {
-  align-self: baseline;
-}
diff --git a/docs/src/styles/utilities/display.css b/docs/src/styles/utilities/display.css
deleted file mode 100644
index 27978ddfcb..0000000000
--- a/docs/src/styles/utilities/display.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.d-f {
-  display: flex;
-}
-
-.d-if {
-  display: inline-flex;
-}
-
-.d-b {
-  display: block;
-}
-
-.d-i {
-  display: inline;
-}
-
-.d-ib {
-  display: inline-block;
-}
-
-.d-g {
-  display: grid;
-}
-
-.d-ig {
-  display: inline-grid;
-}
-
-.d-n {
-  display: none;
-}
diff --git a/docs/src/styles/utilities/flex-direction.css b/docs/src/styles/utilities/flex-direction.css
deleted file mode 100644
index ef622da521..0000000000
--- a/docs/src/styles/utilities/flex-direction.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.fd-row {
-  flex-direction: row;
-}
-
-.fd-rr {
-  flex-direction: row-reverse;
-}
-
-.fd-column {
-  flex-direction: column;
-}
-
-.fd-cr {
-  flex-direction: column-reverse;
-}
diff --git a/docs/src/styles/utilities/gap.css b/docs/src/styles/utilities/gap.css
deleted file mode 100644
index 49a21aaf34..0000000000
--- a/docs/src/styles/utilities/gap.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.g-1 {
-  gap: var(--space-1);
-}
-
-.g-2 {
-  gap: var(--space-2);
-}
-
-.g-3 {
-  gap: var(--space-3);
-}
-
-.g-4 {
-  gap: var(--space-4);
-}
-
-.g-5 {
-  gap: var(--space-5);
-}
-
-.g-6 {
-  gap: var(--space-6);
-}
-
-.g-7 {
-  gap: var(--space-7);
-}
-
-.g-8 {
-  gap: var(--space-8);
-}
-
-.g-9 {
-  gap: var(--space-9);
-}
diff --git a/docs/src/styles/utilities/height.css b/docs/src/styles/utilities/height.css
deleted file mode 100644
index ac781a0543..0000000000
--- a/docs/src/styles/utilities/height.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.h-1 {
-  height: var(--space-1);
-}
-
-.h-2 {
-  height: var(--space-2);
-}
-
-.h-3 {
-  height: var(--space-3);
-}
-
-.h-4 {
-  height: var(--space-4);
-}
-
-.h-5 {
-  height: var(--space-5);
-}
-
-.h-6 {
-  height: var(--space-6);
-}
-
-.h-7 {
-  height: var(--space-7);
-}
-
-.h-8 {
-  height: var(--space-8);
-}
-
-.h-9 {
-  height: var(--space-9);
-}
diff --git a/docs/src/styles/utilities/justify-content.css b/docs/src/styles/utilities/justify-content.css
deleted file mode 100644
index d41ba486d6..0000000000
--- a/docs/src/styles/utilities/justify-content.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.jc-center {
-  justify-content: center;
-}
-
-.jc-start {
-  justify-content: start;
-}
-
-.jc-end {
-  justify-content: end;
-}
-
-.jc-sb {
-  justify-content: space-between;
-}
-
-.jc-sa {
-  justify-content: space-around;
-}
-
-.jc-se {
-  justify-content: space-evenly;
-}
diff --git a/docs/src/styles/utilities/margin.css b/docs/src/styles/utilities/margin.css
deleted file mode 100644
index a84e4ee60f..0000000000
--- a/docs/src/styles/utilities/margin.css
+++ /dev/null
@@ -1,299 +0,0 @@
-.m-0 {
-  margin: 0;
-}
-
-.m-1 {
-  margin: var(--space-1);
-}
-
-.m-2 {
-  margin: var(--space-2);
-}
-
-.m-3 {
-  margin: var(--space-3);
-}
-
-.m-4 {
-  margin: var(--space-4);
-}
-
-.m-5 {
-  margin: var(--space-5);
-}
-
-.m-6 {
-  margin: var(--space-6);
-}
-
-.m-7 {
-  margin: var(--space-7);
-}
-
-.m-8 {
-  margin: var(--space-8);
-}
-
-.m-9 {
-  margin: var(--space-9);
-}
-
-.mt-0 {
-  margin-top: 0;
-}
-
-.mt-1 {
-  margin-top: var(--space-1);
-}
-
-.mt-2 {
-  margin-top: var(--space-2);
-}
-
-.mt-3 {
-  margin-top: var(--space-3);
-}
-
-.mt-4 {
-  margin-top: var(--space-4);
-}
-
-.mt-5 {
-  margin-top: var(--space-5);
-}
-
-.mt-6 {
-  margin-top: var(--space-6);
-}
-
-.mt-7 {
-  margin-top: var(--space-7);
-}
-
-.mt-8 {
-  margin-top: var(--space-8);
-}
-
-.mt-9 {
-  margin-top: var(--space-9);
-}
-
-.mr-0 {
-  margin-right: 0;
-}
-
-.mr-1 {
-  margin-right: var(--space-1);
-}
-
-.mr-2 {
-  margin-right: var(--space-2);
-}
-
-.mr-3 {
-  margin-right: var(--space-3);
-}
-
-.mr-4 {
-  margin-right: var(--space-4);
-}
-
-.mr-5 {
-  margin-right: var(--space-5);
-}
-
-.mr-6 {
-  margin-right: var(--space-6);
-}
-
-.mr-7 {
-  margin-right: var(--space-7);
-}
-
-.mr-8 {
-  margin-right: var(--space-8);
-}
-
-.mr-9 {
-  margin-right: var(--space-9);
-}
-
-.mb-0 {
-  margin-bottom: 0;
-}
-
-.mb-1 {
-  margin-bottom: var(--space-1);
-}
-
-.mb-2 {
-  margin-bottom: var(--space-2);
-}
-
-.mb-3 {
-  margin-bottom: var(--space-3);
-}
-
-.mb-4 {
-  margin-bottom: var(--space-4);
-}
-
-.mb-5 {
-  margin-bottom: var(--space-5);
-}
-
-.mb-6 {
-  margin-bottom: var(--space-6);
-}
-
-.mb-7 {
-  margin-bottom: var(--space-7);
-}
-
-.mb-8 {
-  margin-bottom: var(--space-8);
-}
-
-.mb-9 {
-  margin-bottom: var(--space-9);
-}
-
-.ml-0 {
-  margin-left: 0;
-}
-
-.ml-1 {
-  margin-left: var(--space-1);
-}
-
-.ml-2 {
-  margin-left: var(--space-2);
-}
-
-.ml-3 {
-  margin-left: var(--space-3);
-}
-
-.ml-4 {
-  margin-left: var(--space-4);
-}
-
-.ml-5 {
-  margin-left: var(--space-5);
-}
-
-.ml-6 {
-  margin-left: var(--space-6);
-}
-
-.ml-7 {
-  margin-left: var(--space-7);
-}
-
-.ml-8 {
-  margin-left: var(--space-8);
-}
-
-.ml-9 {
-  margin-left: var(--space-9);
-}
-
-.mx-0 {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.mx-1 {
-  margin-left: var(--space-1);
-  margin-right: var(--space-1);
-}
-
-.mx-2 {
-  margin-left: var(--space-2);
-  margin-right: var(--space-2);
-}
-
-.mx-3 {
-  margin-left: var(--space-3);
-  margin-right: var(--space-3);
-}
-
-.mx-4 {
-  margin-left: var(--space-4);
-  margin-right: var(--space-4);
-}
-
-.mx-5 {
-  margin-left: var(--space-5);
-  margin-right: var(--space-5);
-}
-
-.mx-6 {
-  margin-left: var(--space-6);
-  margin-right: var(--space-6);
-}
-
-.mx-7 {
-  margin-left: var(--space-7);
-  margin-right: var(--space-7);
-}
-
-.mx-8 {
-  margin-left: var(--space-8);
-  margin-right: var(--space-8);
-}
-
-.mx-9 {
-  margin-left: var(--space-9);
-  margin-right: var(--space-8);
-}
-
-.my-0 {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.my-1 {
-  margin-top: var(--space-1);
-  margin-bottom: var(--space-1);
-}
-
-.my-2 {
-  margin-top: var(--space-2);
-  margin-bottom: var(--space-2);
-}
-
-.my-3 {
-  margin-top: var(--space-3);
-  margin-bottom: var(--space-3);
-}
-
-.my-4 {
-  margin-top: var(--space-4);
-  margin-bottom: var(--space-4);
-}
-
-.my-5 {
-  margin-top: var(--space-5);
-  margin-bottom: var(--space-5);
-}
-
-.my-6 {
-  margin-top: var(--space-6);
-  margin-bottom: var(--space-6);
-}
-
-.my-7 {
-  margin-top: var(--space-7);
-  margin-bottom: var(--space-7);
-}
-
-.my-8 {
-  margin-top: var(--space-8);
-  margin-bottom: var(--space-8);
-}
-
-.my-9 {
-  margin-top: var(--space-9);
-  margin-bottom: var(--space-9);
-}
diff --git a/docs/src/styles/utilities/padding.css b/docs/src/styles/utilities/padding.css
deleted file mode 100644
index 0fa29cba7c..0000000000
--- a/docs/src/styles/utilities/padding.css
+++ /dev/null
@@ -1,299 +0,0 @@
-.p-0 {
-  padding: 0;
-}
-
-.p-1 {
-  padding: var(--space-1);
-}
-
-.p-2 {
-  padding: var(--space-2);
-}
-
-.p-3 {
-  padding: var(--space-3);
-}
-
-.p-4 {
-  padding: var(--space-4);
-}
-
-.p-5 {
-  padding: var(--space-5);
-}
-
-.p-6 {
-  padding: var(--space-6);
-}
-
-.p-7 {
-  padding: var(--space-7);
-}
-
-.p-8 {
-  padding: var(--space-8);
-}
-
-.p-9 {
-  padding: var(--space-9);
-}
-
-.pt-0 {
-  padding-top: 0;
-}
-
-.pt-1 {
-  padding-top: var(--space-1);
-}
-
-.pt-2 {
-  padding-top: var(--space-2);
-}
-
-.pt-3 {
-  padding-top: var(--space-3);
-}
-
-.pt-4 {
-  padding-top: var(--space-4);
-}
-
-.pt-5 {
-  padding-top: var(--space-5);
-}
-
-.pt-6 {
-  padding-top: var(--space-6);
-}
-
-.pt-7 {
-  padding-top: var(--space-7);
-}
-
-.pt-8 {
-  padding-top: var(--space-8);
-}
-
-.pt-9 {
-  padding-top: var(--space-9);
-}
-
-.pr-0 {
-  padding-right: 0;
-}
-
-.pr-1 {
-  padding-right: var(--space-1);
-}
-
-.pr-2 {
-  padding-right: var(--space-2);
-}
-
-.pr-3 {
-  padding-right: var(--space-3);
-}
-
-.pr-4 {
-  padding-right: var(--space-4);
-}
-
-.pr-5 {
-  padding-right: var(--space-5);
-}
-
-.pr-6 {
-  padding-right: var(--space-6);
-}
-
-.pr-7 {
-  padding-right: var(--space-7);
-}
-
-.pr-8 {
-  padding-right: var(--space-8);
-}
-
-.pr-9 {
-  padding-right: var(--space-9);
-}
-
-.pb-0 {
-  padding-bottom: 0;
-}
-
-.pb-1 {
-  padding-bottom: var(--space-1);
-}
-
-.pb-2 {
-  padding-bottom: var(--space-2);
-}
-
-.pb-3 {
-  padding-bottom: var(--space-3);
-}
-
-.pb-4 {
-  padding-bottom: var(--space-4);
-}
-
-.pb-5 {
-  padding-bottom: var(--space-5);
-}
-
-.pb-6 {
-  padding-bottom: var(--space-6);
-}
-
-.pb-7 {
-  padding-bottom: var(--space-7);
-}
-
-.pb-8 {
-  padding-bottom: var(--space-8);
-}
-
-.pb-9 {
-  padding-bottom: var(--space-9);
-}
-
-.pl-0 {
-  padding-left: 0;
-}
-
-.pl-1 {
-  padding-left: var(--space-1);
-}
-
-.pl-2 {
-  padding-left: var(--space-2);
-}
-
-.pl-3 {
-  padding-left: var(--space-3);
-}
-
-.pl-4 {
-  padding-left: var(--space-4);
-}
-
-.pl-5 {
-  padding-left: var(--space-5);
-}
-
-.pl-6 {
-  padding-left: var(--space-6);
-}
-
-.pl-7 {
-  padding-left: var(--space-7);
-}
-
-.pl-8 {
-  padding-left: var(--space-8);
-}
-
-.pl-9 {
-  padding-left: var(--space-9);
-}
-
-.px-0 {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.px-1 {
-  padding-left: var(--space-1);
-  padding-right: var(--space-1);
-}
-
-.px-2 {
-  padding-left: var(--space-2);
-  padding-right: var(--space-2);
-}
-
-.px-3 {
-  padding-left: var(--space-3);
-  padding-right: var(--space-3);
-}
-
-.px-4 {
-  padding-left: var(--space-4);
-  padding-right: var(--space-4);
-}
-
-.px-5 {
-  padding-left: var(--space-5);
-  padding-right: var(--space-5);
-}
-
-.px-6 {
-  padding-left: var(--space-6);
-  padding-right: var(--space-6);
-}
-
-.px-7 {
-  padding-left: var(--space-7);
-  padding-right: var(--space-7);
-}
-
-.px-8 {
-  padding-left: var(--space-8);
-  padding-right: var(--space-8);
-}
-
-.px-9 {
-  padding-left: var(--space-9);
-  padding-right: var(--space-9);
-}
-
-.py-0 {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.py-1 {
-  padding-top: var(--space-1);
-  padding-bottom: var(--space-1);
-}
-
-.py-2 {
-  padding-top: var(--space-2);
-  padding-bottom: var(--space-2);
-}
-
-.py-3 {
-  padding-top: var(--space-3);
-  padding-bottom: var(--space-3);
-}
-
-.py-4 {
-  padding-top: var(--space-4);
-  padding-bottom: var(--space-4);
-}
-
-.py-5 {
-  padding-top: var(--space-5);
-  padding-bottom: var(--space-5);
-}
-
-.py-6 {
-  padding-top: var(--space-6);
-  padding-bottom: var(--space-6);
-}
-
-.py-7 {
-  padding-top: var(--space-7);
-  padding-bottom: var(--space-7);
-}
-
-.py-8 {
-  padding-top: var(--space-8);
-  padding-bottom: var(--space-8);
-}
-
-.py-9 {
-  padding-top: var(--space-9);
-  padding-bottom: var(--space-9);
-}
diff --git a/docs/src/styles/utilities/position.css b/docs/src/styles/utilities/position.css
deleted file mode 100644
index a71f878422..0000000000
--- a/docs/src/styles/utilities/position.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.p-s {
-  position: static;
-}
-
-.p-a {
-  position: absolute;
-}
-
-.p-r {
-  position: relative;
-}
-
-.p-f {
-  position: fixed;
-}
diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
index 92ec837978..ec4070f697 100644
--- a/docs/tailwind.config.ts
+++ b/docs/tailwind.config.ts
@@ -1,21 +1,12 @@
 import type { Config } from 'tailwindcss';
-import defaultTheme from 'tailwindcss/defaultTheme';
 
 export default {
-  darkMode: ['class', '[data-color-scheme="dark"]'],
-  content: [
-    // Apply only to demos
-    './data/**/*.{js,ts,jsx,tsx}',
-  ],
+  content: ['./src/**/*.{js,ts,jsx,tsx}', './data/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
       fontFamily: {
-        sans: ['Graphik', ...defaultTheme.fontFamily.sans],
+        sans: ['system-ui'],
       },
     },
   },
-  corePlugins: {
-    // Remove the Tailwind CSS preflight styles as they would apply to the whole site.
-    preflight: false,
-  },
 } satisfies Config;
diff --git a/package.json b/package.json
index cb382a4d96..e2cda5ea4d 100644
--- a/package.json
+++ b/package.json
@@ -146,6 +146,7 @@
     "postcss-loader": "^8.1.1",
     "postcss-styled-syntax": "^0.6.4",
     "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "pretty-quick": "^4.0.0",
     "process": "^0.11.10",
     "react-docgen": "^5.4.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 10b07a828a..144df3376e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -265,6 +265,9 @@ importers:
       prettier:
         specifier: ^3.2.5
         version: 3.2.5
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.8
+        version: 0.6.8(prettier@3.2.5)
       pretty-quick:
         specifier: ^4.0.0
         version: 4.0.0(prettier@3.2.5)
@@ -7123,6 +7126,61 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-plugin-tailwindcss@0.6.8:
+    resolution: {integrity: sha512-dGu3kdm7SXPkiW4nzeWKCl3uoImdd5CTZEJGxyypEPL37Wj0HT2pLqjrvSei1nTeuQfO4PUfjeW5cTUNRLZ4sA==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig-melody': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig-melody':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
   prettier@3.2.5:
     resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
     engines: {node: '>=14'}
@@ -16769,6 +16827,10 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-plugin-tailwindcss@0.6.8(prettier@3.2.5):
+    dependencies:
+      prettier: 3.2.5
+
   prettier@3.2.5: {}
 
   pretty-error@4.0.0:
diff --git a/prettier.config.js b/prettier.config.js
index 3be5b76051..2553a2273e 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -2,6 +2,7 @@ module.exports = {
   printWidth: 100,
   singleQuote: true,
   trailingComma: 'all',
+  plugins: ['prettier-plugin-tailwindcss'],
   overrides: [
     {
       files: ['docs/**/*.md', 'docs/src/app/**/*.{js,tsx}', 'docs/data/**/*.{js,tsx}'],