chore(deps)!: update tailwind styles

https://starlight.astro.build/guides/css-and-tailwind/#tailwind-css

Author: Indyandie

package-lock.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@astrojs/starlight": "^0.34.0",
+    "@astrojs/starlight-tailwind": "^4.0.1",
     "@tailwindcss/vite": "^4.0.3",
     "astro": "^5.7.4",
     "starlight-openapi": "^0.16.0",

package.json

@@ -9,15 +9,16 @@ const graphql = baseUrl + 'graphql/'
 <nav>
   <ul
     class="
-      flex gap-6
-      text-(--sl-color-white) pr-4
+      flex gap-6 pr-4
+      [&_a]:text-(--sl-color-white)
       [&_a]:hover:text-(--sl-color-accent-high)
       [&_a]:hover:font-bold
       [&_a]:hover:underline
       [&_a]:font-semibold
       [&_span]:opacity-50
       [&_span]:cursor-default
       [&_span]:select-none
+      list-none
     "
   >
     <li>

src/components/PokeNav.astro

@@ -1,4 +1,8 @@
-@import "tailwindcss";
+@layer base, starlight, theme, components, utilities;
+
+@import "@astrojs/starlight-tailwind";
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
 
 /* Dark mode colors. */
 :root {
@@ -14,6 +18,7 @@
   --sl-color-gray-6: #24272f;
   --sl-color-black: #17181c;
 }
+
 /* Light mode colors. */
 :root[data-theme="light"] {
   --sl-color-accent-low: #f8cbc0;