Tailwind 4 (in progress)

assets/css/components/markdown.css

@@ -0,0 +1,101 @@
+.markdown {
+  @apply text-gray-900 font-serif;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    @apply font-sans tracking-tight;
+  }
+
+  h1 {
+    @apply text-3xl font-bold;
+  }
+
+  h2 {
+    @apply text-2xl font-bold;
+  }
+
+  h3 {
+    @apply text-xl font-bold;
+  }
+
+  h4 {
+    @apply text-lg font-bold;
+  }
+
+  h5 {
+    @apply text-base font-bold;
+  }
+
+  h6 {
+    @apply text-sm font-bold;
+  }
+
+  p + h2,
+  p + h3,
+  ul + h2,
+  ul + h3,
+  ol + h2,
+  ol + h3 {
+    @apply mt-6;
+  }
+
+  h2 + h3 {
+    @apply mt-2;
+  }
+
+  p {
+    @apply text-base mt-2 leading-relaxed;
+  }
+
+  a {
+    @apply text-blue-600 underline;
+  }
+
+  a:hover {
+    @apply text-blue-800;
+  }
+
+  ul {
+    @apply list-disc pl-4 mt-2;
+  }
+
+  ol {
+    @apply list-decimal pl-4 mt-2;
+  }
+
+  li:not(:last-child) {
+    @apply mb-2;
+  }
+
+  blockquote {
+    @apply border-l-2 border-gray-200 pl-3 mt-6 mb-8;
+  }
+
+  .highlight {
+    @apply my-4;
+    pre {
+      @apply text-sm m-0 p-4;
+
+      code {
+        @apply bg-none p-0;
+      }
+    }
+  }
+
+  pre:has(code) {
+    @apply p-2 m-4 bg-gray-100 rounded-lg overflow-x-auto;
+  }
+
+  pre {
+    code {
+      @apply bg-inherit text-sm font-mono;
+    }
+  }
+
+  code {
+    @apply bg-gray-200 px-1 rounded-md text-green-800;
+  }
+}

assets/css/styles.css

@@ -1,15 +1,14 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-@import "components/all.css";
-
-html {
-  font-size: 14px;
+@theme {
+  --color-orange-300: #f56642;
+  --color-blue-100: #427bf5;
+  --color-gray-50: #f8fafc;
+  --color-gray-100: #f1f5f9;
+  --color-gray-200: #e2e8f0;
+  --color-green-800: #3f6212;
+  --color-green-900: #365314;
+  --color-green-950: #1a2e05;
 }
 
-@screen md {
-  html {
-    font-size: 20px;
-  }
-}
+@import "components/markdown.css";

content/_index.md

@@ -25,8 +25,6 @@ func New(numWorkers int) *Workers {
 }
 ```
 
-
-
 ## Block Elements
 
 ### Paragraphs and Line Breaks

hugo.toml

@@ -5,25 +5,19 @@ disableKinds = ["page", "section", "taxonomy", "term"]
 [module]
   [module.hugoVersion]
     extended = false
-    min      = "0.112.0"
+    min      = "0.128.0"
   [[module.mounts]]
     source = "assets"
     target = "assets"
   [[module.mounts]]
-    source = "hugo_stats.json"
-    target = "assets/watching/hugo_stats.json"
-
-[build]
-  writeStats = true
-  [[build.cachebusters]]
-    source = "assets/watching/hugo_stats\\.json"
-    target = "styles\\.css"
-  [[build.cachebusters]]
-    source = "(postcss|tailwind)\\.config\\.js"
-    target = "css"
-  [[build.cachebusters]]
-    source = "assets/.*\\.(js|ts|jsx|tsx)"
-    target = "js"
-  [[build.cachebusters]]
-    source = "assets/.*\\.(.*)$"
-    target = "$1"
+    source       = "hugo_stats.json"
+    target       = "assets/notwatching/hugo_stats.json"
+    disableWatch = true
+[build.buildStats]
+  enable = true
+[[build.cachebusters]]
+  source = "assets/notwatching/hugo_stats\\.json"
+  target = "styles\\.css"
+[[build.cachebusters]]
+  source = "(postcss|tailwind)\\.config\\.js"
+  target = "css"

hugo_stats.json

@@ -5,7 +5,6 @@
       "article",
       "blockquote",
       "body",
-      "button",
       "code",
       "div",
       "em",
@@ -15,7 +14,6 @@
       "head",
       "html",
       "li",
-      "link",
       "meta",
       "ol",
       "p",
@@ -26,16 +24,39 @@
       "ul"
     ],
     "classes": [
-      "bg-[green]",
+      "bg-slate-100",
+      "bg-slate-200",
+      "bg-slate-300",
+      "bg-slate-50",
       "container",
       "highlight",
+      "lg:3/4",
       "lg:mx-auto",
-      "lg:prose-xl",
+      "lg:w-1/2",
+      "lg:w-3/4",
+      "lg:w-3/5",
+      "lg:w-8/12",
+      "markdown",
+      "max-w-[90ch]",
+      "mb-8",
+      "md:3/4",
+      "md:pl-8",
+      "mx-auto",
       "my-10",
+      "p-2",
+      "p-3",
       "p-4",
-      "prose",
       "px-4",
-      "text-4xl"
+      "rounded",
+      "rounded-sm",
+      "text-6xl",
+      "text-center",
+      "xl:96",
+      "xl:w-1/2",
+      "xl:w-3/4",
+      "xl:w-3/5",
+      "xl:w-96",
+      "xl:w-[90ch]"
     ],
     "ids": [
       "block-elements",
@@ -53,4 +74,4 @@
       "this-is-a-header"
     ]
   }
-}
+}

layouts/_default/baseof.html

@@ -1,19 +1,27 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>
       {{ .Title }}
     </title>
     <meta name="description" content="{{ .Description }}" />
-    {{/* styles */}}
-    {{ $options := dict "inlineImports" true }}
-    {{ $styles := resources.Get "css/styles.css" }}
-    {{ $styles = $styles | resources.PostCSS $options }}
-    {{ if hugo.IsProduction }}
-      {{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
+    {{ with (templates.Defer (dict "key" "styles" )) }}
+      {{ $t := debug.Timer "tailwindcss" }}
+      {{ $options := dict
+        "inlineImports" true
+        "optimize" true
+        "minify" false
+      }}
+      {{ $styles := resources.Get "css/styles.css" }}
+
+      {{ $styles = $styles | css.TailwindCSS $options }}
+      {{ if hugo.IsProduction }}
+        {{ $styles = $styles | minify | fingerprint }}
+      {{ end }}
+      <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
+      {{ $t.Stop }}
     {{ end }}
-    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
   </head>
   <body class="my-10">
     <div class="container px-4 lg:mx-auto">

layouts/index.html

@@ -1,13 +1,9 @@
 {{ define "main" }}
-  <article class="prose lg:prose-xl">
-    <h1>Tailwind 3 Hugo Starter</h1>
+  <article class="mx-auto max-w-[90ch]">
+    <h1 class="text-6xl mb-8 text-center">Tailwind 4 Hugo Starter</h1>
 
-    <h2 class="text-4xl">Testing Tailwind 3 Features</h2>
-    <div>
-      <button class="bg-[green] p-4">Share on Twitter</button>
+    <div class="markdown p-4 bg-slate-50">
+      {{ .Content }}
     </div>
-
-    <h2 class="text-4xl">Markdowns: {{ .Title }}</h2>
-    {{ .Content }}..
   </article>
 {{ end }}