Use prettier-plugin-tailwindcss (#20)

# Use prettier-plugin-tailwindcss

## ♻️ Current situation & Problem

[prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)
ensures classes are ordered. It helps during development.


## ⚙️ Release Notes 
* Use prettier-plugin-tailwindcss

### Code of Conduct & Contributing Guidelines 

By submitting creating this pull request, you agree to follow our [Code
of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md):
- [x] I agree to follow the [Code of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md).

---------

Co-authored-by: Paul Schmiedmayer <[email protected]>

.prettierrc.cjs

@@ -0,0 +1,16 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health Next.js Template open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+
+const config = {
+  plugins: [require.resolve('prettier-plugin-tailwindcss')],
+  semi: false,
+  singleQuote: true,
+  experimentalTernaries: true,
+}
+
+module.exports = config

app/page.tsx

@@ -13,15 +13,15 @@ export default function Home() {
   const greeting = generateGreeting()
 
   return (
-    <div className="flex justify-center items-center min-h-screen">
+    <div className="flex min-h-screen items-center justify-center">
       <div className="flex flex-col items-center">
         <Image
           src={`${process.env.basePath || ''}/stanfordbiodesign.png`}
           alt="Stanford Biodesign Logo"
           width={634}
           height={235}
         />
-        <h1 className="text-3xl text-center mt-4">{`${greeting.message} to the ${greeting.project}`}</h1>
+        <h1 className="mt-4 text-center text-3xl">{`${greeting.message} to the ${greeting.project}`}</h1>
       </div>
     </div>
   )