feat: tailwind 4 daisyui 5

astro.config.ts

@@ -1,5 +1,5 @@
 import sitemap from "@astrojs/sitemap"
-import tailwind from "@astrojs/tailwind"
+import tailwindcss from "@tailwindcss/vite"
 import { defineConfig, passthroughImageService } from "astro/config"
 
 export default defineConfig({
@@ -8,7 +8,7 @@ export default defineConfig({
   server: {
     host: true,
   },
-  integrations: [tailwind(), sitemap()],
+  integrations: [sitemap()],
   image: {
     domains: ["directus.swablab.de", "files.mastodon.social"],
     service: passthroughImageService(),
@@ -16,4 +16,9 @@ export default defineConfig({
   redirects: {
     "/todo": "https://directus.swablab.de/admin/content/tasks_general",
   },
+  vite: {
+    plugins: [
+      tailwindcss(),
+    ],
+  },
 })

package.json

@@ -11,14 +11,13 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.3",
-    "@fontsource-variable/ubuntu-sans": "^5.1.0",
-    "@iconify-json/ph": "^1.2.1",
-    "@iconify/tailwind": "^1.1.3",
-    "@tailwindcss/typography": "^0.5.15",
-    "astro": "^5.0.3",
-    "daisyui": "^4.12.14",
-    "tailwindcss": "^3.4.16"
+    "@fontsource-variable/ubuntu-sans": "^5.2.5",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify/tailwind4": "^1.0.6",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.0.9",
+    "astro": "^5.4.1",
+    "daisyui": "^5.0.0"
   },
   "prettier": {
     "tabWidth": 2,

src/components/Card.astro

@@ -34,7 +34,7 @@ const { name, image, link, small } = Astro.props
         <span class="card-title">{name}</span>
       )
     }
-    <p>
+    <p class="text-lg">
       <slot />
     </p>
   </div>

src/components/Mastodon.astro

@@ -71,7 +71,7 @@ function replaceEmojis(content: string) {
         </figure>
       )}
 
-      <div class="card-body text-left">
+      <div class="card-body text-left text-lg">
         <h2 class="card-title justify-between">
           <a href={post.url}>@swablab</a>
           <time class="text-xs opacity-50">

src/layouts/Header.astro

@@ -14,7 +14,7 @@ const links = [
 
 <nav class="fixed top-0 navbar z-30 glass bg-base-100/30">
   <div class="navbar-start">
-    <a class="btn btn-ghost text-xl font-normal" href="/">
+    <a class="btn btn-ghost text-xl font-normal pointer-events-none" href="/">
       <img class="w-8 h-8" src="/logo.svg" alt="swablab logo" />
       <span>swablab</span></a
     >

src/layouts/Presence.astro

@@ -1,13 +1,13 @@
 <div id="presence" class="hidden">
   <div class="xl:hidden">
     <div class="tooltip tooltip-left">
-      <button class="btn btn-square font-normal">
+      <button class="btn btn-square">
         <span class="icon-[ph--door-open-duotone] w-6 h-6"></span>
       </button>
     </div>
   </div>
   <div class="hidden xl:flex">
-    <button class="btn font-normal">
+    <button class="btn">
       <span id="presence-text"></span>
       <span class="icon-[ph--door-open-duotone] w-6 h-6"></span>
     </button>

src/style.css

@@ -1,6 +1,38 @@
-input {
-  color-scheme: dark;
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@theme {
+  --font-sans: "Ubuntu", "sans-serif";
+  --font-serif: "Ubuntu", "sans-serif";
+  --font-mono: "Ubuntu Mono", "monospace";
 }
+@plugin "@iconify/tailwind4";
+
+@plugin "daisyui" {}
+@plugin "daisyui/theme" {
+  name: "swablab";
+  default: true;
+  prefersdark: true;
+  color-scheme: dark;
+
+  --color-base-100: "#171717";
+  --color-base-200: "#262626";
+  --color-base-300: "#404040";
+  --color-primary: "#A3FFF1";
+  --color-secondary: "#FF7F50";
+  --color-neutral: "#404040";
+
+  --radius-selector: 1rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.5rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+
+  --depth: 0;
+  --noise: 0;
+  --glass-reflect-opacity: 0.001;
+}
+
 @font-face {
   font-family: "Ubuntu";
   font-style: normal;

tailwind.config.ts

@@ -1,38 +0,0 @@
-module.exports = {
-  content: ["./src/**/*"],
-  theme: {
-    extend: {
-      colors: {
-        primary: "#A3FFF1",
-        secondary: "#FF7F50",
-      },
-      fontFamily: {
-        sans: ["Ubuntu", "sans-serif"],
-        serif: ["Ubuntu", "sans-serif"],
-        mono: ["Ubuntu Mono", "monospace"],
-      },
-    },
-  },
-  daisyui: {
-    themes: [
-      {
-        swablab: {
-          primary: "#A3FFF1",
-          secondary: "#FF7F50",
-          neutral: "#404040",
-          "base-100": "#171717",
-          "base-200": "#262626",
-          "base-300": "#404040",
-
-          "--glass-reflex-opacity": "0.001",
-        },
-      },
-    ],
-    logs: false,
-  },
-  plugins: [
-    require("@tailwindcss/typography"),
-    require("@iconify/tailwind").addDynamicIconSelectors(),
-    require("daisyui"),
-  ],
-}