Use css.TailwindCSS

bep · Jun 24, 2024 · cb7f583 · cb7f583
1 parent e782ecf
commit cb7f583
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 1,189 deletions.
diff --git a/assets/css/components/all.css b/assets/css/components/all.css
diff --git a/assets/css/components/buttons.css b/assets/css/components/buttons.css
diff --git a/assets/css/components/markdown.css b/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;
+  }
+}
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -1,13 +1,14 @@
 @import "tailwindcss";
 
-/*@import "components/all.css"; TODO1 */
-
-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";
diff --git a/content/_index.md b/content/_index.md
@@ -25,8 +25,6 @@ func New(numWorkers int) *Workers {
 }
 ```
 
-
-
 ## Block Elements
 
 ### Paragraphs and Line Breaks

diff --git a/hugo_stats.json b/hugo_stats.json
@@ -5,7 +5,6 @@
       "article",
       "blockquote",
       "body",
-      "button",
       "code",
       "div",
       "em",
@@ -25,27 +24,39 @@
       "ul"
     ],
     "classes": [
-      "bg-[green]",
-      "bg-[pink]",
+      "bg-slate-100",
+      "bg-slate-200",
+      "bg-slate-300",
+      "bg-slate-50",
       "container",
       "highlight",
+      "lg:3/4",
       "lg:mx-auto",
-      "lg:prose-xl",
-      "max-w-2xl",
-      "max-w-3xl",
-      "max-w-md",
-      "max-w-screen-md",
-      "max-w-screen-sm",
-      "max-w-xl",
-      "mx-10",
-      "mx-20",
+      "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",
-      "w-8/12"
+      "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",

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -7,13 +7,20 @@
     </title>
     <meta name="description" content="{{ .Description }}" />
     {{ with (templates.Defer (dict "key" "styles" )) }}
-      {{ $options := dict "inlineImports" false }}
+      {{ $t := debug.Timer "tailwindcss" }}
+      {{ $options := dict
+        "inlineImports" true
+        "optimize" true
+        "minify" false
+      }}
       {{ $styles := resources.Get "css/styles.css" }}
-      {{ $styles = $styles | resources.PostCSS $options }}
+
+      {{ $styles = $styles | css.TailwindCSS $options }}
       {{ if hugo.IsProduction }}
         {{ $styles = $styles | minify | fingerprint }}
       {{ end }}
       <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
+      {{ $t.Stop }}
     {{ end }}
   </head>
   <body class="my-10">

diff --git a/layouts/index.html b/layouts/index.html
@@ -1,13 +1,9 @@
 {{ define "main" }}
-  <article class="prose lg:prose-xl mx-auto w-8/12">
-    <h1>Tailwind 4 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 4 Features</h2>
-    <div>
-      <button class="bg-[pink] 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 }}