Upgrade to Tailwind v4

Makefile

@@ -9,7 +9,7 @@ npm:
 	npm install
 
 css: common/input.css
-	npx tailwindcss -i ./common/input.css -o  ./games/static/base.css
+	npx @tailwindcss/cli -i ./common/input.css -o  ./games/static/base.css
 
 makemigrations:
 	uv run python manage.py makemigrations
@@ -33,7 +33,7 @@ dev:
 		--names "Django,Tailwind" \
 		--prefix-colors "blue,green" \
 		"uv run python -Wa manage.py runserver" \
-		"npx tailwindcss -i ./common/input.css -o ./games/static/base.css --watch"
+		"npx @tailwindcss/cli -i ./common/input.css -o ./games/static/base.css --watch"
 
 
 caddy:

common/input.css

@@ -1,92 +1,137 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
-@tailwind utilities;
 
-@font-face {
+@plugin '@tailwindcss/typography';
-  font-family: "IBM Plex Mono";
+@plugin '@tailwindcss/forms';
-  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
+@plugin 'flowbite/plugin';
-  font-weight: 400;
+
-  font-style: normal;
+@source '../node_modules/flowbite/**/*.js';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-sans:
+    IBM Plex Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono:
+    IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+  --font-serif:
+    IBM Plex Serif, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-condensed:
+    IBM Plex Sans Condensed, ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+  --color-accent: #7c3aed;
+  --color-background: #1f2937;
 }
 
