refactor: sort tailwind classes with prettier

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

Author: remarkablemark

Diff for: .prettierrc.json

@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

Diff for: package-lock.json

@@ -35,6 +35,7 @@
     "lint-staged": "15.2.11",
     "postcss": "8.4.49",
     "prettier": "3.4.2",
+    "prettier-plugin-tailwindcss": "0.6.9",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "tailwindcss": "3.4.17",

Diff for: package.json

@@ -16,7 +16,7 @@ export default function App() {
     <main>
       <Message />
 
-      <section className="py-6 px-9">
+      <section className="px-9 py-6">
         <h1>Button Clicker</h1>
         <Counter />
         <Button />

Diff for: src/components/App.tsx

@@ -4,7 +4,7 @@ export default function Message() {
   const { message } = useMessageStore();
 
   return (
-    <header className="py-7 px-9 font-mono bg-neutral-900 text-gray-100">
+    <header className="bg-neutral-900 px-9 py-7 font-mono text-gray-100">
       {message}
     </header>
   );