prettier and things

.prettierrc

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

package-lock.json

@@ -6,6 +6,7 @@
     "": {
       "name": "example-with-tailwindcss",
       "dependencies": {
+        "@solid-primitives/storage": "^3.5.0",
         "@solidjs/router": "^0.13.3",
         "@solidjs/start": "^1.0.1",
         "autoprefixer": "^10.4.19",
@@ -14,6 +15,10 @@
         "tailwindcss": "^3.4.3",
         "vinxi": "^0.3.11"
       },
+      "devDependencies": {
+        "prettier": "^3.3.1",
+        "prettier-plugin-tailwindcss": "^0.6.2"
+      },
       "engines": {
         "node": ">=18"
       }
@@ -1911,6 +1916,34 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@solid-primitives/storage": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/storage/-/storage-3.5.0.tgz",
+      "integrity": "sha512-AqU3vrXz8XlxOgJIiP+oQxE/vFchGf4Qe7E5Xfa02DJdF9rD8CtiTmVZDBU08ViS7g0Nwc4IpStHvVO0jBMalQ==",
+      "dependencies": {
+        "@solid-primitives/utils": "^6.2.3"
+      },
+      "peerDependencies": {
+        "@tauri-apps/plugin-store": "*",
+        "solid-js": "^1.6.12"
+      },
+      "peerDependenciesMeta": {
+        "@tauri-apps/plugin-store": {
+          "optional": true
+        },
+        "solid-start": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@solid-primitives/utils": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-6.2.3.tgz",
+      "integrity": "sha512-CqAwKb2T5Vi72+rhebSsqNZ9o67buYRdEJrIFzRXz3U59QqezuuxPsyzTSVCacwS5Pf109VRsgCJQoxKRoECZQ==",
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
     "node_modules/@solidjs/router": {
       "version": "0.13.5",
       "resolved": "https://registry.npmjs.org/@solidjs/router/-/router-0.13.5.tgz",
@@ -5792,6 +5825,95 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/prettier": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.1.tgz",
+      "integrity": "sha512-7CAwy5dRsxs8PHXT3twixW9/OEll8MLE0VRPCJyl7CkS6VHGPSlsVaWTiASPTyGyYRyApxlaWTzwUxVNrhcwDg==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.2.tgz",
+      "integrity": "sha512-eFefm4cg+1c2B57+H274Qm//CTWBdtQN9ansl0YTP/8TC8x3bugCTQSS/e4FC5Ctl9djhTzsbcMrZ7x2/abIow==",
+      "dev": true,
+      "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-melody": "*",
+        "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-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-melody": {
+          "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-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
+        }
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",

package.json

@@ -7,6 +7,7 @@
     "start": "vinxi start"
   },
   "dependencies": {
+    "@solid-primitives/storage": "^3.5.0",
     "@solidjs/router": "^0.13.3",
     "@solidjs/start": "^1.0.1",
     "autoprefixer": "^10.4.19",
@@ -17,5 +18,9 @@
   },
   "engines": {
     "node": ">=18"
+  },
+  "devDependencies": {
+    "prettier": "^3.3.1",
+    "prettier-plugin-tailwindcss": "^0.6.2"
   }
 }

postcss.config.cjs

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/app.tsx

@@ -7,7 +7,7 @@ import "./app.css";
 export default function App() {
   return (
     <Router
-      root={props => (
+      root={(props) => (
         <>
           <Nav />
           <Suspense>{props.children}</Suspense>

src/components/Counter.tsx

@@ -4,7 +4,7 @@ export default function Counter() {
   const [count, setCount] = createSignal(0);
   return (
     <button
-      class="w-[200px] rounded-full bg-gray-100 border-2 border-gray-300 focus:border-gray-400 active:border-gray-400 px-[2rem] py-[1rem]" 
+      class="w-[200px] rounded-full bg-gray-100 border-2 border-gray-300 focus:border-gray-400 active:border-gray-400 px-[2rem] py-[1rem]"
       onClick={() => setCount(count() + 1)}
     >
       Clicks: {count()}

src/components/Nav.tsx

@@ -3,7 +3,9 @@ import { useLocation } from "@solidjs/router";
 export default function Nav() {
   const location = useLocation();
   const active = (path: string) =>
-    path == location.pathname ? "border-sky-600" : "border-transparent hover:border-sky-600";
+    path == location.pathname
+      ? "border-sky-600"
+      : "border-transparent hover:border-sky-600";
   return (
     <nav class="bg-sky-800">
       <ul class="container flex items-center p-3 text-gray-200">

src/routes/[...404].tsx

@@ -2,15 +2,10 @@ import { A } from "@solidjs/router";
 
 export default function NotFound() {
   return (
-    <main class="text-center mx-auto text-gray-700 p-4">
+    <main class="mx-auto p-4 text-center text-gray-700">
-      <h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">Not Found</h1>
+      <h1 class="max-6-xs my-16 text-6xl font-thin uppercase text-sky-700">
-      <p class="mt-8">
+        Not Found
-        Visit{" "}
+      </h1>
-        <a href="https://solidjs.com" target="_blank" class="text-sky-600 hover:underline">
-          solidjs.com
-        </a>{" "}
-        to learn how to build Solid apps.
-      </p>
       <p class="my-4">
         <A href="/" class="text-sky-600 hover:underline">
           Home

src/routes/about.tsx

@@ -1,18 +1,11 @@
 import { A } from "@solidjs/router";
-import Counter from "~/components/Counter";
 
 export default function About() {
   return (
-    <main class="text-center mx-auto text-gray-700 p-4">
+    <main class="mx-auto p-4 text-center text-gray-700">
-      <h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">About Page</h1>
+      <h1 class="max-6-xs my-16 text-6xl font-thin uppercase text-sky-700">
-      <Counter />
+        About Page
-      <p class="mt-8">
+      </h1>
-        Visit{" "}
-        <a href="https://solidjs.com" target="_blank" class="text-sky-600 hover:underline">
-          solidjs.com
-        </a>{" "}
-        to learn how to build Solid apps.
-      </p>
       <p class="my-4">
         <A href="/" class="text-sky-600 hover:underline">
           Home

src/routes/index.tsx

@@ -3,12 +3,18 @@ import Counter from "~/components/Counter";
 
 export default function Home() {
   return (
-    <main class="text-center mx-auto text-gray-700 p-4">
+    <main class="mx-auto p-4 text-center text-gray-700">
-      <h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">Hello world!</h1>
+      <h1 class="max-6-xs my-16 text-6xl font-thin uppercase text-sky-700">
+        Hello world!
+      </h1>
       <Counter />
       <p class="mt-8">
         Visit{" "}
-        <a href="https://solidjs.com" target="_blank" class="text-sky-600 hover:underline">
+        <a
+          href="https://solidjs.com"
+          target="_blank"
+          class="text-sky-600 hover:underline"
+        >
           solidjs.com
         </a>{" "}
         to learn how to build Solid apps.

src/routes/magus.tsx

@@ -0,0 +1,7 @@
+export default function About() {
+  return (
+    <main class="mx-auto p-4 text-center text-gray-700">
+      <p>Welcome to magus!</p>
+    </main>
+  );
+}

tailwind.config.cjs

@@ -2,7 +2,7 @@
 module.exports = {
   content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
   theme: {
-    extend: {}
+    extend: {},
   },
-  plugins: []
+  plugins: [],
 };