Fix prettier plugin tailwindcss

.prettierrc.mjs → prettier.config.mjs

@@ -1,6 +1,6 @@
 /**
  * @see https://prettier.io/docs/en/configuration.html
- * @type {import("prettier").Config}
+ * @type {import("prettier").Config & import("prettier-plugin-tailwindcss").PluginOptions}
  */
 const config = {
   printWidth: 80,
@@ -12,8 +12,8 @@ const config = {
   bracketSameLine: false,
   endOfLine: 'auto',
   plugins: [
-    'prettier-plugin-tailwindcss',
     '@ianvs/prettier-plugin-sort-imports',
+    'prettier-plugin-tailwindcss',
   ],
   importOrder: [
     '<BUILTIN_MODULES>', // Node.js built-in modules

src/app/admin/page.tsx

@@ -6,11 +6,11 @@ import AdminHeader from '@src/components/admin/AdminHeader';
 export default function Page() {
   return (
     <AdminHeader path={['Admin']}>
-      <div className="flex flex-wrap items-center gap-x-10 max-sm:gap-x-4 gap-y-2">
+      <div className="flex flex-wrap items-center gap-x-10 gap-y-2 max-sm:gap-x-4">
         {/*<Link href="/admin/sections">*/}
         <Button
           variant="contained"
-          className="normal-case whitespace-nowrap"
+          className="whitespace-nowrap normal-case"
           startIcon={<GroupsIcon />}
           size="large"
           disabled

src/app/auth/ProviderButtons.tsx

@@ -27,11 +27,11 @@ const ProviderButton = ({
         newUserCallbackURL: '/get-started',
       });
     }}
-    className="bg-white hover:bg-neutral-100 dark:bg-neutral-700 dark:hover:bg-neutral-600 normal-case whitespace-nowrap min-w-max"
+    className="min-w-max bg-white whitespace-nowrap normal-case hover:bg-neutral-100 dark:bg-neutral-700 dark:hover:bg-neutral-600"
     startIcon={AuthIcons[provider]}
   >
     <Typography
-      className={`text-base font-extrabold md:text-xs text-slate-800 dark:text-slate-200`}
+      className={`text-base font-extrabold text-slate-800 md:text-xs dark:text-slate-200`}
     >
       <span className="min-w-fit">Sign in with {providerNames[provider]}</span>
     </Typography>

src/app/auth/page.tsx

@@ -29,20 +29,20 @@ export default async function Auth(props: {
             className="select-none"
           />
         </div>
-        <div className="fixed inset-0 dark:bg-slightly-darken" />
+        <div className="dark:bg-slightly-darken fixed inset-0" />
         <div className="z-10">
           <Link
             href="/"
-            className="font-display flex gap-2 items-center select-none text-white drop-shadow-[0_0_4px_rgb(0_0_0_/_0.4)]"
+            className="font-display flex items-center gap-2 text-white drop-shadow-[0_0_4px_rgb(0_0_0_/_0.4)] select-none"
           >
             <div className="flex flex-row items-center">
               <UTDNotebookLogoStandalone className="h-10 w-auto fill-white" />
             </div>
             <div className="flex flex-col">
-              <span className="whitespace-nowrap text-lg md:text-xl font-bold leading-5">
+              <span className="text-lg leading-5 font-bold whitespace-nowrap md:text-xl">
                 UTD NOTEBOOK
               </span>
-              <span className="whitespace-nowrap text-xs md:text-sm font-medium">
+              <span className="text-xs font-medium whitespace-nowrap md:text-sm">
                 by Nebula Labs
               </span>
             </div>

src/app/get-started/page.tsx

@@ -17,17 +17,17 @@ export default async function Page() {
   const userMetadata = await api.userMetadata.byId({ id: session.user.id });
 
   return (
-    <main className="min-h-screen relative pb-24">
-      <div className="fixed inset-0 h-full w-full overflow-hidden bg-royal">
+    <main className="relative min-h-screen pb-24">
+      <div className="bg-royal fixed inset-0 h-full w-full overflow-hidden">
         <Image
           src={'/background.png'}
           alt="background"
           fill
           objectFit="cover"
-          className="select-none -z-20"
+          className="-z-20 select-none"
           draggable={false}
         />
-        <div className="absolute inset-0 dark:bg-slightly-darken" />
+        <div className="dark:bg-slightly-darken absolute inset-0" />
       </div>
       <div className="relative z-20">
         <Header

src/app/notes/[...slug]/layout.tsx

@@ -9,7 +9,7 @@ export default function NotesLayout({ children }: NotesLayoutProps) {
   return (
     <main className="relative min-h-screen">
       <Header />
-      <section className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-5 pb-16 pt-24 lg:pt-28">
+      <section className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-5 pt-24 pb-16 lg:pt-28">
         {children}
       </section>
     </main>

src/app/notes/[id]/page.tsx

@@ -14,14 +14,14 @@ export default async function NotePage({ params }: NotePageProps) {
   if (!file) notFound();
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex h-full flex-col">
       <Header />
-      <main className="p-4 pt-0 flex w-full h-full flex-col items-center gap-4">
+      <main className="flex h-full w-full flex-col items-center gap-4 p-4 pt-0">
         {/* Info panel pinned to the top, floats over the PDF */}
         <NoteInfoPanel file={file} />
 
         {/* Scrollable area with white card background for the PDF */}
-        <BaseCard className="h-full min-h-[50vh] w-full overflow-hidden max-w-6xl">
+        <BaseCard className="h-full min-h-[50vh] w-full max-w-6xl overflow-hidden">
           <iframe
             src={file.publicUrl}
             title={file.name}

src/app/notes/create/NoteForm.tsx

@@ -316,7 +316,7 @@ const NoteForm = ({ mode = 'create', file: existingFile }: NoteFormProps) => {
           </div>
         </div>
 
-        <div className="flex flex-wrap justify-end items-center gap-2">
+        <div className="flex flex-wrap items-center justify-end gap-2">
           <form.AppForm>
             <form.ResetButton />
           </form.AppForm>
@@ -333,7 +333,7 @@ export default NoteForm;
 
 export const NoteFormSkeleton = () => {
   return (
-    <div className="flex flex-col gap-4 max-w-full">
+    <div className="flex max-w-full flex-col gap-4">
       <PanelSkeleton />
     </div>
   );

src/app/notes/create/page.tsx

@@ -23,7 +23,7 @@ export default async function Page() {
   return (
     <>
       <Header />
-      <main className="p-4 flex w-full flex-col items-center">
+      <main className="flex w-full flex-col items-center p-4">
         <NoteForm />
       </main>
     </>

src/app/page.tsx

@@ -9,7 +9,7 @@ const Home = () => {
       <div className="absolute inset-0 z-0">
         <div className="relative h-screen">
           <div className={`absolute inset-0 ${HOME_PAGE_GRADIENT_CLASS}`} />
-          <div className="absolute inset-0 dark:bg-slightly-darken" />
+          <div className="dark:bg-slightly-darken absolute inset-0" />
         </div>
       </div>
 
@@ -43,7 +43,7 @@ const Home = () => {
               UTD NOTEBOOK
             </h1>
 
-            <p className="mb-10 text-center text-white text-base md:text-lg text-shadow-[0_0_4px_rgb(0_0_0_/_0.4)]">
+            <p className="mb-10 text-center text-base text-white text-shadow-[0_0_4px_rgb(0_0_0_/_0.4)] md:text-lg">
               Share and access course notes. By students, for students.
             </p>
             <SearchBar autoFocus />

src/components/common/Panel.tsx

@@ -30,8 +30,7 @@ const Panel = ({
 }: PanelProps) => {
   return (
     <BaseCard
-      className={`flex flex-col gap-2 ${smallPadding ? 'p-5' : 'sm:px-14 max-sm:px-2 sm:py-10 max-sm:py-4'} min-w-0 max-w-6xl
-        ${className ?? ''}`}
+      className={`flex flex-col gap-2 ${smallPadding ? 'p-5' : 'max-sm:px-2 max-sm:py-4 sm:px-14 sm:py-10'} max-w-6xl min-w-0 ${className ?? ''}`}
       {...(id ? { id } : {})}
       style={style}
     >
@@ -50,7 +49,7 @@ const Panel = ({
       )}
       {description && (
         <div
-          className={`mb-4 text-slate-600 dark:text-slate-400 text-sm ${smallPadding ? '' : 'ml-2'}`}
+          className={`mb-4 text-sm text-slate-600 dark:text-slate-400 ${smallPadding ? '' : 'ml-2'}`}
         >
           {description}
         </div>
@@ -70,7 +69,7 @@ export const PanelSkeleton = (props: PanelSkeletonProps) => {
   return (
     <Skeleton
       className={
-        'flex flex-col gap-2 rounded-lg sm:px-14 max-sm:px-2 sm:py-10 max-sm:py-4 min-w-0 w-6xl ' +
+        'flex w-6xl min-w-0 flex-col gap-2 rounded-lg max-sm:px-2 max-sm:py-4 sm:px-14 sm:py-10 ' +
         props.className
       }
       variant="rounded"

src/components/form/FormFile.tsx

@@ -75,7 +75,7 @@ const FormFile = ({
 
   return (
     <div className={className}>
-      <div className="w-full lg:h-96 max-lg:h-48 flex flex-col justify-center items-center gap-2 p-8 rounded-md bg-cornflower-50 dark:bg-cornflower-950 has-[:hover]:bg-cornflower-100 dark:has-[:hover]:bg-cornflower-900 transition-colors relative">
+      <div className="bg-cornflower-50 dark:bg-cornflower-950 has-[:hover]:bg-cornflower-100 dark:has-[:hover]:bg-cornflower-900 relative flex w-full flex-col items-center justify-center gap-2 rounded-md p-8 transition-colors max-lg:h-48 lg:h-96">
         {label && (
           <p className="text-xs font-bold text-slate-800 dark:text-slate-200">
             {label}

src/components/form/FormQuestion.tsx

@@ -15,7 +15,7 @@ export default function FormQuestion({
       <div className="flex flex-col gap-2">
         <Typography variant="body1">{question}</Typography>
       </div>
-      <div className="flex flex-wrap gap-6 w-full">{children}</div>
+      <div className="flex w-full flex-wrap gap-6">{children}</div>
     </div>
   );
 }

src/components/form/FormTextField.tsx

@@ -8,7 +8,7 @@ export function StyledTextField(props: StyledTextFieldProps) {
     <TextField
       size={props.size ?? (props.multiline ? 'medium' : 'small')}
       {...props}
-      className={`[&>.MuiInputBase-root]:bg-white dark:[&>.MuiInputBase-root]:bg-neutral-800 w-64 ${props.className}`}
+      className={`w-64 [&>.MuiInputBase-root]:bg-white dark:[&>.MuiInputBase-root]:bg-neutral-800 ${props.className}`}
     />
   );
 }

src/components/form/NotesPanel.tsx

@@ -22,7 +22,7 @@ export default function NotesPanel({
         files={notes}
         noFilesMessage={
           noFilesMessage ?? (
-            <div className="w-full py-12 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-xl text-md font-medium text-slate-600 dark:text-slate-400">
+            <div className="text-md flex w-full flex-col items-center justify-center rounded-xl border-2 border-dashed border-slate-200 py-12 font-medium text-slate-600 dark:border-slate-800 dark:text-slate-400">
               You haven&apos;t created any notes yet.
             </div>
           )

src/components/getting-started/OnboardingForm.tsx

@@ -267,10 +267,10 @@ export default function OnboardingForm({
         e.stopPropagation();
         form.handleSubmit();
       }}
-      className="flex flex-col gap-8 w-full"
+      className="flex w-full flex-col gap-8"
       noValidate
     >
-      <BaseCard className="max-sm:px-0 sm:px-2 py-4 overflow-clip">
+      <BaseCard className="overflow-clip py-4 max-sm:px-0 sm:px-2">
         <div>
           <Stepper
             alternativeLabel={useMediaQuery(theme.breakpoints.down('sm'))}
@@ -317,7 +317,7 @@ export default function OnboardingForm({
           </Stepper>
         </div>
       </BaseCard>
-      <Panel className="shadow-lg overflow-clip">
+      <Panel className="overflow-clip shadow-lg">
         <div
           className="relative mb-4 transition-[height] duration-250 ease-in-out"
           style={
@@ -377,7 +377,7 @@ export default function OnboardingForm({
             );
           })}
         </div>
-        <div className="flex flex-row justify-end items-center gap-2">
+        <div className="flex flex-row items-center justify-end gap-2">
           {BackButton}
           {NextButton}
         </div>

src/components/getting-started/OnboardingFormStep.tsx

@@ -159,7 +159,7 @@ const OnboardingFormStep = withForm({
     } else if (step?.variant === 'start') {
       FormStepData = (
         <div className="flex flex-col gap-6">
-          <div className="flex flex-col gap-2 ml-3.5">
+          <div className="ml-3.5 flex flex-col gap-2">
             <Typography
               variant="h1"
               className="font-display text-4xl font-bold"
@@ -175,7 +175,7 @@ const OnboardingFormStep = withForm({
     } else if (step?.variant === 'finish') {
       FormStepData = (
         <div className="flex flex-col gap-6">
-          <div className="flex flex-col gap-2 ml-3.5">
+          <div className="ml-3.5 flex flex-col gap-2">
             <Typography
               variant="h1"
               className="font-display text-4xl font-bold"

src/components/global/RegisterModal.tsx

@@ -23,24 +23,24 @@ export const RegisterModalContents = ({
 }: Pick<RegisterModalProps, 'className' | 'onClose' | 'closeButton'>) => {
   return (
     <div
-      className={`flex flex-col items-center z-20 w-fit rounded-lg bg-white dark:bg-neutral-800 p-4 shadow-lg dark:shadow-xl ${className}`}
+      className={`z-20 flex w-fit flex-col items-center rounded-lg bg-white p-4 shadow-lg dark:bg-neutral-800 dark:shadow-xl ${className}`}
     >
-      <div className="flex flex-col h-fit w-full">
+      <div className="flex h-fit w-full flex-col">
         {closeButton && (
-          <div className="sm:absolute self-end">
+          <div className="self-end sm:absolute">
             <IconButton onClick={onClose} aria-label="close modal">
               <CloseRoundedIcon />
             </IconButton>
           </div>
         )}
         <Typography
           variant="h1"
-          className="font-display text-2xl font-bold text-slate-600 dark:text-slate-400 grow-1 self-center text-center px-4 mt-1 mb-2"
+          className="font-display mt-1 mb-2 grow-1 self-center px-4 text-center text-2xl font-bold text-slate-600 dark:text-slate-400"
         >
           Sign In / Sign Up
         </Typography>
       </div>
-      <div className="flex w-full flex-col items-center justify-center gap-3 sm:flex-row p-4">
+      <div className="flex w-full flex-col items-center justify-center gap-3 p-4 sm:flex-row">
         {providers.map((provider) => (
           <ProviderButton key={provider} provider={provider} />
         ))}
@@ -61,7 +61,7 @@ const RegisterModal: React.FC<RegisterModalProps> = ({
     <Modal
       open={open}
       onClose={onClose}
-      className={`flex justify-center items-center h-screen p-4 ${className}`}
+      className={`flex h-screen items-center justify-center p-4 ${className}`}
     >
       {/* This span is required to receive the tabIndex prop, which will let the user quickly navigate the modal using the keyboard */}
       <span>

src/components/header/BaseHeader.tsx

@@ -138,28 +138,28 @@ export const BaseHeader = ({
   return (
     <BaseHeaderContext.Provider value={{ openCompactSearchBar }}>
       <div
-        className={`${disableSticky ? '' : 'sticky'} min-h-17 top-0 z-50 flex w-full justify-between items-center gap-y-2 gap-x-2 md:gap-x-4 lg:gap-x-8 py-2 px-4 ${menu ? 'max-sm:pl-2' : ''} flex-wrap sm:flex-nowrap ${transparent ? '' : 'bg-lighten dark:bg-darken'} ${className}`}
+        className={`${disableSticky ? '' : 'sticky'} top-0 z-50 flex min-h-17 w-full items-center justify-between gap-x-2 gap-y-2 px-4 py-2 md:gap-x-4 lg:gap-x-8 ${menu ? 'max-sm:pl-2' : ''} flex-wrap sm:flex-nowrap ${transparent ? '' : 'bg-lighten dark:bg-darken'} ${className}`}
       >
         {!transparent && (
           <>
             <Image
               src={gradientBG}
               alt="gradient background"
               fill
-              className="object-cover -z-20 select-none"
+              className="-z-20 object-cover select-none"
               sizes="120vw"
             />
-            <div className="absolute inset-0 bg-lighten dark:bg-darken -z-10"></div>
+            <div className="bg-lighten dark:bg-darken absolute inset-0 -z-10"></div>
           </>
         )}
         {!openCompactSearchBar ? (
           <>
-            <div className="grow basis-0 flex gap-x-2 sm:gap-x-8">
+            <div className="flex grow basis-0 gap-x-2 sm:gap-x-8">
               {menuVisibility && menu}
               {logoVisibility && (
                 <Link
                   href="/"
-                  className={`font-display flex gap-2 items-center select-none ${
+                  className={`font-display flex items-center gap-2 select-none ${
                     color?.startsWith('light') ? 'text-white' : 'text-haiti'
                   } ${
                     color === 'lightDark'
@@ -190,10 +190,10 @@ export const BaseHeader = ({
                   )}
                   {logoTextVisibility && (
                     <div className="flex flex-col">
-                      <span className="whitespace-nowrap text-lg md:text-xl font-bold leading-5">
+                      <span className="text-lg leading-5 font-bold whitespace-nowrap md:text-xl">
                         UTD NOTEBOOK
                       </span>
-                      <span className="whitespace-nowrap text-xs md:text-sm font-medium">
+                      <span className="text-xs font-medium whitespace-nowrap md:text-sm">
                         by Nebula Labs
                       </span>
                     </div>
@@ -203,13 +203,13 @@ export const BaseHeader = ({
             </div>
             {fullSearchBarVisibility && searchBar && (
               <div
-                className={`order-last max-sm:basis-full basis-128 sm:order-none gap-x-2 md:gap-x-4 lg:gap-x-8 ${searchVisibility === true ? 'max-md:hidden' : ''} ${shadow ? 'drop-shadow-[0_0_4px_rgb(0_0_0_/_0.4)]' : ''}`}
+                className={`order-last basis-128 gap-x-2 max-sm:basis-full sm:order-none md:gap-x-4 lg:gap-x-8 ${searchVisibility === true ? 'max-md:hidden' : ''} ${shadow ? 'drop-shadow-[0_0_4px_rgb(0_0_0_/_0.4)]' : ''}`}
               >
                 {searchBar}
               </div>
             )}
             <div
-              className={`grow basis-0 flex justify-end items-center gap-x-2 ${shadow ? 'drop-shadow-[0_0_4px_rgb(0_0_0_/_0.2)]' : ''}`}
+              className={`flex grow basis-0 items-center justify-end gap-x-2 ${shadow ? 'drop-shadow-[0_0_4px_rgb(0_0_0_/_0.2)]' : ''}`}
             >
               {compactSearchBarVisibility && searchBar && (
                 <IconButton
@@ -225,8 +225,8 @@ export const BaseHeader = ({
             </div>
           </>
         ) : (
-          <div className="w-full flex justify-center">
-            <div className="w-full max-w-128 flex gap-x-2 items-center">
+          <div className="flex w-full justify-center">
+            <div className="flex w-full max-w-128 items-center gap-x-2">
               <IconButton
                 size="large"
                 onClick={() => setOpenCompactSearchBar(false)}

src/components/header/ProfileDropDown.tsx

@@ -78,7 +78,7 @@ export const ProfileDropDown = ({ shadow = false }: Props) => {
                   <Avatar
                     alt={session.user.name}
                     src={session.user.image ?? undefined}
-                    className="w-6 h-6"
+                    className="h-6 w-6"
                   />
                 </ListItemIcon>
                 <div>