add tailwind and associated parts to apps/rank

apps/rank/.prettierrc.cjs

@@ -0,0 +1,5 @@
+/** @type {import("prettier").Options} */
+module.exports = {
+    ...require("@pompydev/prettier-config"),
+    plugins: ["prettier-plugin-tailwindcss"],
+}

apps/rank/app.vue

@@ -1,3 +1,19 @@
+<script setup>
+const colorMode = useColorMode()
+</script>
+
 <template>
-    <NuxtPage />
+    <div class="min-h-screen bg-white dark:bg-gray-800 dark:text-gray-200">
+        <p class="p-4 pb-2">
+            <select
+                v-model="colorMode.preference"
+                class="h-8 w-24 border dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+            >
+                <option value="system">System</option>
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+            </select>
+        </p>
+        <NuxtPage class="mx-auto p-4" />
+    </div>
 </template>

apps/rank/assets/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/rank/nuxt.config.ts

@@ -5,6 +5,7 @@ export default defineNuxtConfig({
     compatibilityDate: "2024-11-01",
     devServer: { port: 3001 },
     devtools: { enabled: true },
+    modules: ["@nuxtjs/color-mode", "@nuxtjs/tailwindcss"],
     app: {
         head: {
             title, // default fallback title
@@ -14,4 +15,9 @@ export default defineNuxtConfig({
             },
         },
     },
+
+    // https://color-mode.nuxtjs.org/#configuration
+    colorMode: {
+        classSuffix: "",
+    },
 })

apps/rank/package.json

@@ -10,8 +10,15 @@
         "postinstall": "nuxt prepare"
     },
     "dependencies": {
+        "@pompydev/prettier-config": "workspace:*",
+        "@pompydev/tailwind-config": "workspace:*",
+        "@nuxtjs/color-mode": "3.5.2",
         "nuxt": "3.16.0",
         "vue": "3.5.13",
         "vue-router": "4.5.0"
+    },
+    "devDependencies": {
+        "@nuxtjs/tailwindcss": "6.13.2",
+        "prettier-plugin-tailwindcss": "^0.5.9"
     }
 }

apps/rank/pages/content-creators.vue

@@ -5,6 +5,6 @@ useHead({
 </script>
 
 <template>
-    <h1>Content creators ranking</h1>
-    <NuxtLink href="/">Back</NuxtLink>
+    <h1 class="text-4xl font-black">Content creators ranking</h1>
+    <NuxtLink href="/" class="underline">Back</NuxtLink>
 </template>

apps/rank/pages/index.vue

@@ -1,8 +1,11 @@
 <template>
-    <h1>
+    <h1 class="text-4xl font-black">
         pomp's<br />
         biased & opinionated<br />
         rankings DB
     </h1>
-    <NuxtLink href="/content-creators">Content Creators</NuxtLink>
+
+    <NuxtLink href="/content-creators" class="underline">
+        Content Creators
+    </NuxtLink>
 </template>

apps/rank/tailwind.config.js

@@ -0,0 +1,6 @@
+import myPreset from "@pompydev/tailwind-config/tailwind.config.js"
+
+/** @type {import('tailwindcss').Config} */
+export default {
+    presets: [myPreset],
+}