feat: update tailwindcss to v4

.prettierignore

@@ -1,2 +1,3 @@
 pnpm-lock.yaml
 templates/macros.html
+static/main.css

package.json

@@ -11,12 +11,15 @@
   },
   "scripts": {
     "dev": "pnpm tailwindcss -i ./static/app.css -o ./static/main.css --watch",
-    "build": "pnpm tailwindcss -i ./static/app.css -o ./static/main.css"
+    "build": "pnpm tailwindcss -i ./static/app.css -o ./static/main.css",
+    "prettier": "prettier -c .",
+    "prettier:fix": "prettier -w ."
   },
   "dependencies": {
+    "@tailwindcss/cli": "^4.1.7",
     "@tailwindcss/typography": "^0.5.16",
-    "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.10",
-    "tailwindcss": "^3.4.17"
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "^4.1.7"
   }
 }

static/app.css

@@ -1,139 +1,149 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@custom-variant dark (&:where(.dark, .dark *));
 
-@layer base {
-  html,
-  body {
-    @apply h-full;
-  }
+html,
+body {
+  @apply h-full;
+}
 
-  html {
-    --bg: transparent;
-    --bg-dark: transparent;
-    --header: transparent;
-    --header-dark: transparent;
-  }
+html {
+  --bg: transparent;
+  --bg-dark: transparent;
+  --header: transparent;
+  --header-dark: transparent;
+}
 
-  body {
-    -webkit-tap-highlight-color: transparent;
-    background: var(--bg);
-  }
+body {
+  -webkit-tap-highlight-color: transparent;
+  background: var(--bg);
 
-  .dark body {
+  &:where(.dark *) {
     background: var(--bg-dark);
   }
+}
 
+.not-ready * {
+  @apply transition-none!;
+}
+
+article {
+  @apply text-lg;
+
+  /* Auto direction for text */
   *,
   ::before,
   ::after {
-    /* Auto direction for text */
     unicode-bidi: plaintext;
   }
 
-  /* Code block */
-  pre mark {
-    @apply block text-inherit;
-    margin: 0 -18px;
-    padding: 0 18px;
-  }
-
-  pre table {
-    @apply !m-0 !w-full border-collapse;
-  }
-
-  pre table tr {
-    @apply !border-0 !border-none;
-  }
-
-  pre table td {
-    @apply !p-0;
-  }
-
-  pre table td:nth-of-type(1) {
-    @apply min-w-4 select-none;
-  }
-
-  .prose .footnote-definition {
+  /* Footnote */
+  .footnote-definition {
     @apply flex;
+
+    p {
+      @apply m-0;
+    }
+
+    .footnote-definition-label {
+      @apply static mr-2 text-base;
+
+      &::after {
+        @apply content-['.'];
+      }
+    }
   }
 
-  .prose .footnote-definition p {
-    @apply m-0;
-  }
+  /* Code block */
+  pre {
+    @apply text-base;
 
-  .prose .footnote-definition .footnote-definition-label {
-    @apply static mr-2 text-base;
-  }
+    mark {
+      @apply mx-[-18px] my-0 block px-[18px] py-0 text-inherit;
+    }
 
-  .prose .footnote-definition .footnote-definition-label::after {
-    content: ".";
+    table {
+      @apply m-0 w-full border-collapse text-base;
+
+      tr {
+        @apply border-0 border-none;
+      }
+
+      td {
+        @apply p-0;
+
+        &:nth-of-type(1) {
+          @apply min-w-4 select-none;
+          mark {
+            @apply mr-0 pr-0;
+          }
+        }
+
+        &:not(:nth-of-type(1)) {
+          mark {
+            @apply ml-0 pl-0;
+          }
+        }
+      }
+    }
   }
 }
 
-@layer utilities {
-  .not-ready * {
-    @apply !transition-none;
-  }
+.header {
+  background-color: var(--header);
 
-  .btn-menu::before,
-  .btn-menu::after {
-    @apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert;
-  }
-
-  .open {
-    @apply overflow-hidden;
-  }
-
-  .open .btn-menu::before {
-    @apply w-6 translate-y-[5.5px] rotate-45;
-  }
-
-  .open .btn-menu::after {
-    @apply w-6 -translate-y-[5.5px] -rotate-45;
-  }
-
-  .nav-wrapper {
-    @apply hidden lg:flex;
-  }
-
-  .open .nav-wrapper {
-    @apply flex;
-  }
-
-  article {
-    @apply text-lg;
-  }
-
-  .header {
-    background-color: var(--header);
-  }
-
-  .dark .header {
+  &:where(.dark *) {
     background: var(--header-dark);
   }
+}
 
-  .blur-header {
-    @apply bg-black/10 backdrop-blur dark:bg-white/10;
+.btn-menu {
+  &::before,
+  &::after {
+    @apply block h-[2px] w-5 bg-black duration-200 content-[''];
   }
 
-  .block-bg {
-    @apply bg-black/[3%] dark:bg-white/[8%];
-  }
+  @apply dark:before:invert dark:after:invert;
 
-  .block-hover {
-    @apply hover:bg-black/[5%] dark:hover:bg-white/[11%];
-  }
+  &:where(.open *) {
+    &::before {
+      @apply w-6 translate-y-[5.5px] rotate-45;
+    }
 
-  .block-hover-mask {
-    @apply hover:bg-black/[2%] dark:hover:bg-white/[3%];
-  }
-
-  .primary-link {
-    @apply text-black no-underline hover:opacity-80 dark:text-white;
-  }
-
-  .secondary-link {
-    @apply text-[var(--tw-prose-body)] no-underline hover:text-black dark:hover:text-white;
+    &::after {
+      @apply w-6 -translate-y-[5.5px] -rotate-45;
+    }
   }
 }
+
+.nav-wrapper {
+  @apply hidden lg:flex;
+
+  &:where(.open *) {
+    @apply flex;
+  }
+}
+
+@utility blur-header {
+  @apply bg-black/10 backdrop-blur dark:bg-white/10;
+}
+
+@utility block-bg {
+  @apply bg-black/[3%] dark:bg-white/[8%];
+}
+
+@utility block-hover {
+  @apply hover:bg-black/[5%] dark:hover:bg-white/[11%];
+}
+
+@utility block-hover-mask {
+  @apply hover:bg-black/[2%] dark:hover:bg-white/[3%];
+}
+
+@utility primary-link {
+  @apply text-black no-underline hover:opacity-80 dark:text-white;
+}
+
+@utility secondary-link {
+  @apply text-[var(--tw-prose-body)] no-underline hover:text-black dark:hover:text-white;
+}

tailwind.config.js

@@ -1,9 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./templates/**/*.html"],
-  darkMode: "class",
-  theme: {
-    extend: {},
-  },
-  plugins: [require("@tailwindcss/typography")],
-};

templates/404.html

@@ -1,4 +1,4 @@
 {% extends "index.html" %}<!---->
 {% block main %}<!---->
-<h1 class="absolute inset-x-8 bottom-20 top-0 flex items-center justify-center text-9xl">404</h1>
+<h1 class="absolute inset-x-8 top-0 bottom-20 flex items-center justify-center text-9xl">404</h1>
 {% endblock main %}

templates/index.html

@@ -9,7 +9,7 @@
     {% include "injects/body_start.html" ignore missing %}
 
     <main
-      class="prose prose-neutral relative mx-auto min-h-[calc(100%-9rem)] max-w-3xl break-words px-4 pb-16 pt-32 dark:prose-invert prose-pre:rounded-lg prose-img:rounded-lg"
+      class="prose prose-neutral dark:prose-invert prose-pre:rounded-lg prose-img:rounded-lg relative mx-auto min-h-[calc(100vh-9rem)] max-w-3xl px-4 pt-32 pb-16 break-words"
     >
       {% block main %}
 

templates/page.html

@@ -5,12 +5,12 @@
   {% include "injects/page_start.html" ignore missing %}
 
   <header class="mb-16">
-    <h1 class="!my-0 pb-2.5">{{ page.title }}</h1>
+    <h1 class="my-0! pb-2.5">{{ page.title }}</h1>
     {% include "partials/page_info.html" %}
   </header>
 
   {% if page.extra.cover.image %}<!---->
-  <figure class="mb-12 mt-0">
+  <figure class="mt-0 mb-12">
     <img
       class="h-auto w-full rounded-lg"
       src="{{ get_url(path=page.extra.cover.image) }}"

templates/pages.html

@@ -2,7 +2,7 @@
 {% block main %}
 <article>
   <header class="mb-16">
-    <h1 class="!my-0 pb-2.5">{{ page.title }}</h1>
+    <h1 class="my-0! pb-2.5">{{ page.title }}</h1>
   </header>
 
   <section>{{ page.content | safe }}</section>

templates/partials/header.html

@@ -6,7 +6,7 @@
       <div class="flex items-center">
         <a class="text-2xl font-semibold" href="{{ get_url(path=``) }}">{{ config.title }}</a>
         <div
-          class="btn-dark ml-4 h-6 w-6 shrink-0 cursor-pointer text-[0] [background:url(./icons/theme.svg)_left_center/cover_no-repeat] dark:invert dark:[background-position:right]"
+          class="btn-dark ml-4 h-6 w-6 shrink-0 cursor-pointer text-[0px] [background:url(./icons/theme.svg)_left_center/cover_no-repeat] dark:[background-position:right] dark:invert"
           role="button"
           aria-label="Dark"
         ></div>

templates/partials/page_list.html

@@ -13,7 +13,7 @@
   class="block-bg relative mb-4 rounded-lg p-4 first-of-type:mt-0 last-of-type:mb-0 active:scale-95 lg:mb-6 lg:p-6"
 >
   {% if page.extra.cover.image %}
-  <figure class="mb-4 mt-0">
+  <figure class="mt-0 mb-4">
     <img
       class="h-auto w-full rounded-lg"
       src="{{ get_url(path=page.extra.cover.image) }}"
@@ -22,7 +22,7 @@
   </figure>
   {% endif %}<!---->
 
-  <h2 class="!my-0 pb-1 font-bold !leading-none">{{ page.title }}</h2>
+  <h2 class="my-0! pb-1 leading-none! font-bold">{{ page.title }}</h2>
 
   <div class="not-prose my-1 truncate">
     {% if page.description %}
@@ -34,23 +34,23 @@
 
   {% include "partials/page_info.html" %}
 
-  <a class="absolute inset-0 text-[0]" href="{{ page.permalink }}">{{ page.title }}</a>
+  <a class="absolute inset-0 text-[0px]" href="{{ page.permalink }}">{{ page.title }}</a>
 </section>
 {% endfor %}
 
 <!-- Main Nav -->
 {% if paginator is defined %}
-<nav class="mt-16 flex">
+<nav class="not-prose mt-16 flex font-bold">
   {% if paginator.previous %}
   <a
-    class="rounded-full bg-black px-4 py-3 text-sm text-white no-underline shadow duration-100 active:scale-95 dark:bg-white/80 dark:text-black"
+    class="rounded-full bg-black px-4 py-3 text-sm text-white no-underline duration-100 active:scale-95 dark:bg-white/80 dark:text-black"
     href="{{ paginator.previous }}"
     >← Prev Page</a
   >
   {% endif %}<!---->
   {% if paginator.next %}
   <a
-    class="ml-auto rounded-full bg-black px-4 py-3 text-sm text-white no-underline shadow duration-100 active:scale-95 dark:bg-white/80 dark:text-black"
+    class="ml-auto rounded-full bg-black px-4 py-3 text-sm text-white no-underline duration-100 active:scale-95 dark:bg-white/80 dark:text-black"
     href="{{ paginator.next }}"
     >Next Page →</a
   >

templates/partials/post_taxonomies.html

@@ -6,10 +6,10 @@
   {% endfor %}<!---->
   {% for term_name in term_names | sort %}
   <div class="mb-2 flex flex-wrap">
-    <span class="block-bg mb-1.5 mr-1.5 rounded-lg px-5 py-1.5">{{ term_name | title }} </span>
+    <span class="block-bg mr-1.5 mb-1.5 rounded-lg px-5 py-1.5">{{ term_name | title }} </span>
     {% for term in page.taxonomies[term_name] %}
     <a
-      class="block-bg block-hover mb-1.5 mr-1.5 rounded-lg px-5 py-1.5 no-underline"
+      class="block-bg block-hover mr-1.5 mb-1.5 rounded-lg px-5 py-1.5 no-underline"
       href="{{ get_taxonomy_url(kind=term_name, name=term) | safe }}"
       >{{ term }}</a
     >

templates/partials/profile.html

@@ -2,10 +2,10 @@
 <div class="mb-16 flex items-start">
   {% if config.extra.profile.avatar_url %}
   <div
-    class="not-prose mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/50 p-3 shadow dark:bg-white/[15%]"
+    class="not-prose mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/50 p-3 shadow-sm dark:bg-white/10"
   >
     <img
-      class="{% if config.extra.profile.avatar_invert %}dark:invert{% endif %} my-0 aspect-square w-16 rounded-full !bg-black/5 hover:animate-spin"
+      class="{% if config.extra.profile.avatar_invert %}dark:invert{% endif %} my-0 aspect-square w-16 rounded-full bg-black/5! hover:animate-spin"
       src="{{ get_url(path=config.extra.profile.avatar_url) }}"
       alt="{{ config.extra.profile.name | default(value=config.title) }}"
     />
@@ -23,7 +23,7 @@
     <nav class="flex justify-start space-x-3 dark:invert">
       {% for social in config.extra.profile.social %}
       <a
-        class="primary-link h-8 w-8 text-[0] [background:var(--url)_center_center/cover_no-repeat]"
+        class="primary-link h-8 w-8 text-[0px] [background:var(--url)_center_center/cover_no-repeat]"
         style="--url: url({{ macros::get_social_icon(icon=social.name) }})"
         href="{{ social.url | replace(from=`$BASE_URL`, to=config.base_url) | safe  }}"
         target="_blank"

templates/shortcodes/admonition.html

@@ -18,7 +18,7 @@
 >
   <div class="flex items-center rounded-t-lg bg-[var(--admonition-bg)] p-1">
     <div
-      class="mx-2 h-4 w-4 text-[0] [background:var(--url)_center_center_no-repeat] dark:invert"
+      class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
       style="--url: url(./icons/{{ type }}.svg)"
     >
       {{ type | safe }}