tailwind 4 & other small cleanups

Hatchibombotar · Feb 15, 2025 · e25578c · e25578c
1 parent 46304ba
commit e25578c
Show file tree

Hide file tree

Showing 12 changed files with 5,771 additions and 14,718 deletions.
diff --git a/.astro/settings.json b/.astro/settings.json
@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1733513283182
+		"lastUpdateCheck": 1739477208795
 	}
 }
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,12 +1,15 @@
 import { defineConfig } from 'astro/config';
-import tailwind from '@astrojs/tailwind';
 
 import solidJs from "@astrojs/solid-js";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [solidJs(), tailwind()],
+  integrations: [solidJs()],
   build: {
     assets: "astro"
+  },
+  vite: {
+    plugins: [tailwindcss()]
   }
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,15 +13,14 @@
     "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.23",
-    "sass": "^1.58.0",
-    "tailwindcss": "^3.3.3",
-    "vite": "^3.0.0",
+    "tailwindcss": "^4.0.0",
+    "vite": "^6.1.0",
     "vite-plugin-solid": "^2.3.0"
   },
   "dependencies": {
-    "@astrojs/solid-js": "^5.0.0",
-    "@astrojs/tailwind": "^5.1.3",
-    "astro": "^5.0.3",
+    "@astrojs/solid-js": "^5.0.4",
+    "@tailwindcss/vite": "^4.0.6",
+    "astro": "^5.3.0",
     "solid-heroicons": "^3.1.1",
     "solid-icons": "^1.0.12",
     "solid-js": "^1.9.3",

diff --git a/postcss.config.js b/postcss.config.js
diff --git a/src/components/FeedPost.astro b/src/components/FeedPost.astro
@@ -4,7 +4,7 @@ import { FiLink, FiGithub, FiExternalLink } from "solid-icons/fi";
 const {post} = Astro.props
 ---
 <div class="flex flex-col-reverse items-center sm:items-start sm:flex-row gap-3 my-2">
-  <div class="flex-grow relative">
+  <div class="grow relative">
     <div class="hidden sm:block absolute -left-4">•</div>
     <h3 class="font-semibold">{post.title}</h3>
     <p class="text-xs text-neutral-800">{post.date}</p>

diff --git a/src/components/SkillIcons.tsx b/src/components/SkillIcons.tsx
@@ -17,7 +17,7 @@ export default function SkillIcons() {
                     }
                 }
                 return <button
-                    class="flex xs:justify-normal justify-center items-center m-2 text-left"
+                    class="flex xs:justify-normal justify-center items-center m-2 text-left cursor-pointer"
                     onClick={() => toggleLights()}
                 >
                     <div

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -5,8 +5,7 @@ const logo = "/assets/logo_small.png";
 ---
 
 <Root>
-  <div class="mx-auto max-w-2xl px-4 text-center sm:text-left">
-    <br class="my-5" />
+  <div class="mx-auto max-w-2xl px-4 text-center sm:text-left pt-5">
     <header class="pt-8">
       <div class="flex items-center justify-center sm:justify-normal">
         <img src={logo} class="h-16" transition:name="header-icon" />

diff --git a/src/layouts/Root.astro b/src/layouts/Root.astro
@@ -1,6 +1,5 @@
 ---
-import { ViewTransitions } from "astro:transitions";
-
+import "../main.css";
 ---
 
 <!doctype html>
@@ -17,26 +16,8 @@ import { ViewTransitions } from "astro:transitions";
     <meta name="color-scheme" content="light" />
 
     <title>Hatchibombotar</title>
-    <!-- <ViewTransitions fallback="none" /> -->
   </head>
   <body class="bg-gray-100">
     <slot />
   </body>
-</html>
-<style is:global>
-  *::-webkit-scrollbar {
-    @apply w-2.5 h-2.5 rounded-full;
-    background: #fcfcfc;
-  }
-
-  /* Handle */
-  *::-webkit-scrollbar-thumb {
-    @apply w-2.5 h-2.5 rounded-full;
-    background: #c4c4c4;
-  }
-
-  /* Handle on hover */
-  *::-webkit-scrollbar-thumb:hover {
-    background: #a2a2a2;
-  }
-</style>
+</html>
diff --git a/src/main.css b/src/main.css
@@ -0,0 +1,44 @@
+@import 'tailwindcss';
+@plugin "@tailwindcss/typography";
+
+
+@theme {
+  --breakpoint-xs: 340px;
+  --color-cool-50: #fcfcfc;
+  --color-cool-100: #eeeeee;
+  --color-cool-200: #a1a1a1;
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+*::-webkit-scrollbar {
+  @apply h-[10px] w-[10px]  rounded-full;
+  background: #fcfcfc;
+}
+
+/* Handle */
+*::-webkit-scrollbar-thumb {
+  @apply w-[10px] h-[10px] rounded-full;
+  background: #c4c4c4;
+}
+
+/* Handle on hover */
+*::-webkit-scrollbar-thumb:hover {
+  background: #a2a2a2;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
diff --git a/vite.config.js b/vite.config.js