Update Tailwind CSS from v3.2.4 to v4.3.3

Dockerfile

@@ -4,11 +4,12 @@ WORKDIR /app/
 COPY composer.json composer.lock ./
 RUN composer install --ignore-platform-reqs --optimize-autoloader
 
-FROM scratch AS tailwind
+FROM alpine:3 AS tailwind
+RUN apk --no-cache add libstdc++
 WORKDIR /app/
-ADD --checksum=sha256:cd52e757cb0bd15238f0207a215198d924811234028d056b7be39fde70491296 --chmod=0755 \
-    https://github.com/tailwindlabs/tailwindcss/releases/download/v3.2.4/tailwindcss-linux-x64 /usr/local/bin/tailwindcss
-ENTRYPOINT ["tailwindcss"]
+ADD --checksum=sha256:a04d34ceacc8f52cbe8920ad846cdeb61d3d0021dba32db0d1f77c9d9fad7a6c --chmod=0755 \
+    https://github.com/tailwindlabs/tailwindcss/releases/download/v4.3.3/tailwindcss-linux-x64-musl /usr/local/bin/tailwindcss
+ENTRYPOINT ["tailwindcss", "-i", "tailwind.css"]
 
 FROM php:8.1-apache AS build
 WORKDIR /app/

Makefile

@@ -5,7 +5,7 @@ vendor: composer.json composer.lock
 	composer install
 	touch $@
 
