Clean up Tailwind config and docs styles (#746)

Co-authored-by: Michał Dudak <[email protected]>
mui · Oct 21, 2024 · d2e58dd · d2e58dd
1 parent 342cb97
commit d2e58dd
Show file tree

Hide file tree

Showing 42 changed files with 159 additions and 894 deletions.
diff --git 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
@@ -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,28 +34,28 @@ 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
             </Label>
             <Label>
               <Checkbox name="green">
                 <Indicator>
-                  <CheckIcon className="w-full h-full" />
+                  <CheckIcon className="h-full w-full" />
                 </Indicator>
               </Checkbox>
               Green
             </Label>
             <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind utilities;
+@tailwind components;