Chore: Configure prettier for Tailwind

package.json

@@ -41,6 +41,7 @@
     "lint-staged": "^13.1.0",
     "postcss": "^8.4.21",
     "prettier": "^2.8.2",
+    "prettier-plugin-tailwindcss": "^0.2.1",
     "pretty-quick": "^3.1.3",
     "tailwindcss": "^3.2.4"
   },

src/components/ChampPlayer.tsx

@@ -72,6 +72,7 @@ export default function ChampPlayer({
   });
 
   const xCoordinatePercentage = getPositionOffsetPercent(x, widthPercent);
+
   const yCoordinatePercentage = getPositionOffsetPercent(y, heightPercent);
 
   return (
@@ -92,7 +93,7 @@ export default function ChampPlayer({
       </p>
 
       <Image
-        className="w-full h-full object-contain"
+        className="h-full w-full object-contain"
         src={mcpuffersonFigure}
         alt=""
       />

src/components/Header.tsx

@@ -7,35 +7,35 @@ import GoNoodleLogoLightSVG from "@src/svgs/gonoodle-logo-light.svg";
 
 export default function Header() {
   return (
-    <header className="absolute top-0 p-4 sm:p-6 w-full flex items-start justify-center z-10">
+    <header className="absolute top-0 z-10 flex w-full items-start justify-center p-4 sm:p-6">
       <div className="flex-1">
         <span className="sr-only">GoNoodle</span>
         <GoNoodleLogoLightSVG className="w-32 xl:w-40" aria-hidden />
       </div>
 
       <ul className="flex space-x-3">
-        <li className="w-40 bg-black rounded-md py-4 px-6 flex flex-col items-center">
-          <p className="font-rounded text-white mb-2">GoNoodle</p>
+        <li className="flex w-40 flex-col items-center rounded-md bg-black py-4 px-6">
+          <p className="mb-2 font-rounded text-white">GoNoodle</p>
           <Image
             className="w-20 xl:w-24"
             src={mcpuffersonFigurePhase2}
             alt=""
           />
         </li>
-        <li className="w-40 bg-purple rounded-md py-4 px-6 flex flex-col items-center">
+        <li className="flex w-40 flex-col items-center rounded-md bg-purple py-4 px-6">
           <p className="font-rounded text-white">SuperNoodle</p>
           <Image className="w-14 xl:w-16" src={omPetalheadFigure} alt="" />
         </li>
       </ul>
 
-      <div className="flex items-center justify-end space-x-4 ml-auto flex-1">
-        <p className="text-white font-rounded text-right leading-tight">
+      <div className="ml-auto flex flex-1 items-center justify-end space-x-4">
+        <p className="text-right font-rounded leading-tight text-white">
           Mrs. Miller&apos;s 1st Graders
         </p>
 
-        <div className="rounded-full w-12 overflow-hidden">
+        <div className="w-12 overflow-hidden rounded-full">
           <Image
-            className="bg-purple-light rounded-full scale-150 -translate-x-1 translate-y-2"
+            className="-translate-x-1 translate-y-2 scale-150 rounded-full bg-purple-light"
             src={mcpuffersonFigure}
             alt="Current profile champ is McPufferson"
           />

src/components/Tile.tsx

@@ -16,7 +16,7 @@ function OutlineTile({
   return (
     <div
       className={cn(
-        "w-full h-full border-2 border-purple-dark rounded",
+        "h-full w-full rounded border-2 border-purple-dark",
         className,
       )}
     >
@@ -31,8 +31,8 @@ function OutlineTile({
  */
 function JunctionTile() {
   return (
-    <OutlineTile className="flex justify-center items-center">
-      <div className="bg-purple w-1/2 rounded-full aspect-square border border-black" />
+    <OutlineTile className="flex items-center justify-center">
+      <div className="aspect-square w-1/2 rounded-full border border-black bg-purple" />
     </OutlineTile>
   );
 }
@@ -43,12 +43,12 @@ function JunctionTile() {
  */
 function StartTile() {
   return (
-    <div className="h-full w-full flex flex-col items-center justify-center">
+    <div className="flex h-full w-full flex-col items-center justify-center">
       <StartTileLogoSVG
         className="w-full max-xl:scale-125 xl:w-full"
         aria-hidden
       />
-      <p className="text-white text-sm xl:text-2xl font-medium translate-y-1">
+      <p className="translate-y-1 text-sm font-medium text-white xl:text-2xl">
         Start
       </p>
     </div>
@@ -66,7 +66,7 @@ function Path({ className, direction }: PathProps) {
   return (
     <div
       className={cn(
-        "bg-purple-dark w-[51%] h-3 xl:h-5 absolute right-1/2 top-1/2 -translate-y-1/2 origin-right",
+        "absolute right-1/2 top-1/2 h-3 w-[51%] origin-right -translate-y-1/2 bg-purple-dark xl:h-5",
         direction === "up" && "rotate-90",
         direction === "right" && "rotate-180",
         direction === "down" && "rotate-[270deg]",
@@ -87,14 +87,14 @@ interface TilePathsProps extends PropsWithChildren {
 function TilePaths({ paths = [], widthPercent, children }: TilePathsProps) {
   return (
     <div
-      className="w-[var(--col-width)] p-1 md:p-3 aspect-square relative"
+      className="relative aspect-square w-[var(--col-width)] p-1 md:p-3"
       style={{ "--col-width": `${widthPercent}%` }}
     >
       {paths.map((direction, i) => (
         <Path direction={direction} key={i} />
       ))}
 
-      <div className="w-full h-full relative">{children}</div>
+      <div className="relative h-full w-full">{children}</div>
     </div>
   );
 }

src/pages/_app.tsx

@@ -7,7 +7,7 @@ import "@src/styles/globals.css";
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
-      <div className="absolute bottom-full left-1/2 -translate-x-1/2 shadow-purple-dark/50 shadow-[0px_400px_500px] xl:shadow-purple-dark/50 xl:shadow-[0px_500px_500px] w-[600px] xl:w-[800px] aspect-square rounded-full" />
+      <div className="absolute bottom-full left-1/2 aspect-square w-[600px] -translate-x-1/2 rounded-full shadow-[0px_400px_500px] shadow-purple-dark/50 xl:w-[800px] xl:shadow-[0px_500px_500px] xl:shadow-purple-dark/50" />
 
       <Header />
 

src/pages/_document.tsx

@@ -1,6 +1,4 @@
-import {
-  Html, Head, Main, NextScript,
-} from "next/document";
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (

src/pages/index.tsx

@@ -15,7 +15,7 @@ export interface HomeProps {
 
 export default function Home({ world }: HomeProps) {
   return (
-    <div className="relative overflow-x-hidden min-h-screen bg-gradient-to-b from-purple/5 to-purple/30 bg-no-repeat">
+    <div className="relative min-h-screen overflow-x-hidden bg-gradient-to-b from-purple/5 to-purple/30 bg-no-repeat">
       <Head>
         <title>SuperNoodle</title>
         <meta name="description" content="Generated by create next app" />
@@ -24,22 +24,22 @@ export default function Home({ world }: HomeProps) {
       </Head>
 
       <SuperNoodleWorldLandscapeSVG
-        className="w-full absolute bottom-0"
+        className="absolute bottom-0 w-full"
         aria-hidden
       />
 
       <SuperNoodleWorldCloudPairSVG
-        className="w-72 absolute top-10 right-0 translate-x-1/4"
+        className="absolute top-10 right-0 w-72 translate-x-1/4"
         aria-hidden
       />
 
       <SuperNoodleWorldCloudSingleSVG
-        className="w-40 absolute top-1/4 -left-12"
+        className="absolute top-1/4 -left-12 w-40"
         aria-hidden
       />
 
-      <div className="relative mt-64 xl:mt-72 mb-72 xl:mb-96 lg:w-3/4 px-4 mx-auto flex flex-col items-center">
-        <h1 className="text-white text-6xl lg:text-7xl xl:text-8xl font-semibold mb-8 text-center">
+      <div className="relative mx-auto mt-64 mb-72 flex flex-col items-center px-4 lg:w-3/4 xl:mt-72 xl:mb-96">
+        <h1 className="mb-8 text-center text-6xl font-semibold text-white lg:text-7xl xl:text-8xl">
           {world.title}
         </h1>
         <WorldBoard position={world.position} board={world.board} />

yarn.lock

@@ -4305,6 +4305,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-plugin-tailwindcss@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.1.tgz#989b35afd86c550cb671da69891aba4f4a051159"
+  integrity sha512-aIO8IguumORyRsmT+E7JfJ3A9FEoyhqZR7Au7TBOege3VZkgMvHJMkufeYp4zjnDK2iq4ktkvGMNOQR9T8lisQ==
+
 prettier@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.2.tgz#c4ea1b5b454d7c4b59966db2e06ed7eec5dfd160"