-www/src/tailwind.min.css: www/_layouts/* www/_posts/* www/_talks/* www/*.html www/*.html.twig tailwind.config.js
+www/src/tailwind.min.css: www/_layouts/* www/_posts/* www/_talks/* www/*.html www/*.html.twig tailwind.css
 	docker compose run --rm --build tailwind -o $@ --minify
 	touch $@
 

compose.yaml

@@ -34,7 +34,7 @@ services:
     stdin_open: true
     stop_signal: SIGKILL
     volumes:
-      - ./tailwind.config.js:/app/tailwind.config.js:ro
+      - ./tailwind.css:/app/tailwind.css:ro
       - ./www:/app/www:rw
     develop:
       watch:

tailwind.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/theme.css";
+@import "tailwindcss/preflight.css";
+@import "tailwindcss/utilities.css";

www/_layouts/default.html

@@ -33,7 +33,7 @@
             <a href="{{ base }}talks" class="text-base text-gray-300 hover:text-gray-200">
               Talks
             </a>
-            <a href="{{ base }}support" class="ml-8 whitespace-nowrap inline-flex items-center justify-center px-1 sm:px-4 py-1 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-500 hover:bg-blue-400">
+            <a href="{{ base }}support" class="whitespace-nowrap inline-flex items-center justify-center px-1 sm:px-4 py-1 border border-transparent rounded-md shadow-xs text-base font-medium text-white bg-blue-500 hover:bg-blue-400">
               <span class="hidden sm:inline sm:mr-1">Professional</span> Services
             </a>
           </nav>

www/contact.html

@@ -44,25 +44,25 @@ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
         <div class="mb-6">
           <label for="name" class="block text-sm font-medium text-gray-700">Your name: <small class="text-gray-500">(required)</small></label>
           <div class="mt-1">
-            <input type="text" name="name" id="name" autocomplete="name" placeholder="Your name" required minlength="2" maxlength="200" class="py-3 px-4 block w-full shadow bg-transparent text-gray-500 border-gray-300 rounded-md">
+            <input type="text" name="name" id="name" autocomplete="name" placeholder="Your name" required minlength="2" maxlength="200" class="py-3 px-4 block w-full shadow bg-transparent text-gray-500 placeholder-gray-400 border-gray-300 rounded-md">
           </div>
         </div>
         <div class="mb-6">
           <label for="email" class="block text-sm font-medium text-gray-700">Your email: <small class="text-gray-500">(required)</small></label>
           <div class="mt-1">
-            <input id="email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required maxlength="200" class="py-3 px-4 block w-full shadow bg-transparent text-gray-500 border-gray-300 rounded-md">
+            <input id="email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required maxlength="200" class="py-3 px-4 block w-full shadow bg-transparent text-gray-500 placeholder-gray-400 border-gray-300 rounded-md">
           </div>
         </div>
         <div class="mb-6">
           <label for="company" class="block text-sm font-medium text-gray-700">Company: <small class="text-gray-500">(optional)</small></label>
           <div class="mt-1">
-            <input type="text" name="company" id="company" autocomplete="organization" placeholder="Your company" maxlength="200" class="py-3 px-4 block w-full shadow bg-transparent text-gray-500 border-gray-300 rounded-md">
+            <input type="text" name="company" id="company" autocomplete="organization" placeholder="Your company" maxlength="200" class="py-3 px-4 block w-full shadow bg-transparent text-gray-500 placeholder-gray-400 border-gray-300 rounded-md">
           </div>
         </div>
         <div class="mb-6 hidden">
           <label for="url" class="block text-sm font-medium text-gray-700">Your URL: <small class="text-gray-500">(please leave blank)</small></label>
           <div class="mt-1">
-            <input id="url" name="url" type="url" autocomplete="off" placeholder="http://example.com/" maxlength="200" class="py-3 px-4 block w-full shadow bg-transparent text-gray-500 border-gray-300 rounded-md">
+            <input id="url" name="url" type="url" autocomplete="off" placeholder="http://example.com/" maxlength="200" class="py-3 px-4 block w-full shadow bg-transparent text-gray-500 placeholder-gray-400 border-gray-300 rounded-md">
           </div>
         </div>
         <div class="mb-6">
@@ -79,11 +79,11 @@ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
         <div class="mb-6">
           <label for="message" class="block text-sm font-medium text-gray-700">Message: <small class="text-gray-500">(required)</small></label>
           <div class="mt-1">
-            <textarea id="message" name="message" rows="6" required minlength="20" maxlength="100000" placeholder="Hi Christian, &#10;let's work together! Here's some additional info about the thing… &#10;Cheers, Alice" class="py-3 px-4 block w-full shadow bg-transparent text-gray-500 border-gray-300 rounded-md"></textarea>
+            <textarea id="message" name="message" rows="6" required minlength="20" maxlength="100000" placeholder="Hi Christian, &#10;let's work together! Here's some additional info about the thing… &#10;Cheers, Alice" class="py-3 px-4 block w-full shadow bg-transparent text-gray-500 placeholder-gray-400 border-gray-300 rounded-md"></textarea>
           </div>
         </div>
         <div class="mb-6">
-          <button type="submit" class="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow text-base font-medium text-white bg-blue-400 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400">
+          <button type="submit" class="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow text-base font-medium text-white bg-blue-400 hover:bg-blue-500 cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-400">
             Let's talk
           </button>
         </div>

www/index.html.twig

@@ -25,10 +25,10 @@ layout: default
               </p>
               <div class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center">
                 <div class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
-                  <a href="#appointment" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-blue-400 bg-white hover:bg-blue-500 hover:text-white sm:px-8">
+                  <a href="#appointment" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-xs text-blue-400 bg-white hover:bg-blue-500 hover:text-white sm:px-8">
                     Free Appointment
                   </a>
-                  <a href="support" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-400 bg-opacity-60 hover:bg-opacity-70 sm:px-8">
+                  <a href="support" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-xs text-white bg-blue-400/60 hover:bg-blue-400/70 sm:px-8">
                     How It Works
                   </a>
                 </div>
@@ -436,11 +436,11 @@ layout: default
 </section>
 
 <section class="bg-white">
-  <div class="max-w-7xl mx-auto py-16 px-4 divide-y-2 divide-gray-200 sm:py-24 sm:px-6 lg:px-8">
+  <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
     <h2 class="text-3xl font-extrabold text-gray-700">
       Frequently asked questions
     </h2>
-    <div class="mt-6 pt-10">
+    <div class="mt-6 pt-10 border-t-2 border-gray-200">
       <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12">
         <div>
           <dt class="text-lg leading-6 font-medium text-gray-700">

www/support.html

@@ -7,7 +7,7 @@
   <div class="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
 
     <div class="relative">
-      <h2 class="text-center text-3xl leading-8 font-extrabold tracking-tight text-gray-700 sm:text-4xl">
+      <h2 class="text-center text-3xl leading-8 font-extrabold tracking-tight text-gray-700 sm:text-4xl sm:leading-10">
         Here’s How We Streamline Your Development Projects
       </h2>
       <p class="mt-4 max-w-3xl mx-auto text-center text-xl text-gray-500">
@@ -324,7 +324,7 @@ <h2 class="text-3xl text-gray-700 font-extrabold tracking-tight">
               we provide you with the knowledge and resources you need to streamline your development project as quickly as possible.
             </p>
             <div class="mt-6">
-              <a href="contact" class="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-400 hover:bg-blue-500">
+              <a href="contact" class="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-xs text-white bg-blue-400 hover:bg-blue-500">
                 Book Us
               </a>
             </div>
@@ -334,7 +334,7 @@ <h2 class="text-3xl text-gray-700 font-extrabold tracking-tight">
       <div class="mt-12 sm:mt-16 lg:mt-0">
         <div class="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
           <!-- Photo by Scott Graham on https://unsplash.com/photos/5fNmWej4tAA -->
-          <img class="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none" src="src/consulting-stock.jpg" alt="Two people with laptops sitting next to each other and collaborating over written notes">
+          <img class="w-full rounded-xl shadow-xl ring-1 ring-black/5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none" src="src/consulting-stock.jpg" alt="Two people with laptops sitting next to each other and collaborating over written notes">
         </div>
       </div>
     </div>
@@ -362,7 +362,7 @@ <h2 class="text-3xl text-gray-700 font-extrabold tracking-tight">
               Reach out to us for more information about our custom consulting packages.
             </p>
             <div class="mt-6">
-              <a href="contact" class="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-400 hover:bg-blue-500">
+              <a href="contact" class="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-xs text-white bg-blue-400 hover:bg-blue-500">
                 Book Us
               </a>
             </div>
@@ -372,7 +372,7 @@ <h2 class="text-3xl text-gray-700 font-extrabold tracking-tight">
       <div class="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1">
         <div class="pr-4 -ml-48 sm:pr-6 md:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
           <!-- Photo by Bench Accounting on https://unsplash.com/photos/C3V88BOoRoM -->
-          <img class="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none" src="src/coaching-stock.jpg" alt="Two people sitting next to each other and collaborating over a shared laptop">
+          <img class="w-full rounded-xl shadow-xl ring-1 ring-black/5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none" src="src/coaching-stock.jpg" alt="Two people sitting next to each other and collaborating over a shared laptop">
         </div>
       </div>
     </div>
@@ -602,47 +602,47 @@ <h2 class="text-base font-semibold tracking-wide text-blue-400 uppercase">
           </p>
         </div>
         <ul class="rounded overflow-hidden grid gap-px sm:grid-cols-2">
-          <li class="bg-gray-900 bg-opacity-90 py-4 px-4 flex items-center space-x-3 text-base text-white">
+          <li class="bg-gray-900/90 py-4 px-4 flex items-center space-x-3 text-base text-white">
             <!-- Heroicon name: outline/check -->
             <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
             </svg>
             <span>Talk to an Expert</span>
           </li>
 
-          <li class="bg-gray-900 bg-opacity-90 py-4 px-4 flex items-center space-x-3 text-base text-white">
+          <li class="bg-gray-900/90 py-4 px-4 flex items-center space-x-3 text-base text-white">
             <!-- Heroicon name: outline/check -->
             <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
             </svg>
             <span>Custom-Tailored</span>
           </li>
 
-          <li class="bg-gray-900 bg-opacity-90 py-4 px-4 flex items-center space-x-3 text-base text-white">
+          <li class="bg-gray-900/90 py-4 px-4 flex items-center space-x-3 text-base text-white">
             <!-- Heroicon name: outline/check -->
             <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
             </svg>
             <span>Recurring sessions</span>
           </li>
 
-          <li class="bg-gray-900 bg-opacity-90 py-4 px-4 flex items-center space-x-3 text-base text-white">
+          <li class="bg-gray-900/90 py-4 px-4 flex items-center space-x-3 text-base text-white">
             <!-- Heroicon name: outline/check -->
             <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
             </svg>
             <span>Long-Term Support</span>
           </li>
 
-          <li class="bg-gray-900 bg-opacity-90 py-4 px-4 flex items-center space-x-3 text-base text-white">
+          <li class="bg-gray-900/90 py-4 px-4 flex items-center space-x-3 text-base text-white">
             <!-- Heroicon name: outline/check -->
             <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
             </svg>
             <span>Scales on Demand</span>
           </li>
 
-          <li class="bg-gray-900 bg-opacity-90 py-4 px-4 flex items-center space-x-3 text-base text-white">
+          <li class="bg-gray-900/90 py-4 px-4 flex items-center space-x-3 text-base text-white">
             <!-- Heroicon name: outline/check -->
             <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />