Merge pull request #68 from aaronpo97/prettier-formatting

Format: update prettier configuration to use tailwind plugin

.prettierrc

@@ -10,5 +10,5 @@
   "tabWidth": 2,
   "trailingComma": "all",
   "useTabs": false,
-  "plugins": ["prettier-plugin-jsdoc"]
+  "plugins": ["prettier-plugin-jsdoc", "prettier-plugin-tailwindcss"]
 }

package-lock.json

@@ -78,7 +78,7 @@
         "postcss": "^8.4.26",
         "prettier": "^3.0.0",
         "prettier-plugin-jsdoc": "^1.0.2",
-        "prettier-plugin-tailwindcss": "^0.4.1",
+        "prettier-plugin-tailwindcss": "^0.5.7",
         "prisma": "^5.6.0",
         "tailwindcss": "^3.3.3",
         "tailwindcss-animate": "^1.0.6",
@@ -8426,12 +8426,12 @@
       }
     },
     "node_modules/prettier-plugin-tailwindcss": {
-      "version": "0.4.1",
+      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.7.tgz",
-      "integrity": "sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==",
+      "integrity": "sha512-4v6uESAgwCni6YF6DwJlRaDjg9Z+al5zM4JfngcazMy4WEf/XkPS5TEQjbD+DZ5iNuG6RrKQLa/HuX2SYzC3kQ==",
       "dev": true,
       "engines": {
-        "node": ">=12.17.0"
+        "node": ">=14.21.3"
       },
       "peerDependencies": {
         "@ianvs/prettier-plugin-sort-imports": "*",
@@ -8439,17 +8439,15 @@
         "@shopify/prettier-plugin-liquid": "*",
         "@shufo/prettier-plugin-blade": "*",
         "@trivago/prettier-plugin-sort-imports": "*",
-        "prettier": "^2.2 || ^3.0",
+        "prettier": "^3.0",
         "prettier-plugin-astro": "*",
         "prettier-plugin-css-order": "*",
         "prettier-plugin-import-sort": "*",
         "prettier-plugin-jsdoc": "*",
-        "prettier-plugin-marko": "*",
         "prettier-plugin-organize-attributes": "*",
         "prettier-plugin-organize-imports": "*",
         "prettier-plugin-style-order": "*",
-        "prettier-plugin-svelte": "*",
+        "prettier-plugin-svelte": "*"
-        "prettier-plugin-twig-melody": "*"
       },
       "peerDependenciesMeta": {
         "@ianvs/prettier-plugin-sort-imports": {
@@ -16725,9 +16723,9 @@
       }
     },
     "prettier-plugin-tailwindcss": {
-      "version": "0.4.1",
+      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.7.tgz",
-      "integrity": "sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==",
+      "integrity": "sha512-4v6uESAgwCni6YF6DwJlRaDjg9Z+al5zM4JfngcazMy4WEf/XkPS5TEQjbD+DZ5iNuG6RrKQLa/HuX2SYzC3kQ==",
       "dev": true,
       "requires": {}
     },

package.json

@@ -83,7 +83,7 @@
     "postcss": "^8.4.26",
     "prettier": "^3.0.0",
     "prettier-plugin-jsdoc": "^1.0.2",
-    "prettier-plugin-tailwindcss": "^0.4.1",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "prisma": "^5.6.0",
     "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.6",

src/components/Account/AccountInfo.tsx

@@ -159,7 +159,7 @@ const AccountInfo: FC<AccountInfoProps> = ({ pageState, dispatch }) => {
                 </div>
               </div>
               <button
-                className="btn-primary btn my-5 w-full"
+                className="btn btn-primary my-5 w-full"
                 type="submit"
                 disabled={!pageState.accountInfoOpen || formState.isSubmitting}
               >

src/components/Account/BeerPostsByUser.tsx

@@ -56,7 +56,7 @@ const BeerPostsByUser: FC = () => {
           <div className="tooltip tooltip-bottom" data-tip="Scroll back to top of page.">
             <button
               type="button"
-              className="btn-ghost btn-sm btn"
+              className="btn btn-ghost btn-sm"
               aria-label="Scroll back to top of page."
               onClick={() => {
                 pageRef.current?.scrollIntoView({

src/components/Account/BreweryPostsByUser.tsx

@@ -58,7 +58,7 @@ const BreweryPostsByUser: FC = () => {
           <div className="tooltip tooltip-bottom" data-tip="Scroll back to top of page.">
             <button
               type="button"
-              className="btn-ghost btn-sm btn"
+              className="btn btn-ghost btn-sm"
               aria-label="Scroll back to top of page."
               onClick={() => {
                 pageRef.current?.scrollIntoView({

src/components/Account/DeleteAccount.tsx

@@ -60,7 +60,7 @@ const DeleteAccount: FunctionComponent<DeleteAccountProps> = ({
           <>
             <div className="mt-3">
               <button
-                className="btn-primary btn w-full"
+                className="btn btn-primary w-full"
                 onClick={() => deleteRef.current!.showModal()}
               >
                 Delete my account
@@ -71,13 +71,13 @@ const DeleteAccount: FunctionComponent<DeleteAccountProps> = ({
                   <p className="">This action is permanent and cannot be reversed.</p>
                   <div className="modal-action flex-col space-x-0 space-y-3">
                     <button
-                      className="btn-error btn-sm btn w-full"
+                      className="btn btn-error btn-sm w-full"
                       onClick={onDeleteSubmit}
                     >
                       Okay, delete my account
                     </button>
                     <button
-                      className="btn-success btn-sm btn w-full"
+                      className="btn btn-success btn-sm w-full"
                       onClick={() => deleteRef.current!.close()}
                     >
                       Go back

src/components/Account/Security.tsx

@@ -84,7 +84,7 @@ const Security: FunctionComponent<SecurityProps> = ({ dispatch, pageState }) =>
             />
 
             <button
-              className="btn-primary btn mt-5"
+              className="btn btn-primary mt-5"
               disabled={!pageState.securityOpen || formState.isSubmitting}
               type="submit"
             >

src/components/Account/UserAvatar.tsx

@@ -16,11 +16,11 @@ const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
   const { userAvatar } = user;
   return !userAvatar ? (
     <div
-      className="h-32 w-full bg-primary mask mask-circle flex items-center justify-center"
+      className="mask mask-circle flex h-32 w-full items-center justify-center bg-primary"
       aria-label="Default user avatar"
       role="img"
     >
-      <span className="text-2xl font-bold text-base-content h-full">
+      <span className="h-full text-2xl font-bold text-base-content">
         <FaUser className="h-full" />
       </span>
     </div>
@@ -31,7 +31,7 @@ const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
       width={1000}
       height={1000}
       crop="fill"
-      className="h-full w-full object-cover mask mask-circle"
+      className="mask mask-circle h-full w-full object-cover"
     />
   );
 };

src/components/Account/UserPosts.tsx

@@ -8,9 +8,9 @@ const UserPosts: FC = () => {
     <div className="mt-4">
       <div>
         <Tab.Group>
-          <Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl">
+          <Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
-            <Tab className="tab tab-xl w-1/2 uppercase ui-selected:tab-active">Beers</Tab>
+            <Tab className="tab-xl tab w-1/2 uppercase ui-selected:tab-active">Beers</Tab>
-            <Tab className="tab tab-xl w-1/2 uppercase ui-selected:tab-active">
+            <Tab className="tab-xl tab w-1/2 uppercase ui-selected:tab-active">
               Breweries
             </Tab>
           </Tab.List>

src/components/BeerBreweryComments/CommentCardBody.tsx

@@ -30,13 +30,13 @@ const CommentCardBody: FC<CommentCardProps> = ({
 
   return (
     <div ref={ref} className="flex">
-      <div className="w-[12%] py-4 justify-center">
+      <div className="w-[12%] justify-center py-4">
-        <div className="px-3 h-20">
+        <div className="h-20 px-3">
           <UserAvatar user={comment.postedBy} />
         </div>
       </div>
 
-      <div className="w-[88%] h-full">
+      <div className="h-full w-[88%]">
         {!inEditMode ? (
           <CommentContentBody comment={comment} setInEditMode={setInEditMode} />
         ) : (

src/components/BeerBreweryComments/CommentCardDropdown.tsx

@@ -17,13 +17,13 @@ const CommentCardDropdown: FC<CommentCardDropdownProps> = ({
   const isCommentOwner = user?.id === comment.postedBy.id;
 
   return (
-    <div className="dropdown-end dropdown">
+    <div className="dropdown dropdown-end">
-      <label tabIndex={0} className="btn-ghost btn-sm btn m-1">
+      <label tabIndex={0} className="btn btn-ghost btn-sm m-1">
         <FaEllipsisH />
       </label>
       <ul
         tabIndex={0}
-        className="dropdown-content menu rounded-box w-52 bg-base-100 p-2 shadow"
+        className="menu dropdown-content rounded-box w-52 bg-base-100 p-2 shadow"
       >
         <li>
           {isCommentOwner ? (

src/components/BeerBreweryComments/CommentContentBody.tsx

@@ -19,7 +19,7 @@ const CommentContentBody: FC<CommentContentBodyProps> = ({ comment, setInEditMod
   const timeDistance = useTimeDistance(new Date(comment.createdAt));
 
   return (
-    <div className="pr-3 py-4 animate-in fade-in-10 space-y-1">
+    <div className="space-y-1 py-4 pr-3 animate-in fade-in-10">
       <div className="space-y-2">
         <div className="flex flex-row justify-between">
           <div>

src/components/BeerBreweryComments/EditCommentBody.tsx

@@ -81,7 +81,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
   };
 
   return (
-    <div className="pr-3 py-4 animate-in fade-in-10">
+    <div className="py-4 pr-3 animate-in fade-in-10">
       <form onSubmit={handleSubmit(onEdit)} className="space-y-3">
         <div>
           <FormInfo>
@@ -124,7 +124,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
             <div className="join">
               <button
                 type="button"
-                className="btn-xs join-item btn lg:btn-sm"
+                className="btn join-item btn-xs lg:btn-sm"
                 disabled={isSubmitting || isDeleting}
                 onClick={() => {
                   setInEditMode(false);
@@ -135,13 +135,13 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
               <button
                 type="submit"
                 disabled={isSubmitting || isDeleting}
-                className="btn-xs join-item btn lg:btn-sm"
+                className="btn join-item btn-xs lg:btn-sm"
               >
                 Save
               </button>
               <button
                 type="button"
-                className="btn-xs join-item btn lg:btn-sm"
+                className="btn join-item btn-xs lg:btn-sm"
                 onClick={onDelete}
                 disabled={isDeleting || formState.isSubmitting}
               >

src/components/BeerById/BeerInfoHeader.tsx

@@ -61,7 +61,7 @@ const BeerInfoHeader: FC<BeerInfoHeaderProps> = ({ beerPost }) => {
 
           {isPostOwner && (
             <div className="tooltip tooltip-left" data-tip={`Edit '${beerPost.name}'`}>
-              <Link href={`/beers/${beerPost.id}/edit`} className="btn-ghost btn-xs btn">
+              <Link href={`/beers/${beerPost.id}/edit`} className="btn btn-ghost btn-xs">
                 <FaRegEdit className="text-xl" />
               </Link>
             </div>

src/components/BeerById/BeerRecommendations.tsx

@@ -71,7 +71,7 @@ const BeerRecommendationsSection: FC<{
                     <div>
                       <div>
                         <Link
-                          className="link link-hover"
+                          className="link-hover link"
                           href={`/beers/styles/${post.style.id}`}
                         >
                           <span className="font-medium">{post.style.name}</span>

src/components/BeerIndex/BeerCard.tsx

@@ -44,7 +44,7 @@ const BeerCard: FC<{ post: z.infer<typeof BeerPostQueryResult> }> = ({ post }) =
         <div className="flex items-end justify-between">
           <div>
             <Link
-              className="text-md lg:text-xl hover:underline"
+              className="text-md hover:underline lg:text-xl"
               href={`/beers/styles/${post.style.id}`}
             >
               {post.style.name}

src/components/BeerStyleById/BeerStyleHeader.tsx

@@ -56,7 +56,7 @@ const BeerStyleHeader: FC<BeerInfoHeaderProps> = ({ beerStyle }) => {
 
           {isPostOwner && (
             <div className="tooltip tooltip-left" data-tip={`Edit '${beerStyle.name}'`}>
-              <Link href={`/beers/${beerStyle.id}/edit`} className="btn-ghost btn-xs btn">
+              <Link href={`/beers/${beerStyle.id}/edit`} className="btn btn-ghost btn-xs">
                 <FaRegEdit className="text-xl" />
               </Link>
             </div>
@@ -68,7 +68,7 @@ const BeerStyleHeader: FC<BeerInfoHeaderProps> = ({ beerStyle }) => {
 
         <div className="flex justify-between">
           <div className="space-y-2">
-            <div className="flex w-25 space-x-3 flex-row">
+            <div className="w-25 flex flex-row space-x-3">
               <div className="text-sm font-bold">
                 ABV Range:{' '}
                 <span>

src/components/BeerStyleIndex/BeerStyleCard.tsx

@@ -16,7 +16,7 @@ const BeerStyleCard: FC<{ beerStyle: z.infer<typeof BeerStyleQueryResult> }> = (
               {beerStyle.name}
             </h3>
           </Link>
-          <div className="flex w-25 space-x-3 flex-row">
+          <div className="w-25 flex flex-row space-x-3">
             <div className="text-sm font-bold">
               ABV Range:{' '}
               <span>
@@ -32,7 +32,7 @@ const BeerStyleCard: FC<{ beerStyle: z.infer<typeof BeerStyleQueryResult> }> = (
           </div>
 
           <div className="h-20">
-            <p className="overflow-ellipsis line-clamp-3">{beerStyle.description}</p>
+            <p className="line-clamp-3 overflow-ellipsis">{beerStyle.description}</p>
           </div>
 
           <div className="font-semibold">

src/components/BreweryById/BreweryBeerSection.tsx

@@ -44,7 +44,7 @@ const BreweryBeersSection: FC<BreweryCommentsSectionProps> = ({ breweryPost }) =
             <div>
               {user && (
                 <Link
-                  className={`btn-ghost btn-sm btn gap-2 rounded-2xl outline`}
+                  className={`btn btn-ghost btn-sm gap-2 rounded-2xl outline`}
                   href={`/breweries/${breweryPost.id}/beers/create`}
                 >
                   <FaPlus className="text-xl" />
@@ -77,7 +77,7 @@ const BreweryBeersSection: FC<BreweryCommentsSectionProps> = ({ breweryPost }) =
 
                     <div>
                       <Link
-                        className="text-lg font-medium link link-hover"
+                        className="link-hover link text-lg font-medium"
                         href={`/beers/styles/${beerPost.style.id}`}
                       >
                         {beerPost.style.name}

src/components/BreweryById/BreweryInfoHeader.tsx

@@ -63,7 +63,7 @@ const BreweryInfoHeader: FC<BreweryInfoHeaderProps> = ({ breweryPost }) => {
             <div className="tooltip tooltip-left" data-tip={`Edit '${breweryPost.name}'`}>
               <Link
                 href={`/breweries/${breweryPost.id}/edit`}
-                className="btn-ghost btn-xs btn"
+                className="btn btn-ghost btn-xs"
               >
                 <FaRegEdit className="text-xl" />
               </Link>

src/components/BreweryIndex/BreweryCard.tsx

@@ -32,12 +32,12 @@ const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
       <div className="card-body justify-between">
         <div>
           <Link href={`/breweries/${brewery.id}`} className="link-hover link">
-            <h2 className="text-xl truncate font-bold lg:text-2xl">{brewery.name}</h2>
+            <h2 className="truncate text-xl font-bold lg:text-2xl">{brewery.name}</h2>
           </Link>
         </div>
         <div className="flex items-end justify-between">
           <div className="w-9/12">
-            <h3 className="text-lg font-semibold lg:text-xl truncate">
+            <h3 className="truncate text-lg font-semibold lg:text-xl">
               {brewery.location.city},{' '}
               {brewery.location.stateOrProvince || brewery.location.country}
             </h3>

src/components/BreweryPost/CreateBreweryPostForm.tsx

@@ -95,7 +95,7 @@ const InfoSection: FC<{
           type="file"
           {...register('images')}
           multiple
-          className="file-input-bordered file-input w-full"
+          className="file-input file-input-bordered w-full"
           disabled={isSubmitting}
         />
       </FormSegment>
@@ -141,7 +141,7 @@ const LocationSection: FC<{
             id="address"
             type="text"
             placeholder="1234 Main St"
-            className={`input-bordered input w-full appearance-none rounded-lg transition ease-in-out ${
+            className={`input input-bordered w-full appearance-none rounded-lg transition ease-in-out ${
               errors.address?.message ? 'input-error' : ''
             }`}
             {...register('address')}
@@ -246,7 +246,7 @@ const CreateBreweryPostForm: FC = () => {
       autoComplete="off"
     >
       <Tab.Group as={Fragment}>
-        <Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl">
+        <Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
           <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
             Information
           </Tab>

src/components/CreateBeerPostForm.tsx

@@ -154,7 +154,7 @@ const CreateBeerPostForm: FunctionComponent<BeerFormProps> = ({
           type="file"
           {...register('images')}
           multiple
-          className="file-input-bordered file-input w-full"
+          className="file-input file-input-bordered w-full"
           disabled={isSubmitting}
         />
       </FormSegment>

src/components/EditBeerPostForm.tsx

@@ -125,7 +125,7 @@ const EditBeerPostForm: FC<EditBeerPostFormProps> = ({ previousValues }) => {
           {isSubmitting ? 'Submitting...' : 'Submit'}
         </Button>
         <button
-          className={`btn-primary btn w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
+          className={`btn btn-primary w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
           type="button"
           onClick={onDelete}
         >

src/components/UserPage/UserFollowButton.tsx

@@ -40,7 +40,7 @@ const UserFollowButton: FC<UserFollowButtonProps> = ({
   return (
     <button
       type="button"
-      className={`btn-sm btn gap-2 rounded-2xl lg:btn-md ${
+      className={`btn btn-sm gap-2 rounded-2xl lg:btn-md ${
         !isFollowed ? 'btn-ghost outline' : 'btn-primary'
       }`}
       onClick={() => {

src/components/UserPage/UserHeader.tsx

@@ -30,9 +30,9 @@ const UserHeader: FC<UserHeaderProps> = ({ user }) => {
   const { user: currentUser } = useContext(UserContext);
 
   return (
-    <header className="card text-center items-center">
+    <header className="card items-center text-center">
-      <div className="card-body items-center w-full">
+      <div className="card-body w-full items-center">
-        <div className="w-40 h-40">
+        <div className="h-40 w-40">
           <UserAvatar user={user} />
         </div>
 

src/components/ui/CommentsComponent.tsx

@@ -107,7 +107,7 @@ const CommentsComponent: FC<CommentsComponentProps> = ({
                 >
                   <button
                     type="button"
-                    className="btn-ghost btn-sm btn"
+                    className="btn btn-ghost btn-sm"
                     aria-label="Scroll back to top of comments"
                     onClick={() => {
                       commentSectionRef.current?.scrollIntoView({

src/components/ui/CustomToast.tsx

@@ -32,13 +32,13 @@ const CustomToast: FC<{ children: ReactNode }> = ({ children }) => {
           const alertType = toastToClassName(t.type);
           return (
             <div
-              className={`alert ${alertType} flex w-full items-start justify-between shadow-lg animate-in fade-in duration-200 lg:w-4/12`}
+              className={`alert ${alertType} flex w-full items-start justify-between shadow-lg duration-200 animate-in fade-in lg:w-4/12`}
             >
               <p className="w-full text-left">{resolveValue(t.message, t)}</p>
               {t.type !== 'loading' && (
                 <div>
                   <button
-                    className="btn-ghost btn-xs btn-circle btn"
+                    className="btn btn-circle btn-ghost btn-xs"
                     onClick={() => toast.dismiss(t.id)}
                   >
                     <FaTimes />

src/components/ui/LikeButton.tsx

@@ -11,7 +11,7 @@ const LikeButton: FC<LikeButtonProps> = ({ isLiked, handleLike, loading }) => {
   return (
     <button
       type="button"
-      className={`btn-sm btn gap-2 rounded-2xl lg:btn-md ${
+      className={`btn btn-sm gap-2 rounded-2xl lg:btn-md ${
         !isLiked ? 'btn-ghost outline' : 'btn-primary'
       }`}
       onClick={() => {

src/components/ui/Navbar.tsx

@@ -38,12 +38,12 @@ const MobileLinks: FC = () => {
   return (
     <div className="flex-none lg:hidden">
       <div className="dropdown-end dropdown">
-        <label tabIndex={0} className="btn-ghost btn-circle btn">
+        <label tabIndex={0} className="btn btn-circle btn-ghost">
           <GiHamburgerMenu />
         </label>
         <ul
           tabIndex={0}
-          className="menu-compact dropdown-content menu rounded-box mt-3 w-48 bg-base-100 p-2 shadow"
+          className="menu-compact menu dropdown-content rounded-box mt-3 w-48 bg-base-100 p-2 shadow"
         >
           {pages.map((page) => (
             <li key={page.slug}>
@@ -66,7 +66,7 @@ const Navbar = () => {
   return (
     <div className="navbar sticky top-0 z-50 bg-primary text-primary-content">
       <div className="flex-1">
-        <Link className="btn-ghost btn normal-case" href="/">
+        <Link className="btn btn-ghost normal-case" href="/">
           <span className="cursor-pointer text-lg font-bold">The Biergarten App</span>
         </Link>
       </div>
@@ -78,7 +78,7 @@ const Navbar = () => {
         <div>
           {theme === 'light' ? (
             <button
-              className="btn-ghost btn-md btn-circle btn"
+              className="btn btn-circle btn-ghost btn-md"
               data-set-theme="dark"
               data-act-class="ACTIVECLASS"
               onClick={() => setTheme('dark')}
@@ -87,7 +87,7 @@ const Navbar = () => {
             </button>
           ) : (
             <button
-              className="btn-ghost btn-md btn-circle btn"
+              className="btn btn-circle btn-ghost btn-md"
               data-set-theme="light"
               data-act-class="ACTIVECLASS"
               onClick={() => setTheme('light')}

src/components/ui/forms/Button.tsx

@@ -14,7 +14,7 @@ const Button: FunctionComponent<FormButtonProps> = ({
   // eslint-disable-next-line react/button-has-type
   <button
     type={type}
-    className={`btn-primary btn w-full rounded-xl`}
+    className={`btn btn-primary w-full rounded-xl`}
     disabled={isSubmitting}
   >
     {children}

src/components/ui/forms/FormPageLayout.tsx

@@ -22,7 +22,7 @@ const FormPageLayout: FC<FormPageLayoutProps> = ({
     <div className="my-20 flex flex-col items-center justify-center">
       <div className="w-11/12 lg:w-9/12 2xl:w-7/12">
         <div className="tooltip tooltip-right" data-tip={backLinkText}>
-          <Link href={backLink} className="btn-ghost btn-sm btn p-0">
+          <Link href={backLink} className="btn btn-ghost btn-sm p-0">
             <BiArrowBack className="text-xl" />
           </Link>
         </div>

src/components/ui/forms/FormSelect.tsx

@@ -45,7 +45,7 @@ const FormSelect: FunctionComponent<FormSelectProps> = ({
 }) => (
   <select
     id={id}
-    className={`select-bordered select block w-full rounded-lg ${
+    className={`select select-bordered block w-full rounded-lg ${
       error ? 'select-error' : ''
     }`}
     placeholder={placeholder}

src/components/ui/forms/FormTextArea.tsx

@@ -40,7 +40,7 @@ const FormTextArea: FunctionComponent<FormTextAreaProps> = ({
   <textarea
     id={id}
     placeholder={placeholder}
-    className={`text-md textarea-bordered textarea m-0 w-full resize-none rounded-lg border border-solid transition ease-in-out  ${
+    className={`text-md textarea textarea-bordered m-0 w-full resize-none rounded-lg border border-solid transition ease-in-out  ${
       error ? 'textarea-error' : ''
     }`}
     {...formValidationSchema}

src/components/ui/forms/FormTextInput.tsx

@@ -48,7 +48,7 @@ const FormTextInput: FunctionComponent<FormInputProps> = ({
     id={id}
     type={type}
     placeholder={placeholder}
-    className={`input-bordered input w-full appearance-none rounded-lg transition ease-in-out ${
+    className={`input input-bordered w-full appearance-none rounded-lg transition ease-in-out ${
       error ? 'input-error' : ''
     }`}
     {...formValidationSchema}

src/emails/ForgotEmail.tsx

@@ -12,7 +12,7 @@ const ForgotEmail: FC<ForgotEmailProps> = ({ name, url }) => {
   return (
     <Tailwind>
       <Container className="mx-auto">
-        <Section className="p-4 flex flex-col justify-center items-center">
+        <Section className="flex flex-col items-center justify-center p-4">
           <Heading className="text-2xl font-bold">Forgot Password</Heading>
           <Text className="my-4">Hi {name},</Text>
           <Text className="my-4">
@@ -23,7 +23,7 @@ const ForgotEmail: FC<ForgotEmailProps> = ({ name, url }) => {
             href={url}
             target="_blank"
             rel="noopener noreferrer"
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
           >
             Reset Password
           </Button>

src/pages/account/index.tsx

@@ -35,7 +35,7 @@ const AccountPage: NextPage = () => {
       <div className="flex flex-col items-center">
         <div className="m-12 flex w-11/12 flex-col items-center justify-center space-y-3 lg:w-8/12">
           <div className="flex flex-col items-center space-y-3">
-            <div className="h-28 mb-1 w-28">
+            <div className="mb-1 h-28 w-28">
               <UserAvatar user={user} />
             </div>
 
@@ -47,7 +47,7 @@ const AccountPage: NextPage = () => {
 
           <div className="h-full w-full">
             <Tab.Group>
-              <Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl">
+              <Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
                 <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
                   Account Info and Security
                 </Tab>

src/pages/account/profile.tsx

@@ -125,7 +125,7 @@ const ProfilePage: NextPage<ProfilePageProps> = ({ user }) => {
               disabled={isSubmitting}
               type="file"
               id="userAvatar"
-              className="file-input-bordered file-input w-full"
+              className="file-input file-input-bordered w-full"
               {...register('userAvatar')}
             />
           </FormSegment>

src/pages/beers/[id]/index.tsx

@@ -74,7 +74,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
               </div>
             ) : (
               <Tab.Group>
-                <Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl">
+                <Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
                   <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
                     Comments
                   </Tab>

src/pages/beers/index.tsx

@@ -79,7 +79,7 @@ const BeerPage: NextPage = () => {
               >
                 <button
                   type="button"
-                  className="btn-ghost btn-sm btn"
+                  className="btn btn-ghost btn-sm"
                   aria-label="Scroll back to top of page."
                   onClick={() => {
                     pageRef.current?.scrollIntoView({

src/pages/beers/search.tsx

@@ -50,7 +50,7 @@ const SearchPage: NextPage = () => {
             <input
               type="text"
               id="search"
-              className="input-bordered input w-full rounded-lg"
+              className="input input-bordered w-full rounded-lg"
               onChange={onChange}
               value={searchValue}
             />

src/pages/beers/styles/[id]/index.tsx

@@ -40,7 +40,7 @@ const BeerStyleByIdPage: NextPage<BeerStylePageProps> = ({ beerStyle }) => {
               </div>
             ) : (
               <Tab.Group>
-                <Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl">
+                <Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
                   <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
                     Comments
                   </Tab>

src/pages/beers/styles/index.tsx

@@ -79,7 +79,7 @@ const BeerStylePage: NextPage = () => {
               >
                 <button
                   type="button"
-                  className="btn-ghost btn-sm btn"
+                  className="btn btn-ghost btn-sm"
                   aria-label="Scroll back to top of page."
                   onClick={() => {
                     pageRef.current?.scrollIntoView({

src/pages/breweries/[id]/edit.tsx

@@ -117,14 +117,14 @@ const EditBreweryPostPage: NextPage<EditPageProps> = ({ breweryPost }) => {
             <div className="w-full space-y-3">
               <button
                 disabled={isSubmitting}
-                className="btn-primary btn w-full"
+                className="btn btn-primary w-full"
                 type="submit"
               >
                 {isSubmitting ? 'Saving...' : 'Save'}
               </button>
 
               <button
-                className="btn-primary btn w-full"
+                className="btn btn-primary w-full"
                 type="button"
                 onClick={handleDelete}
               >

src/pages/breweries/[id]/index.tsx

@@ -85,7 +85,7 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost, mapboxToken
                   token={mapboxToken}
                 />
                 <Tab.Group>
-                  <Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl">
+                  <Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
                     <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
                       Comments
                     </Tab>

src/pages/breweries/index.tsx

@@ -58,13 +58,13 @@ const BreweryPage: NextPage<BreweryPageProps> = () => {
                   className="tooltip tooltip-left"
                   data-tip="Create a new brewery post"
                 >
-                  <Link href="/breweries/create" className="btn-ghost btn-sm btn">
+                  <Link href="/breweries/create" className="btn btn-ghost btn-sm">
                     <FaPlus className="text-lg" />
                   </Link>
                 </div>
               )}
               <div className="tooltip tooltip-left" data-tip="View map">
-                <Link className="btn-ghost btn-sm btn" href="/breweries/map">
+                <Link className="btn btn-ghost btn-sm" href="/breweries/map">
                   <FaMap className="text-lg" />
                 </Link>
               </div>
@@ -111,7 +111,7 @@ const BreweryPage: NextPage<BreweryPageProps> = () => {
               >
                 <button
                   type="button"
-                  className="btn-ghost btn-sm btn"
+                  className="btn btn-ghost btn-sm"
                   aria-label="Scroll back to top of page."
                   onClick={() => {
                     pageRef.current?.scrollIntoView({

src/pages/users/[id].tsx

@@ -24,7 +24,7 @@ const UserInfoPage: FC<UserInfoPageProps> = ({ user }) => {
         <meta name="description" content="User information" />
       </Head>
       <>
-        <main className="mb-12 mt-10 flex flex-col w-full items-center justify-center">
+        <main className="mb-12 mt-10 flex w-full flex-col items-center justify-center">
           <div className="w-11/12 space-y-3 xl:w-9/12 2xl:w-8/12">
             <UserHeader user={user} />
           </div>

src/pages/users/confirm.tsx

@@ -48,7 +48,7 @@ const ConfirmUserPage: FC = () => {
               Your confirmation token is invalid or is expired.
             </p>
             <button
-              className="btn-outline btn-sm btn normal-case"
+              className="btn btn-outline btn-sm normal-case"
               onClick={onClick}
               type="button"
             >

src/pages/users/forgot-password.tsx

@@ -41,10 +41,10 @@ const ForgotPasswordPage: NextPage<ForgotPasswordPageProps> = () => {
   };
 
   return (
-    <div className="flex flex-col items-center h-full">
+    <div className="flex h-full flex-col items-center">
-      <div className="xl:w-6/12 w-10/12 mt-64 text-center flex flex-col space-y-3">
+      <div className="mt-64 flex w-10/12 flex-col space-y-3 text-center xl:w-6/12">
         <div className="space-y-1">
-          <div className="flex flex-col items-center justify-center my-2">
+          <div className="my-2 flex flex-col items-center justify-center">
             <FaUserCircle className="text-3xl" />
             <h1 className="text-3xl font-bold">Forgot Your Password?</h1>
           </div>