fix

.prettierrc

@@ -1 +1,2 @@
 tabWidth: 4
+plugins: ["prettier-plugin-tailwindcss"]

app/page.tsx

@@ -5,7 +5,7 @@ export default function Home() {
     return (
         <>
             <Header />
-            <div className="mt-6 mx-auto max-w-3xl px-4">
+            <div className="mx-auto mt-6 max-w-3xl px-4">
                 <p className="mb-3 border-b-4 border-indigo-600 bg-indigo-600/20 p-1 text-2xl font-bold">
                     歴史
                 </p>

components/pages/home/header.tsx

@@ -25,7 +25,7 @@ const Header: React.FC = async () => {
     const data = await res.json();
     const avatarURL = `https://cdn.discordapp.com/avatars/739702692393517076/${data.avatar}.png?size=1024`;
     return (
-        <header className="h-screen w-screen flex justify-center items-center">
+        <header className="flex h-screen w-screen items-center justify-center">
             <div>
                 <Image
                     alt="avatar"
@@ -34,8 +34,8 @@ const Header: React.FC = async () => {
                     height={156}
                     className="mb-2 rounded-full"
                 />
-                <h1 className="text-2xl font-bold text-center">tuna2134</h1>
+                <h1 className="text-center text-2xl font-bold">tuna2134</h1>
-                <div className="flex justify-center space-x-2 mt-2">
+                <div className="mt-2 flex justify-center space-x-2">
                     {SNSIcons.map((sns, key) => (
                         <Link href={sns.url} key={key}>
                             <sns.icon height={32} width={32} />

components/pages/home/timeline.tsx

@@ -12,10 +12,10 @@ const Timeline: React.FC<Props> = ({ timeline }) => {
     return (
         <ol className="relative border-s border-gray-200">
             {timeline.map((data, index) => (
-                <li className="mb-10 ms-6" key={index}>
+                <li className="ms-6 mb-10" key={index}>
-                    <div className="absolute w-3 h-3 bg-[#00F3A4] rounded-full mt-1.5 -start-1.5 border border-white"></div>
+                    <div className="absolute -start-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-[#00F3A4]"></div>
-                    <p className="text-gray-900/75 mb-1">{data.datetime}</p>
+                    <p className="mb-1 text-gray-900/75">{data.datetime}</p>
-                    <h1 className="text-2xl font-bold mb-2 tracking-wider">
+                    <h1 className="mb-2 text-2xl font-bold tracking-wider">
                         {data.title}
                     </h1>
                     <p>{data.description}</p>

package.json

@@ -21,6 +21,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

pnpm-lock.yaml

@@ -36,6 +36,9 @@ importers:
       prettier:
         specifier: ^3.5.3
         version: 3.5.3
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.11
+        version: 0.6.11(prettier@3.5.3)
       tailwindcss:
         specifier: ^4
         version: 4.1.5
@@ -469,6 +472,61 @@ packages:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  prettier-plugin-tailwindcss@0.6.11:
+    resolution: {integrity: sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
   prettier@3.5.3:
     resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
     engines: {node: '>=14'}
@@ -868,6 +926,10 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  prettier-plugin-tailwindcss@0.6.11(prettier@3.5.3):
+    dependencies:
+      prettier: 3.5.3
+
   prettier@3.5.3: {}
 
   react-dom@19.1.0(react@19.1.0):