perf: use responsive image and reduce @import tailwindcss, dev: use contentIntellisense

Author: aster-void

astro.config.ts

@@ -27,9 +27,14 @@ export default defineConfig({
 
   prefetch: {
     prefetchAll: true,
-    defaultStrategy: "viewport", //
+    defaultStrategy: "hover",
+  },
+  image: {
+    experimentalLayout: "responsive",
   },
   experimental: {
     clientPrerender: true,
+    responsiveImages: true,
+    contentIntellisense: true,
   },
 });

src/components/ArticleList.astro

@@ -90,15 +90,9 @@ const articlesWithExcerpts = await Promise.all(
   }
 </ul>
 <style>
-  @import "tailwindcss";
   @media (max-width: 64rem) {
     .variant-compact :nth-child(n + 3) a {
-      @apply hidden;
-    }
-  }
-  @media (max-width: 80rem) {
-    .variant-compact :nth-child(n + 4) a {
-      @apply hidden;
+      display: none;
     }
   }
 </style>

src/components/Header.astro

@@ -1,5 +1,4 @@
 ---
-import { ClientRouter, fade } from "astro:transitions";
 import { Icon } from "astro-icon/components";
 
 import banner from "../content/banner.ts";
@@ -49,7 +48,7 @@ const { focus } = Astro.props;
     )
   }
   <div class="flex h-16">
-    <a href="/" class="flex items-center px-4" data-astro-prefetch="load">
+    <a href="/" class="flex items-center px-4" data-astro-prefetch="viewport">
       <Logo class="ml-8 w-36" variant="default" />
     </a>
     <div aria-hidden="true" class="flex-grow"></div>
@@ -91,7 +90,7 @@ const { focus } = Astro.props;
             <a
               href={link.to}
               class="block px-4 py-2"
-              data-astro-prefetch="load"
+              data-astro-prefetch="viewport"
             >
               {link.title}
             </a>

src/components/ProjectList.astro

@@ -62,15 +62,14 @@ if (variant === "compact") {
 </ul>
 
 <style>
-  @import "tailwindcss";
   @media (max-width: 64rem) {
     li.variant-short:nth-child(n + 3) {
-      @apply hidden;
+      display: none;
     }
   }
   @media (max-width: 80rem) {
     li.variant-short:nth-child(n + 5) {
-      @apply hidden;
+      display: none;
     }
   }
 </style>

src/layouts/GlobalLayout.astro

@@ -21,13 +21,7 @@ const { title, description, focus } = Astro.props;
     <slot />
     <Footer />
     <style is:global>
-      @import "tailwindcss";
-      @plugin "@tailwindcss/typography";
-
-      /* do we need this? */
-      :root {
-        --color-primary-main: #00d372;
-      }
+      @import "../global.css";
     </style>
   </body>
 </html>

src/pages/donation.astro

@@ -73,9 +73,8 @@ import DonationHeader from "../images/donation-header.jpg";
   </article>
 
   <style>
-    @import "tailwindcss";
     article {
-      @apply mx-[20%];
+      margin-inline: 20%;
     }
   </style>
 </GlobalLayout>