-@font-face {
+/*
-  font-family: "IBM Plex Sans";
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
+  so we've added these compatibility styles to make sure everything still
-  font-weight: 400;
+  looks the same as it did with Tailwind CSS v3.
-  font-style: normal;
+
+  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);
+  }
 }
 
-@font-face {
+@utility min-w-20char {
-  font-family: "IBM Plex Serif";
+  min-width: 20ch;
-  src: url("fonts/IBMPlexSerif-Regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
 }
 
-@font-face {
+@utility max-w-20char {
-  font-family: "IBM Plex Serif";
+  max-width: 20ch;
-  src: url("fonts/IBMPlexSerif-Bold.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
 }
 
-@font-face {
+@utility min-w-30char {
-  font-family: "IBM Plex Sans Condensed";
+  min-width: 30ch;
-  src: url("fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
 }
 
+@utility max-w-30char {
+  max-width: 30ch;
+}
 
-/* a:hover {
+@utility max-w-35char {
+  max-width: 35ch;
+}
+
+@utility max-w-40char {
+  max-width: 40ch;
+}
+
+@layer utilities {
+  @font-face {
+    font-family: 'IBM Plex Mono';
+    src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'IBM Plex Sans';
+    src: url('fonts/IBMPlexSans-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    src: url('fonts/IBMPlexSerif-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'IBM Plex Serif';
+    src: url('fonts/IBMPlexSerif-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'IBM Plex Sans Condensed';
+    src: url('fonts/IBMPlexSansCondensed-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  /* a:hover {
   text-decoration-color: #ff4400;
   color: rgb(254, 185, 160);
   transition: all 0.2s ease-out;
 } */
 
-/* form label {
+  /* form label {
   @apply dark:text-slate-400;
 } */
 
-.responsive-table {
+  .responsive-table {
-  @apply dark:text-white mx-auto table-fixed;
+    @apply dark:text-white mx-auto table-fixed;
-}
-
-.responsive-table tr:nth-child(even) {
-  @apply bg-indigo-100 dark:bg-slate-800
-}
-
-.responsive-table tbody tr:nth-child(odd) {
-  @apply bg-indigo-200 dark:bg-slate-900
-}
-
-.responsive-table thead th {
-  @apply text-left border-b-2 border-b-slate-500 text-xl;
-}
-
-.responsive-table thead th:not(:first-child),
-.responsive-table td:not(:first-child) {
-  @apply border-l border-l-slate-500;
-}
-
-@layer utilities {
-  .min-w-20char {
-    min-width: 20ch;
   }
-  .max-w-20char {
+
-    max-width: 20ch;
+  .responsive-table tr:nth-child(even) {
+    @apply bg-indigo-100 dark:bg-slate-800;
   }
-  .min-w-30char {
+
-    min-width: 30ch;
+  .responsive-table tbody tr:nth-child(odd) {
+    @apply bg-indigo-200 dark:bg-slate-900;
   }
-  .max-w-30char {
+
-    max-width: 30ch;
+  .responsive-table thead th {
+    @apply text-left border-b-2 border-b-slate-500 text-xl;
   }
-  .max-w-35char {
+
-    max-width: 35ch;
+  .responsive-table thead th:not(:first-child),
-  }
+  .responsive-table td:not(:first-child) {
-  .max-w-40char {
+    @apply border-l border-l-slate-500;
-    max-width: 40ch;
   }
 }
 
@@ -131,7 +176,7 @@ textarea:disabled {
 }
 
 .basic-button {
-  @apply inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out;
+  @apply inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded-sm shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-hidden focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out;
 }
 
 .markdown-content ul {

games/templates/cotton/button.html

@@ -1,6 +1,6 @@
 <c-vars color="blue" size="base" type="button" />
 <button type="{{ type }}" 
         title="{{ title }}"
-        class="{{ class }} {% if color == "blue" %} bg-blue-700 dark:bg-blue-600 dark:focus:ring-blue-800 dark:hover:bg-blue-700 focus:ring-blue-300 hover:bg-blue-800 text-white {% elif color == "red" %} bg-red-700 dark:bg-red-600 dark:focus:ring-red-900 dark:hover:bg-red-700 focus:ring-red-300 hover:bg-red-800 text-white {% elif color == "gray" %} bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-600 dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:hover:text-white dark:text-gray-400 focus:ring-gray-100 hover:bg-gray-100 hover:text-blue-700 text-gray-900 border {% elif color == "green" %} bg-green-700 dark:bg-green-600 dark:focus:ring-green-800 dark:hover:bg-green-700 focus:ring-green-300 hover:bg-green-800 text-white {% endif %} focus:outline-none focus:ring-4 font-medium mb-2 me-2 rounded-lg {% if size == "xs" %} px-3 py-2 text-xs {% elif size == "sm" %} px-3 py-2 text-sm {% elif size == "base" %} px-5 py-2.5 text-sm {% elif size == "lg" %} px-5 py-3 text-base {% elif size == "xl" %} px-6 py-3.5 text-base {% endif %} {% if icon %} inline-flex text-center items-center gap-2 {% else %} {% endif %} ">
+        class="{{ class }} {% if color == "blue" %} bg-blue-700 dark:bg-blue-600 dark:focus:ring-blue-800 dark:hover:bg-blue-700 focus:ring-blue-300 hover:bg-blue-800 text-white {% elif color == "red" %} bg-red-700 dark:bg-red-600 dark:focus:ring-red-900 dark:hover:bg-red-700 focus:ring-red-300 hover:bg-red-800 text-white {% elif color == "gray" %} bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-600 dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:hover:text-white dark:text-gray-400 focus:ring-gray-100 hover:bg-gray-100 hover:text-blue-700 text-gray-900 border {% elif color == "green" %} bg-green-700 dark:bg-green-600 dark:focus:ring-green-800 dark:hover:bg-green-700 focus:ring-green-300 hover:bg-green-800 text-white {% endif %} focus:outline-hidden focus:ring-4 font-medium mb-2 me-2 rounded-lg {% if size == "xs" %} px-3 py-2 text-xs {% elif size == "sm" %} px-3 py-2 text-sm {% elif size == "base" %} px-5 py-2.5 text-sm {% elif size == "lg" %} px-5 py-3 text-base {% elif size == "xl" %} px-6 py-3.5 text-base {% endif %} {% if icon %} inline-flex text-center items-center gap-2 {% else %} {% endif %} ">
     {{ slot }}
 </button>

games/templates/cotton/button_group.html

@@ -1,4 +1,4 @@
-<div class="inline-flex rounded-md shadow-sm" role="group">
+<div class="inline-flex rounded-md shadow-xs" role="group">
     {% if slot %}{{ slot }}{% endif %}
     {% for button in buttons %}
         {% if button.slot %}

games/templates/cotton/button_old.html

@@ -4,7 +4,7 @@ text
 {% endcomment %}
 <a href="{{ link }}"
    title="{{ title }}"
-   class="truncate max-w-xs py-1 px-2 text-xs bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-sm">
+   class="truncate max-w-xs py-1 px-2 text-xs bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center font-semibold shadow-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 rounded-xs">
     {% comment %} <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="self-center w-6 h-6 inline">
     <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" /> 
     </svg>

games/templates/cotton/button_start.html

@@ -5,7 +5,7 @@ text
 <button type="button"
         title="{{ title }}"
         autofocus
-        class="truncate max-w-xs sm:max-w-md lg:max-w-lg py-1 px-2 bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg">
+        class="truncate max-w-xs sm:max-w-md lg:max-w-lg py-1 px-2 bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 rounded-lg">
     <svg xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"

games/templates/cotton/h1.html

@@ -1,7 +1,7 @@
 <h1 class="{% if badge %}flex items-center {% endif %}mb-4 text-3xl font-extrabold leading-none tracking-tight text-gray-900 dark:text-white">
     {{ slot }}
     {% if badge %}
-        <span class="bg-blue-100 text-blue-800 text-2xl font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ms-2">
+        <span class="bg-blue-100 text-blue-800 text-2xl font-semibold me-2 px-2.5 py-0.5 rounded-sm dark:bg-blue-200 dark:text-blue-800 ms-2">
             {{ badge }}
         </span>
     {% endif %}

games/templates/cotton/popover.html

@@ -2,7 +2,7 @@
 <div data-popover
      id="{{ id }}"
      role="tooltip"
-     class="absolute z-10 invisible inline-block text-sm text-white transition-opacity duration-300 bg-white border border-purple-200 rounded-lg shadow-sm opacity-0 dark:text-white dark:border-purple-600 dark:bg-purple-800">
+     class="absolute z-10 invisible inline-block text-sm text-white transition-opacity duration-300 bg-white border border-purple-200 rounded-lg shadow-xs opacity-0 dark:text-white dark:border-purple-600 dark:bg-purple-800">
     <div class="px-3 py-2">{{ popover_content }}</div>
     <div data-popper-arrow></div>
     <!-- for Tailwind CSS to generate decoration-dotted CSS from Python component -->

games/templates/cotton/simple_table.html

@@ -7,12 +7,12 @@
                 {{ header_action }}
                 </c-table-header>
             {% endif %}
-            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 [&_th:not(:first-child):not(:last-child)]:max-sm:hidden">
+            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 max-sm:[&_th:not(:first-child):not(:last-child)]:hidden">
                 <tr>
                     {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
                 </tr>
             </thead>
-            <tbody class="dark:divide-y [&_td:not(:first-child):not(:last-child)]:max-sm:hidden">
+            <tbody class="dark:divide-y max-sm:[&_td:not(:first-child):not(:last-child)]:hidden">
                 {% for row in rows %}<c-table-row :data=row />{% endfor %}
             </tbody>
         </table>

games/templates/cotton/table_row.html

@@ -1,4 +1,4 @@
-<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 [&_a]:underline [&_a]:underline-offset-4 [&_a]:decoration-2 [&_td:last-child]:text-right">
+<tr class="odd:bg-white dark:odd:bg-gray-900 even:bg-gray-50 dark:even:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 [&_a]:underline [&_a]:underline-offset-4 [&_a]:decoration-2 [&_td:last-child]:text-right">
     {% if slot %}
         {{ slot }}
     {% else %}

games/templates/gamestatuschange_confirm_delete.html

@@ -1,6 +1,6 @@
 <c-layouts.base>
     {% load static %}
-    <div class="2xl:max-w-screen-2xl xl:max-w-screen-xl md:max-w-screen-md sm:max-w-screen-sm self-center">
+    <div class="2xl:max-w-(--breakpoint-2xl) xl:max-w-(--breakpoint-xl) md:max-w-(--breakpoint-md) sm:max-w-(--breakpoint-sm) self-center">
         <form method="post" class="dark:text-white">
             {% csrf_token %}
             <div>

games/templates/gamestatuschange_list.html

@@ -1,6 +1,6 @@
 <c-layouts.base>
     {% load static %}
-    <div class="2xl:max-w-screen-2xl xl:max-w-screen-xl md:max-w-screen-md sm:max-w-screen-sm self-center">
+    <div class="2xl:max-w-(--breakpoint-2xl) xl:max-w-(--breakpoint-xl) md:max-w-(--breakpoint-md) sm:max-w-(--breakpoint-sm) self-center">
         <c-simple-table :columns=["Test"] :rows=data.rows :page_obj=page_obj :elided_page_range=elided_page_range :header_action=data.header_action />
     </div>
     </c-layouts.base>

games/templates/index.html

@@ -3,7 +3,7 @@
     {{ title }}
 {% endblock title %}
 {% block content %}
-    <div class="text-slate-300 mx-auto max-w-screen-lg text-center">
+    <div class="text-slate-300 mx-auto max-w-(--breakpoint-lg) text-center">
         {% if session_count > 0 %}
             You have played a total of {{ session_count }} sessions for a total of {{ total_duration_formatted }}.
         {% elif not game_available or not platform_available %}

games/templates/list_playevents.html

@@ -1,6 +1,6 @@
 <c-layouts.base>
 {% load static %}
-<div class="2xl:max-w-screen-2xl xl:max-w-screen-xl md:max-w-screen-md sm:max-w-screen-sm self-center">
+<div class="2xl:max-w-(--breakpoint-2xl) xl:max-w-(--breakpoint-xl) md:max-w-(--breakpoint-md) sm:max-w-(--breakpoint-sm) self-center">
     <c-simple-table :columns=data.columns :rows=data.rows :page_obj=page_obj :elided_page_range=elided_page_range :header_action=data.header_action />
 </div>
 </c-layouts.base>

games/templates/list_purchases.html

@@ -1,6 +1,6 @@
 <c-layouts.base>
 {% load static %}
-<div class="2xl:max-w-screen-2xl xl:max-w-screen-xl md:max-w-screen-md sm:max-w-screen-sm self-center">
+<div class="2xl:max-w-(--breakpoint-2xl) xl:max-w-(--breakpoint-xl) md:max-w-(--breakpoint-md) sm:max-w-(--breakpoint-sm) self-center">
     <c-simple-table :columns=data.columns :rows=data.rows :page_obj=page_obj :elided_page_range=elided_page_range :header_action=data.header_action />
 </div>
 </c-layouts.base>

games/templates/list_sessions.html

@@ -35,7 +35,7 @@
                         <tr>
                             <td class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name relative align-top w-24 h-12 group">
                                 <span class="inline-block relative">
-                                    <a class="underline decoration-slate-500 sm:decoration-2 inline-block truncate max-w-20char group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-sm group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4 group-hover:decoration-purple-900 group-hover:text-purple-100"
+                                    <a class="underline decoration-slate-500 sm:decoration-2 inline-block truncate max-w-20char group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-xs group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4 group-hover:decoration-purple-900 group-hover:text-purple-100"
                                        href="{% url 'view_game' session.game.id %}">
                                         {{ session.game.name }}
                                     </a>

games/templates/navbar.html

@@ -1,6 +1,6 @@
 {% load static %}
 <nav class="bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
-    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+    <div class="max-w-(--breakpoint-xl) flex flex-wrap items-center justify-between mx-auto p-4">
         <a href="{% url 'index' %}"
            class="flex items-center space-x-3 rtl:space-x-reverse">
             <img src="{% static 'icons/schedule.png' %}"
@@ -12,7 +12,7 @@
         </a>
         <button data-collapse-toggle="navbar-dropdown"
                 type="button"
-                class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
                 aria-controls="navbar-dropdown"
                 aria-expanded="false">
             <span class="sr-only">Open main menu</span>
@@ -27,7 +27,7 @@
         <div class="hidden w-full md:block md:w-auto" id="navbar-dropdown">
             <ul class="items-center flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
                 <li class="flex items-center">
-                    <button id="theme-toggle" type="button" class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm">
+                    <button id="theme-toggle" type="button" class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm">
                         <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                             <path d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                         </svg>
@@ -42,13 +42,13 @@
                 </li>
                 <li>
                     <a href="#"
-                       class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent"
+                       class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent"
                        aria-current="page">Home</a>
                 </li>
                 <li>
                     <button id="dropdownNavbarNewLink"
                             data-dropdown-toggle="dropdownNavbarNew"
-                            class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">
+                            class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">
                         New
                         <svg class="w-2.5 h-2.5 ms-2.5"
                              aria-hidden="true"
@@ -60,7 +60,7 @@
                     </button>
                     <!-- Dropdown menu -->
                     <div id="dropdownNavbarNew"
-                         class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
+                         class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700 dark:divide-gray-600">
                         <ul class="py-2 text-sm text-gray-700 dark:text-gray-400"
                             aria-labelledby="dropdownLargeButton">
                             <li>
@@ -89,7 +89,7 @@
                 <li>
                     <button id="dropdownNavbarManageLink"
                             data-dropdown-toggle="dropdownNavbarManage"
-                            class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">
+                            class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">
                         Manage
                         <svg class="w-2.5 h-2.5 ms-2.5"
                              aria-hidden="true"
@@ -101,7 +101,7 @@
                     </button>
                     <!-- Dropdown menu -->
                     <div id="dropdownNavbarManage"
-                         class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
+                         class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700 dark:divide-gray-600">
                         <ul class="py-2 text-sm text-gray-700 dark:text-gray-400"
                             aria-labelledby="dropdownLargeButton">
                             <li>
@@ -133,11 +133,11 @@
                 </li>
                 <li>
                     <a href="{% url 'stats_by_year' global_current_year %}"
-                       class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Stats</a>
+                       class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Stats</a>
                 </li>
                 <li>
                     <a href="{% url 'logout' %}"
-                       class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Log
+                       class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Log
                     out</a>
                 </li>
             </ul>

games/templates/partials/gamestatus_selector.html

@@ -22,7 +22,7 @@
          }
      }"
 >
-    <div class="inline-flex rounded-md shadow-xs" role="group" @click.outside="open = false">
+    <div class="inline-flex rounded-md shadow-2xs" role="group" @click.outside="open = false">
         <button type="button" @click="open = !open" class="relative px-4 py-2 text-sm font-medium bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle">
             <span class="flex flex-row gap-4 justify-between items-center">
                 {% for status_value, status_label in game_statuses %}
@@ -35,7 +35,7 @@
             <div class="absolute top-[105%] left-0 w-full whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-t-none border border-gray-200 dark:border-gray-700" x-show="open" style="display: none;">
                 <ul class="[&_li:first-of-type_a]:rounded-none [&_li:last-of-type_a]:rounded-t-none">
                     {% for status_value, status_label in game_statuses %}
-                        <li><a href="#" @click.prevent.stop="setStatus('{{ status_value }}', '{{ status_label }}'); open = false;" class="block px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded !no-underline !border-0" :class="{ 'font-bold': status === '{{ status_value }}' }"><c-gamestatus display="flex" status="{{ status_value }}" class="text-slate-300">{{ status_label }}</c-gamestatus></a></li>
+                        <li><a href="#" @click.prevent.stop="setStatus('{{ status_value }}', '{{ status_label }}'); open = false;" class="block px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded-sm no-underline! border-0!" :class="{ 'font-bold': status === '{{ status_value }}' }"><c-gamestatus display="flex" status="{{ status_value }}" class="text-slate-300">{{ status_label }}</c-gamestatus></a></li>
                     {% endfor %}
                 </ul>
             </div>

games/templates/view_game.html

@@ -2,7 +2,7 @@
 <div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
     <div id="game-info" class="mb-10">
         <div class="flex gap-5 mb-3">
-            <span class="text-balance max-w-[30rem] text-4xl">
+            <span class="text-balance max-w-120 text-4xl">
                 <span class="font-bold font-serif">{{ game.name }}</span>{% if game.year_released %}&nbsp;<c-popover id="popover-year" popover_content="Original release year" class="text-slate-500 text-2xl">{{ game.year_released }}</c-popover>{% endif %}
                 </span>
             </div>
@@ -67,7 +67,7 @@
                      x-data="{ open: false }"
                 >
                     <span class="uppercase">Played</span>
-                    <div class="inline-flex rounded-md shadow-xs" role="group" x-data="{ played: {{ game.playevents.count }} }">
+                    <div class="inline-flex rounded-md shadow-2xs" role="group" x-data="{ played: {{ game.playevents.count }} }">
                         <a href="{% url 'add_playevent' %}">
                         <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
                             <span x-text="played"></span> times
@@ -76,7 +76,7 @@
                         <button type="button" x-on:click="open = !open" @click.outside="open = false" class="relative px-4 py-2 text-sm font-medium text-gray-900 bg-white border-e border-b border-t border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle">
                             <c-icon.arrowdown />
                             <div
-                                class="absolute top-[100%] -left-[1px] w-auto whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-tl-none border border-gray-200 dark:border-gray-700"
+                                class="absolute top-full -left-px w-auto whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-tl-none border border-gray-200 dark:border-gray-700"
                                 x-show="open"
                             >
                                 <ul
@@ -111,7 +111,7 @@
                     <span class="text-black dark:text-slate-300">{{ game.platform }}</span>
                 </div>
             </div>
-            <div class="inline-flex rounded-md shadow-sm mb-3" role="group">
+            <div class="inline-flex rounded-md shadow-xs mb-3" role="group">
                 <a href="{% url 'edit_game' game.id %}">
                     <button type="button"
                             class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">

games/templates/view_purchase.html

@@ -9,12 +9,12 @@
             {{ purchase.name }}
         {% endif %}
         </div>
-    <span class="text-balance max-w-[30rem] text-4xl">
+    <span class="text-balance max-w-120 text-4xl">
         <span class="font-bold font-serif">
             {{ purchase.date_purchased }} ({{ purchase.num_purchases }} game{{ purchase.num_purchases|pluralize}})
         </span>
     </span>
-    <div class="inline-flex rounded-md shadow-sm mb-3" role="group">
+    <div class="inline-flex rounded-md shadow-xs mb-3" role="group">
         <a href="{% url 'edit_purchase' purchase.id %}">
             <button type="button"
                     class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">

package.json

@@ -4,9 +4,10 @@
     "@tailwindcss/typography": "^0.5.13",
     "concurrently": "^8.2.2",
     "npm-check-updates": "^16.14.20",
-    "tailwindcss": "^3.4.14"
+    "tailwindcss": "^4.1.18"
   },
   "dependencies": {
+    "@tailwindcss/cli": "^4.1.18",
     "flowbite": "^2.4.1"
   }
 }

tailwind.config.js

@@ -1,26 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
-const colors = require('tailwindcss/colors');
-
-module.exports = {
-  darkMode: 'class',
-  content: ["./games/**/*.{html,js}", './node_modules/flowbite/**/*.js'],
-  theme: {
-    extend: {
-      fontFamily: {
-        'sans': ['IBM Plex Sans', ...defaultTheme.fontFamily.sans],
-        'mono': ['IBM Plex Mono', ...defaultTheme.fontFamily.mono],
-        'serif': ['IBM Plex Serif', ...defaultTheme.fontFamily.serif],
-        'condensed': ['IBM Plex Sans Condensed', ...defaultTheme.fontFamily.sans],
-      },
-      colors: {
-        'accent': colors.violet[600],
-        'background': colors.gray[800],
-      }
-    },
-  },
-  plugins: [
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/forms'),
-    require('flowbite/plugin')
-  ],
-}