Add custom Tailwind utility for version info styling (12px, light weight)

Author: codebude

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "rm -f public/styles.css && npm run version:sync && npm run build-css-prod && echo '✅ Build completed successfully'",
     "dev": "npm run build-css & cd public && python3 -m http.server 8000",
-    "build-css": "tailwindcss -i ./src/input.css -o ./public/styles.css --watch",
+    "build-css": "tailwindcss -i ./src/input.css -o ./public/styles.css",
     "build-css-prod": "tailwindcss -i ./src/input.css -o ./public/styles.css --minify",
     "version:sync": "node -e \"const fs = require('fs'); const { execSync } = require('child_process'); const tag = execSync('git describe --tags --abbrev=0').toString().trim().replace(/^v/, ''); const pkg = JSON.parse(fs.readFileSync('package.json')); pkg.version = tag; fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\\n'); console.log('Updated version to:', tag);\""
   },

public/index.html

@@ -50,9 +50,9 @@ <h1 class="text-2xl font-bold truncate">takeCode</h1>
                             About & Credits
                         </button>
                     </div>
-                    <div class="flex flex-col items-end space-y-1">
-                        <span class="text-gray-400 text-xs dark:text-gray-500">__VERSION__</span>
-                        <span id="total-snippets" class="text-gray-400 text-xs dark:text-gray-500">Loading...</span>
+                    <div class="flex flex-col items-end space-y-0">
+                        <span class="text-gray-400 text-version-info dark:text-gray-500">__VERSION__</span>
+                        <span id="total-snippets" class="text-gray-400 text-version-info dark:text-gray-500">Loading...</span>
                     </div>
                 </div>
             </footer>