💄 Adopt new Tailwind v3 classes and colour names

assets/css/main.css

@@ -31,14 +31,9 @@ body button {
   @apply opacity-100;
 }
 
-/* Prose escape hatch */
-.no-prose > p {
-  @apply mt-0 last:mb-0;
-}
-
 /* Article pagination */
 .article-pagination a:hover .article-pagination-title {
-  @apply underline underline-primary-500;
+  @apply underline decoration-primary-500;
 }
 
 .article-pagination a:hover .article-pagination-direction {

assets/css/schemes/avocado.css

@@ -1,7 +1,7 @@
 /* Avocado scheme */
 :root {
   --color-neutral: #fff;
-  /* Warm Gray */
+  /* Stone */
   --color-neutral-50: #fafaf9;
   --color-neutral-100: #f5f5f4;
   --color-neutral-200: #e7e5e4;

assets/css/schemes/fire.css

@@ -1,7 +1,7 @@
 /* Fire scheme */
 :root {
   --color-neutral: #fff;
-  /* Warm Gray */
+  /* Stone */
   --color-neutral-50: #fafaf9;
   --color-neutral-100: #f5f5f4;
   --color-neutral-200: #e7e5e4;

assets/css/schemes/ocean.css

@@ -1,7 +1,7 @@
 /* Ocean scheme */
 :root {
   --color-neutral: #fff;
-  /* Cool Gray */
+  /* Gray */
   --color-neutral-50: #f8fafc;
   --color-neutral-100: #f1f5f9;
   --color-neutral-200: #e2e8f0;

assets/css/schemes/slate.css

@@ -1,37 +1,37 @@
 /* Slate scheme */
 :root {
   --color-neutral: #fff;
-  /* Cool Gray */
+  /* Gray */
-  --color-neutral-50: #F9FAFB;
+  --color-neutral-50: #f9fafb;
-  --color-neutral-100: #F3F4F6;
+  --color-neutral-100: #f3f4f6;
-  --color-neutral-200: #E5E7EB;
+  --color-neutral-200: #e5e7eb;
-  --color-neutral-300: #D1D5DB;
+  --color-neutral-300: #d1d5db;
-  --color-neutral-400: #9CA3AF;
+  --color-neutral-400: #9ca3af;
-  --color-neutral-500: #6B7280;
+  --color-neutral-500: #6b7280;
-  --color-neutral-600: #4B5563;
+  --color-neutral-600: #4b5563;
   --color-neutral-700: #374151;
-  --color-neutral-800: #1F2937;
+  --color-neutral-800: #1f2937;
   --color-neutral-900: #111827;
-  /* Cool Gray */
+  /* Gray */
-  --color-primary-50: #F9FAFB;
+  --color-primary-50: #f9fafb;
-  --color-primary-100: #F3F4F6;
+  --color-primary-100: #f3f4f6;
-  --color-primary-200: #E5E7EB;
+  --color-primary-200: #e5e7eb;
-  --color-primary-300: #D1D5DB;
+  --color-primary-300: #d1d5db;
-  --color-primary-400: #9CA3AF;
+  --color-primary-400: #9ca3af;
-  --color-primary-500: #6B7280;
+  --color-primary-500: #6b7280;
-  --color-primary-600: #4B5563;
+  --color-primary-600: #4b5563;
   --color-primary-700: #374151;
-  --color-primary-800: #1F2937;
+  --color-primary-800: #1f2937;
   --color-primary-900: #111827;
-  /* Cool Gray */
+  /* Gray */
-  --color-secondary-50: #F9FAFB;
+  --color-secondary-50: #f9fafb;
-  --color-secondary-100: #F3F4F6;
+  --color-secondary-100: #f3f4f6;
-  --color-secondary-200: #E5E7EB;
+  --color-secondary-200: #e5e7eb;
-  --color-secondary-300: #D1D5DB;
+  --color-secondary-300: #d1d5db;
-  --color-secondary-400: #9CA3AF;
+  --color-secondary-400: #9ca3af;
-  --color-secondary-500: #6B7280;
+  --color-secondary-500: #6b7280;
-  --color-secondary-600: #4B5563;
+  --color-secondary-600: #4b5563;
   --color-secondary-700: #374151;
-  --color-secondary-800: #1F2937;
+  --color-secondary-800: #1f2937;
   --color-secondary-900: #111827;
 }

exampleSite/content/_index.md

@@ -11,7 +11,7 @@ A simple, lightweight theme for Hugo built with Tailwind CSS.
   <span class="flex items-center pr-3 text-primary-400">
     {{< icon "exclamation-triangle" >}}
   </span>
-  <span class="flex items-center justify-between flex-grow dark:text-neutral-300">
+  <span class="flex items-center justify-between grow dark:text-neutral-300">
     <span class="prose dark:text-neutral">This is a demo of the <code id="layout">page</code> layout.</span>
     <button
       class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"

layouts/_default/baseof.html

@@ -8,7 +8,7 @@
     class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl"
   >
     {{- partial "header.html" . -}}
-    <main class="flex-grow">{{- block "main" . }}{{- end }}</main>
+    <main class="grow">{{- block "main" . }}{{- end }}</main>
     {{- partial "footer.html" . -}}
   </body>
 </html>

layouts/_default/taxonomy.html

@@ -5,7 +5,7 @@
       <article class="w-full px-2 my-3 overflow-hidden sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
         <h2>
           <a
-            class="text-xl font-medium hover:underline hover:underline-primary-500 hover:underline-offset-small"
+            class="text-xl font-medium hover:underline hover:decoration-primary-500 hover:underline-offset-2"
             href="{{ .Page.RelPermalink }}"
             >{{ .Page.Title }}</a
           >

layouts/partials/article-link.html

@@ -2,7 +2,7 @@
   <h3 class="flex items-center mt-6 text-xl font-semibold">
     {{ with .Params.externalUrl }}
       <a
-        class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral"
+        class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral"
         href="{{ . }}"
         target="_blank"
         rel="external"
@@ -16,7 +16,7 @@
       </span>
     {{ else }}
       <a
-        class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral"
+        class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral"
         href="{{ .RelPermalink }}"
         >{{ .Title }}</a
       >

layouts/partials/breadcrumbs.html

@@ -9,7 +9,7 @@
   {{ end }}
   <li class="inline {{ if or (eq .p1 .p2) (.p1.IsHome) }}hidden{{ end }}">
     <a
-      class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600"
+      class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600"
       href="{{ .p1.RelPermalink }}"
       >{{ .p1.Title }}</a
     ><span class="px-1 text-primary-500">/</span>

layouts/partials/footer.html

@@ -6,7 +6,7 @@
         {{ range .Site.Menus.footer }}
           <li class="mb-1 sm:mb-0 sm:mr-7 sm:last:mr-0">
             <a
-              class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small"
+              class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2"
               href="{{ .URL }}"
               title="{{ .Title }}"
               >{{ .Name | markdownify | emojify }}</a
@@ -31,10 +31,10 @@
       {{/* Theme attribution */}}
       {{ if .Site.Params.attribution | default true }}
         <p class="text-xs text-neutral-400 dark:text-neutral-600">
-          {{ $hugo := printf `<a class="hover:underline hover:underline-primary-400 hover:text-primary-500"
+          {{ $hugo := printf `<a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
             href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>`
           }}
-          {{ $congo := printf `<a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href="https://git.io/hugo-congo" target="_blank" rel="noopener noreferrer">Congo</a>` }}
+          {{ $congo := printf `<a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="https://git.io/hugo-congo" target="_blank" rel="noopener noreferrer">Congo</a>` }}
           {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}
         </p>
       {{ end }}

layouts/partials/header.html

@@ -18,7 +18,7 @@
       {{ end }}
     {{ else }}
       <a
-        class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small"
+        class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2"
         rel="me"
         href="{{ "/" | relURL }}"
         >{{ .Site.Title | markdownify | emojify }}</a
@@ -32,7 +32,7 @@
         {{ range .Site.Menus.main }}
           <li class="mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
             <a
-              class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small"
+              class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2"
               href="{{ .URL }}"
               title="{{ .Title }}"
               >{{ .Name | markdownify | emojify }}</a

layouts/shortcodes/alert.html

@@ -2,7 +2,7 @@
   <span class="pr-3 text-primary-400">
     {{ partial "icon.html" "exclamation-triangle" }}
   </span>
-  <span class="no-prose dark:text-neutral-300">
+  <span class="not-prose dark:text-neutral-300">
     {{- .Inner | markdownify -}}
   </span>
 </div>