Merge pull request #532 from Terreii/tailwind-v4

Tailwind v4
Terreii · Jan 27, 2025 · 0326d7a · 0326d7a
2 parents 1297711 + 9abecc3
commit 0326d7a
Show file tree

Hide file tree

Showing 18 changed files with 609 additions and 661 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,13 +30,12 @@
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.9.3",
-    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.0.0",
     "@types/milliseconds": "^1.0.0",
     "@types/node": "^22.10.3",
     "@types/react": "^19.0.2",
-    "autoprefixer": "^10.4.20",
     "bootstrap-icons": "^1.11.3",
     "cypress": "^13.17.0",
     "eslint": "^8.57.1",
@@ -48,13 +47,12 @@
     "identity-obj-proxy": "^3.0.0",
     "lint-staged": "^15.3.0",
     "node-ical": "^0.20.1",
-    "postcss": "^8.4.49",
     "preact-helmet": "^4.0.0-alpha-3",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "prompt": "^1.1.0",
     "start-server-and-test": "^2.0.9",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "tailwindcss-safe-area": "^0.6.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.7.2",

diff --git a/postcss.config.js b/postcss.config.js
diff --git a/src/components/Header/Nav-Links.tsx b/src/components/Header/Nav-Links.tsx
@@ -71,7 +71,7 @@ export default function HeaderNavLinks({
       <a
         key={`previous_${year}_${month}`}
         href={lastMonth}
-        class="inline-block px-4 py-3 text-white hover:bg-emerald-600 focus-visible:bg-emerald-600 focus-visible:outline-none focus-visible:ring-2"
+        class="inline-block px-4 py-3 text-white hover:bg-emerald-600 focus-visible:bg-emerald-600 focus-visible:ring-2 focus-visible:outline-hidden"
         title={isFullYear ? "voriges Jahr" : "vorigen Monat"}
       >
         <img src={leftArrow} height="22" width="22" alt="" class="invert" />
@@ -83,7 +83,7 @@ export default function HeaderNavLinks({
           today: isClient ? today : undefined,
           group: 0,
         })}
-        class="inline-block px-4 py-3 text-white hover:bg-emerald-600 focus-visible:bg-emerald-600 focus-visible:outline-none focus-visible:ring-2"
+        class="inline-block px-4 py-3 text-white hover:bg-emerald-600 focus-visible:bg-emerald-600 focus-visible:ring-2 focus-visible:outline-hidden"
         title="zeige aktuellen Monat"
       >
         Heute
@@ -92,7 +92,7 @@ export default function HeaderNavLinks({
       <a
         key={`next_${year}_${month}`}
         href={nextMonth}
-        class="inline-block px-4 py-3 text-white hover:bg-emerald-600 focus-visible:bg-emerald-600 focus-visible:outline-none focus-visible:ring-2"
+        class="inline-block px-4 py-3 text-white hover:bg-emerald-600 focus-visible:bg-emerald-600 focus-visible:ring-2 focus-visible:outline-hidden"
         title={isFullYear ? "nächstes Jahr" : "nächster Monat"}
       >
         <img src={rightArrow} height="22" width="22" alt="" class="invert" />

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -20,7 +20,7 @@ export default function Header() {
 
   return (
     <header
-      class="sticky left-0 top-0 z-50 flex h-12 flex-row items-center justify-between bg-emerald-900 shadow-lg px-safe"
+      class="px-safe sticky top-0 left-0 z-50 flex h-12 flex-row items-center justify-between bg-emerald-900 shadow-lg"
       style={{ viewTransitionName: "header" }}
     >
       <h1
@@ -29,7 +29,7 @@ export default function Header() {
       >
         <a
           href="/"
-          class="rounded text-white ring-offset-2 ring-offset-emerald-900 hover:underline focus-visible:underline focus-visible:outline-none focus-visible:ring-4"
+          class="rounded-sm text-white ring-offset-2 ring-offset-emerald-900 hover:underline focus-visible:underline focus-visible:ring-4 focus-visible:outline-hidden"
         >
           <span class="hidden min-[350px]:inline sm:hidden">Kalender</span>
           <span class="hidden sm:inline">Kontischichtkalender Rt</span>

diff --git a/src/components/Prompt/Confirm.tsx b/src/components/Prompt/Confirm.tsx
@@ -57,7 +57,7 @@ export default function Confirm({
   return (
     <aside
       class={classNames(
-        "sticky bottom-0 left-0 flex w-full flex-col border-0 border-t border-gray-200 bg-white text-gray-900 shadow-lg sm:bottom-1 sm:left-1 sm:max-w-96 sm:rounded sm:border sm:mb-safe sm:ml-safe",
+        "sm:mb-safe sm:ml-safe sticky bottom-0 left-0 flex w-full flex-col border-0 border-t border-gray-200 bg-white text-gray-900 shadow-lg sm:bottom-1 sm:left-1 sm:max-w-96 sm:rounded-sm sm:border",
         { "translate-y-4 scale-95 opacity-0": isShowing },
       )}
       ref={container}

diff --git a/src/components/Prompt/InstallPrompt.jsx b/src/components/Prompt/InstallPrompt.jsx
@@ -147,21 +147,21 @@ export default function InstallButton() {
 
     case "ios":
       return (
-        <div class="sticky bottom-0 z-10 flex w-full flex-col items-center border-0 border-t border-gray-200 bg-white shadow-lg pb-safe px-safe-offset-2 sm:bottom-1 sm:left-1 sm:max-w-96 sm:rounded sm:border sm:mb-safe sm:ml-safe">
-          <span class="my-1 text-center text-sm text-gray-900 mx-safe-offset-16">
+        <div class="pb-safe px-safe-offset-2 sm:mb-safe sm:ml-safe sticky bottom-0 z-10 flex w-full flex-col items-center border-0 border-t border-gray-200 bg-white shadow-lg sm:bottom-1 sm:left-1 sm:max-w-96 sm:rounded-sm sm:border">
+          <span class="mx-safe-offset-16 my-1 text-center text-sm text-gray-900">
             Klicke auf Teilen &amp; dann{" "}
             <strong>&quot;Zum Home-Bildschirm&quot; </strong>
             um den Kalender wie eine App zu installieren:
           </span>
           <div class="mb-1 flex flex-col items-center py-1">
             <img
-              class="h-20 rounded object-contain object-center p-1 shadow"
+              class="h-20 rounded-sm object-contain object-center p-1 shadow-sm"
               src={iOSShare}
               alt="klicke Teilen"
             />
             <span class="mx-3 my-auto block">↓</span>
             <img
-              class="h-20 rounded object-contain object-center p-1 shadow"
+              class="h-20 rounded-sm object-contain object-center p-1 shadow-sm"
               src={iOSAddToHome}
               alt="klicke Zum Home-Bildschirm"
             />
@@ -207,7 +207,7 @@ function CloseButton({ onClick }) {
   return (
     <button
       type="button"
-      class="absolute top-0 ml-1 border-0 bg-transparent right-safe"
+      class="right-safe absolute top-0 ml-1 border-0 bg-transparent"
       onClick={onClick}
       aria-label="schließe Meldung"
     >

diff --git a/src/components/button.tsx b/src/components/button.tsx
@@ -32,7 +32,7 @@ export default function Button({
       class={classnames("btn", className, {
         [cancel]: type === "cancel",
         [accept]: type === "accept",
-        "px-3 py-1 first:*:size-7 first:*:-translate-x-1 first:*:pr-1 first:*:invert":
+        "px-3 py-1 *:first:size-7 *:first:-translate-x-1 *:first:pr-1 *:first:invert":
           hasImg,
       })}
     >

diff --git a/src/components/download.tsx b/src/components/download.tsx
@@ -11,7 +11,7 @@ import stars from "bootstrap-icons/icons/stars.svg";
 export default function Download() {
   return (
     <div class="my-4 flex flex-row justify-center px-1">
-      <section class="rounded bg-gray-300 p-4 text-center text-gray-900">
+      <section class="rounded-sm bg-gray-300 p-4 text-center text-gray-900">
         <h2 class="text-xl font-semibold">
           <Stars />
           Downloade deinen Kalender!
@@ -28,7 +28,7 @@ export default function Download() {
             href="https://de.libreoffice.org/discover/libreoffice/"
             target="_blank"
             rel="noreferrer"
-            class="text-blue-700 underline hover:text-blue-500 hover:decoration-2 focus-visible:text-blue-500 focus-visible:decoration-2 focus-visible:outline-none focus-visible:ring-1"
+            class="text-blue-700 underline hover:text-blue-500 hover:decoration-2 focus-visible:text-blue-500 focus-visible:decoration-2 focus-visible:ring-1 focus-visible:outline-hidden"
           >
             LibreOffice
           </a>{" "}
@@ -42,7 +42,7 @@ export default function Download() {
           <br />
           <a
             href="/download"
-            class="mx-auto inline-block text-blue-700 underline hover:text-blue-500 hover:decoration-2 focus-visible:text-blue-500 focus-visible:decoration-2 focus-visible:outline-none focus-visible:ring-1"
+            class="mx-auto inline-block text-blue-700 underline hover:text-blue-500 hover:decoration-2 focus-visible:text-blue-500 focus-visible:decoration-2 focus-visible:ring-1 focus-visible:outline-hidden"
           >
             <strong>Alle Download-Optionen!</strong>
           </a>
@@ -55,7 +55,7 @@ export default function Download() {
 function Stars() {
   return (
     <>
-      <span class="mr-2 hidden font-extrabold uppercase text-yellow-600 first:inline-block">
+      <span class="mr-2 hidden font-extrabold text-yellow-600 uppercase first:inline-block">
         neu
       </span>
       <img
@@ -68,7 +68,7 @@ function Stars() {
           filter: "invert(0.9) sepia(1) saturate(5)",
         }}
       />
-      <span class="mr-2 hidden font-extrabold uppercase text-yellow-600 last:inline-block">
+      <span class="mr-2 hidden font-extrabold text-yellow-600 uppercase last:inline-block">
         neu
       </span>
     </>

diff --git a/src/components/legend.tsx b/src/components/legend.tsx
@@ -31,7 +31,7 @@ export default function Legend({
     [shiftKey, year, month],
   );
   return (
-    <div class="mx-auto mb-8 flex flex-col items-start text-gray-900 px-safe md:flex-row">
+    <div class="px-safe mx-auto mb-8 flex flex-col items-start text-gray-900 md:flex-row">
       <dl class="grid grid-cols-[auto_1fr] items-start gap-2 px-4 py-2 md:px-2 md:py-0">
         {shiftTypes.map(([key, data]) => (
           <Cell key={shiftKey + key} id={key}>
@@ -151,7 +151,7 @@ function Cell({
         {href ? (
           <a
             href={href}
-            class="text-gray-900 underline decoration-blue-700 hover:decoration-blue-500 hover:decoration-2 focus-visible:decoration-blue-500 focus-visible:decoration-2 focus-visible:outline-none focus-visible:ring-1"
+            class="text-gray-900 underline decoration-blue-700 hover:decoration-blue-500 hover:decoration-2 focus-visible:decoration-blue-500 focus-visible:decoration-2 focus-visible:ring-1 focus-visible:outline-hidden"
             rel="noopener noreferrer"
           >
             {children}

diff --git a/src/components/menu.tsx b/src/components/menu.tsx
@@ -59,7 +59,7 @@ export default function Menu({
     >
       <summary
         id="menu_summary"
-        class="flex w-16 cursor-pointer list-none items-center justify-center bg-transparent hover:bg-emerald-600 focus-visible:bg-emerald-600 focus-visible:outline-none focus-visible:ring-2"
+        class="flex w-16 cursor-pointer list-none items-center justify-center bg-transparent hover:bg-emerald-600 focus-visible:bg-emerald-600 focus-visible:ring-2 focus-visible:outline-hidden"
       >
         <img src={menuIcon} class="invert" height="45" width="45" alt="Menu" />
       </summary>
@@ -68,9 +68,9 @@ export default function Menu({
         id="hamburger_menu"
         aria-live="polite"
         aria-label="Menü"
-        class="absolute overflow-y-visible overscroll-contain bg-emerald-900 text-white shadow-lg right-safe-offset-0 top-safe-offset-12"
+        class="right-safe-offset-0 top-safe-offset-12 absolute overflow-y-visible overscroll-contain bg-emerald-900 text-white shadow-lg"
       >
-        <div class="flex flex-col items-stretch justify-center p-3 -max-h-screen-safe-offset-12">
+        <div class="-max-h-screen-safe-offset-12 flex flex-col items-stretch justify-center p-3">
           {!(supportsMonthInput || isFullYear) && (
             <select
               class="btn h-10"

diff --git a/src/components/shareMenu.tsx b/src/components/shareMenu.tsx
@@ -73,14 +73,14 @@ export default function ShareMenu({
   return (
     <div
       id="share_menu"
-      class="absolute overflow-y-visible overscroll-contain bg-emerald-900 text-white shadow-lg right-safe-offset-0 top-safe-offset-12"
+      class="right-safe-offset-0 top-safe-offset-12 absolute overflow-y-visible overscroll-contain bg-emerald-900 text-white shadow-lg"
     >
-      <div class="flex flex-col items-stretch justify-center p-3 -max-h-screen-safe-offset-12">
+      <div class="-max-h-screen-safe-offset-12 flex flex-col items-stretch justify-center p-3">
         <label class="flex flex-col">
           Adresse zum teilen:
           <input
             id="share_url"
-            class="-ml-1 rounded border-0 bg-transparent p-1 text-white"
+            class="-ml-1 rounded-sm border-0 bg-transparent p-1 text-white"
             type="url"
             readOnly
             value={url.toString()}

diff --git a/src/index.css b/src/index.css
@@ -5,14 +5,35 @@ This Source Code Form is subject to the terms of the Mozilla Public License, v.
 the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
-@tailwind base;
-@tailwind components;
+@import "tailwindcss";
 
-.btn {
-  @apply flex min-h-10 flex-row items-center justify-center rounded border-0 bg-gray-100 px-2 py-1 text-center tracking-wide text-gray-950 shadow hover:bg-gray-300 focus-visible:bg-gray-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent;
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+@plugin 'tailwindcss-safe-area';
+
+/*
+  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);
+  }
 }
 
-@tailwind utilities;
+@layer components {
+  .btn {
+    @apply flex min-h-10 flex-row items-center justify-center rounded-sm border-0 bg-gray-100 px-2 py-1 text-center tracking-wide text-gray-950 shadow-sm hover:bg-gray-300 focus-visible:bg-gray-300 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent focus-visible:outline-hidden;
+  }
+}
 
 :root [id] {
   /*

diff --git a/src/pages/Download/Dialog.tsx b/src/pages/Download/Dialog.tsx
@@ -67,7 +67,7 @@ export function DownloadDialog({
       onClose={() => {
         onClose();
       }}
-      class="p-0"
+      class="m-auto p-0"
     >
       <h2 class="bg-emerald-900 px-4 py-2 text-2xl font-bold text-white">
         Downloade {data.type === "ics" ? "Kalender Datei" : "Tabelle"}
@@ -80,7 +80,7 @@ export function DownloadDialog({
             download={link.name}
             target="_blank"
             rel="noreferrer"
-            class="flex flex-row gap-2 text-lg underline hover:text-gray-500 focus-visible:text-gray-500 focus-visible:outline-none focus-visible:ring-2"
+            class="flex flex-row gap-2 text-lg underline hover:text-gray-500 focus-visible:text-gray-500 focus-visible:ring-2 focus-visible:outline-hidden"
           >
             <img src={cloudDownloadIcon} width="20" height="20" alt="" />
             <span>

diff --git a/src/pages/Download/index.tsx b/src/pages/Download/index.tsx
@@ -40,7 +40,7 @@ export default function DownloadPage() {
   const [year, month] = yearMonth.split("-").map((v) => parseInt(v, 10));
 
   return (
-    <main class="mx-auto mb-20 mt-8 max-w-fit rounded p-4 text-gray-900">
+    <main class="mx-auto mt-8 mb-20 max-w-fit rounded-sm p-4 text-gray-900">
       <Helmet title="Download" />
 
       <h1 class="mb-5 text-4xl font-bold">
@@ -163,7 +163,7 @@ function DownloadSection({
       {children}
       <button
         type="button"
-        class="relative ml-4 cursor-pointer border-0 bg-transparent hover:shadow hover:sepia focus-visible:shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:sepia"
+        class="relative ml-4 cursor-pointer border-0 bg-transparent hover:shadow-sm hover:sepia focus-visible:ring-2 focus-visible:shadow-sm focus-visible:outline-hidden focus-visible:sepia"
         title={`Download ${name}`}
         onClick={(event) => {
           event.preventDefault();
@@ -185,7 +185,7 @@ function DownloadSection({
           width="10"
           height="10"
           alt=""
-          class="absolute -left-1 bottom-0 size-5"
+          class="absolute bottom-0 -left-1 size-5"
         />
       </button>
     </section>
@@ -216,7 +216,7 @@ function MonthInput({
       }
     />
   ) : (
-    <span class="mt-1 grid gap-2 rounded border border-gray-400 p-2">
+    <span class="mt-1 grid gap-2 rounded-sm border border-gray-400 p-2">
       <label htmlFor={`${id}year`}>Jahr:</label>
       <input
         id={`${id}year`}

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -37,7 +37,7 @@ export default function Index() {
           <span class="whitespace-nowrap">
             Menü
             <img
-              class="ml-1 mr-2 inline-block"
+              class="mr-2 ml-1 inline-block"
               src={menuIcon}
               height="20"
               width="20"
@@ -47,7 +47,7 @@ export default function Index() {
           umändern.
         </div>
 
-        <ul class="mx-auto mb-16 mt-2 flex w-64 list-none flex-col justify-center gap-3 p-0">
+        <ul class="mx-auto mt-2 mb-16 flex w-64 list-none flex-col justify-center gap-3 p-0">
           {shiftModelNames.map((name) => (
             <ShiftLink key={name} name={name} />
           ))}
@@ -62,7 +62,7 @@ function ShiftLink({ name }: { name: ShiftModelKeys }) {
     <li>
       <a
         href={`/cal/${name}`}
-        class="mx-3 inline-block min-h-10 w-full rounded bg-violet-700 px-4 py-3 text-center text-lg text-white shadow hover:bg-violet-900 focus-visible:bg-violet-900"
+        class="mx-3 inline-block min-h-10 w-full rounded-sm bg-violet-700 px-4 py-3 text-center text-lg text-white shadow-sm hover:bg-violet-900 focus-visible:bg-violet-900"
         onClick={() => {
           if (new URLSearchParams(window.location.search).has("pwa")) {
             const settings: Settings = JSON.parse(

diff --git a/tailwind.config.js b/tailwind.config.js
diff --git a/vite.config.ts b/vite.config.ts
@@ -2,11 +2,13 @@ import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import { VitePWA } from "vite-plugin-pwa";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     nodePolyfills({ include: ["events", "fs", "http", "path"] }),
+    tailwindcss(),
     preact({
       prerender: {
         enabled: false,