.prettierrc

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

package-lock.json

@@ -6,7 +6,6 @@
     "": {
       "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",
@@ -15,10 +14,6 @@
         "tailwindcss": "^3.4.3",
         "vinxi": "^0.3.11"
       },
-      "devDependencies": {
-        "prettier": "^3.3.1",
-        "prettier-plugin-tailwindcss": "^0.6.2"
-      },
       "engines": {
         "node": ">=18"
       }
@@ -1916,34 +1911,6 @@
         "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",
@@ -5825,95 +5792,6 @@
       "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,7 +7,6 @@
     "start": "vinxi start"
   },
   "dependencies": {
-    "@solid-primitives/storage": "^3.5.0",
     "@solidjs/router": "^0.13.3",
     "@solidjs/start": "^1.0.1",
     "autoprefixer": "^10.4.19",
@@ -18,9 +17,5 @@
   },
   "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,9 +3,7 @@ import { useLocation } from "@solidjs/router";
 export default function Nav() {
   const location = useLocation();
   const active = (path: string) =>
-    path == location.pathname
+    path == location.pathname ? "border-sky-600" : "border-transparent hover:border-sky-600";
-      ? "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,10 +2,15 @@ import { A } from "@solidjs/router";
 
 export default function NotFound() {
   return (
-    <main class="mx-auto p-4 text-center text-gray-700">
+    <main class="text-center mx-auto text-gray-700 p-4">
-      <h1 class="max-6-xs my-16 text-6xl font-thin uppercase text-sky-700">
+      <h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">Not Found</h1>
-        Not Found
+      <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/about.tsx

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

@@ -1,7 +0,0 @@
-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: []
 };