dynamically compute Tailwind CSS version based on tailwindcss package

Only use the {major}.{minor} version

Author: RobinMalfait

src/components/header.tsx

@@ -7,6 +7,9 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { IconButton } from "./icon-button";
 import { SearchButton } from "./search";
+import { version } from "tailwindcss/package.json";
+
+const TAILWINDCSS_VERSION = version.split(".").slice(0, 2).join(".");
 
 function Logo(props: React.ComponentProps<"svg">) {
   return (
@@ -54,7 +57,7 @@ function VersionPicker() {
         className="flex items-center gap-0.5 rounded-2xl bg-gray-950/5 py-0.5 pr-1.5 pl-2.5 text-xs/5 font-medium text-gray-950 tabular-nums hover:bg-gray-950/7.5 data-active:bg-gray-950/7.5 dark:bg-white/10 dark:text-white dark:hover:bg-white/12.5 dark:data-active:bg-white/12.5"
         aria-label="Select version of library"
       >
-        v4.2
+        v{TAILWINDCSS_VERSION}
         <ChevronDownIcon className="size-4 fill-gray-400" />
       </MenuButton>
       <MenuItems
@@ -63,7 +66,7 @@ function VersionPicker() {
       >
         <MenuItem disabled>
           <div className="flex items-center justify-between gap-2 rounded-lg px-2.5 data-active:bg-gray-950/5 dark:data-active:bg-white/10">
-            v4.2
+            v{TAILWINDCSS_VERSION}
             <CheckIcon className="size-4" />
           </div>
         </MenuItem>