Update to Tailwind CSS v4

.tmux-sessionizer

@@ -4,7 +4,9 @@ PATH="${PATH}:./vendor/bin"
 
 tmux new-window -dn scratch
 tmux new-window -dn server
+tmux new-window -dn tailwindcss -c "themes/opdavies"
 
 tmux send-keys -t server "drush runserver" Enter
+tmux send-keys -t tailwindcss "tailwindcss --input css/tailwind.css --output build/tailwind.css --watch" Enter
 
 nvim .

themes/opdavies/.gitignore

@@ -0,0 +1 @@
+build/

themes/opdavies/components/testimonial.html.twig

@@ -1,5 +1,5 @@
 <article>
-  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
+  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
     <blockquote>
       {{ text }}
     </blockquote>

themes/opdavies/css/tailwind.css

@@ -0,0 +1,18 @@
+@import "tailwindcss";
+
+@plugin '@tailwindcss/typography';
+
+@theme {
+  --color-blue-400: #60a5fa;
+  --color-blue-primary: #24608a;
+
+  --font-sans: "Roboto Condensed", "Arial", "Helvetica Neue", "Helvetica", "sans-serif";
+}
+
+@layer base {
+  @font-face {
+    font-family: Roboto Condensed;
+    font-weight: 300 400 500 700;
+    src: url('../assets/fonts/RobotoCondensed-VariableFont_wght.ttf') format('truetype');
+  }
+}

themes/opdavies/flake.nix

@@ -8,7 +8,9 @@
     {
       devShells.${system}.default = pkgs.mkShell {
         buildInputs = with pkgs; [
-          tailwindcss
+          tailwindcss-language-server
+          tailwindcss_4
+          watchman
         ];
       };
     };

themes/opdavies/tailwind.config.ts

@@ -0,0 +1,45 @@
+import colours from "tailwindcss/colors";
+import type { Config } from "tailwindcss";
+import formsPlugin from '@tailwindcss/forms';
+import typographyPlugin from "@tailwindcss/typography";
+
+export default {
+  // content: [
+  //   "./templates/**/*.html.twig",
+  // ],
+  theme: {
+    colors: {
+      black: "#000",
+      blue: {
+        primary: "#24608A",
+        400: "#60a5fa",
+      },
+      current: "currentColor",
+      grey: colours.stone,
+      inherit: "inherit",
+      transparent: "transparent",
+      white: "#fff",
+    },
+
+    extend: {
+      fontFamily: {
+        sans: [
+          "Roboto Condensed",
+          "Arial",
+          "Helvetica Neue",
+          "Helvetica",
+          "sans-serif",
+        ],
+      },
+
+      typography: ({ theme }) => ({
+        DEFAULT: {
+          css: {
+            // '--tw-prose-pre-bg': theme('colors.red.200'),
+          },
+        },
+      }),
+    },
+  },
+  plugins: [formsPlugin, typographyPlugin],
+} satisfies Config;

themes/opdavies/templates/email-signup-form.html.twig

@@ -77,7 +77,7 @@
         </div>
 
         <footer class="px-4 mt-4 text-center">
-          <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']
+          <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']
     ">
             <p>Not sure? <a href="/archive">Browse the archive →</a></p>
           </div>

themes/opdavies/templates/field--body.html.twig

@@ -45,7 +45,7 @@
 %}
 
 {%
-  set prose_classes = "prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']"
+  set prose_classes = "prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']"
 %}
 
 {% if label_hidden %}

themes/opdavies/templates/node--podcast-episode--full.html.twig

@@ -69,7 +69,7 @@
   {% endif %}
   {{ title_suffix }}
 
-  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
+  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
     {% if display_submitted %}
       <div class="my-2 text-base">
         {% set created = node.getCreatedTime() %}

themes/opdavies/templates/node--podcast-episode.html.twig

@@ -69,7 +69,7 @@
   {% endif %}
   {{ title_suffix }}
 
-  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
+  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
     {% if display_submitted %}
       <div class="my-2 text-base">
         {% set created = node.getCreatedTime() %}

themes/opdavies/templates/page.html.twig

@@ -106,7 +106,7 @@
               <img src="/assets/images/social-avatar.jpg" alt="Picture of Oliver" class="my-0 w-16 h-16 rounded-full ring-[3px] ring-blue-primary dark:ring-white">
             </div>
 
-            <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-[''] ">
+            <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-[''] ">
               <p>I'm an certified Drupal Triple Expert with 18 years of experience, a Drupal core contributor, <a href="/presentations">public speaker</a>, <a href="https://www.youtube.com/@opdavies/streams">live streamer</a>, and host of the <a href="/podcast">Beyond Blocks podcast</a>.</p>
             </div>
           </div>

themes/opdavies/templates/views-view--daily-email-archive.html.twig

@@ -42,7 +42,7 @@
   {{ title }}
   {{ title_suffix }}
 
-  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
+  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
     {% if header %}
       <header>
         {{ header }}

themes/opdavies/templates/views-view--podcast-episodes.html.twig

@@ -44,7 +44,7 @@
 
   <div>
     {% if header %}
-      <header class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
+      <header class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white prose-a:hover:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
         {{ header }}
       </header>
     {% endif %}