🎨 prettier plugin tailwindcss

youngjoon-lee · Sep 3, 2023 · 7920efa · 7920efa
1 parent fe30107
commit 7920efa
Show file tree

Hide file tree

Showing 36 changed files with 186 additions and 108 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "plugins": ["prettier-plugin-go-template"],
+  "plugins": ["prettier-plugin-go-template", "prettier-plugin-tailwindcss"],
   "htmlWhitespaceSensitivity": "css",
   "semi": true,
   "singleQuote": false,

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -10,5 +10,6 @@
   "editor.quickSuggestions": {
     "strings": true
   },
-  "html.validate.scripts": false
+  "html.validate.scripts": false,
+  "prettier.enable": true
 }
diff --git a/layouts/404.html b/layouts/404.html
@@ -1,7 +1,7 @@
 {{- define "main" }}
-  <div class="mx-auto text-lg xl:text-xl min-w-0 max-w-prose">
+  <div class="mx-auto min-w-0 max-w-prose text-lg xl:text-xl">
     <h1 class="mb-3 text-4xl font-extrabold">{{ i18n "error.404_title" | emojify }}</h1>
-    <p class="mt-8 mb-12 text-neutral-400 dark:text-neutral-500">
+    <p class="mb-12 mt-8 text-neutral-400 dark:text-neutral-500">
       {{- i18n "error.404_error" | emojify -}}
     </p>
     <div class="prose dark:prose-invert">

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html
   dir="{{ .Site.Language.LanguageDirection | default "ltr" }}"
   lang="{{ with .Site.Language.Lang -}}
@@ -8,10 +8,10 @@
   {{- end }}"
 >
   {{ partial "head.html" . }}
-  <body class="w-full min-h-full" x-data="{ up: false }">
+  <body class="min-h-full w-full" x-data="{ up: false }">
     {{ partial "dev-size-indicator.html" . }}
     {{ partial "header.html" . }}
-    <main class="container flex flex-row px-6 mx-auto my-6 lg:px-8 xl:px-12 max-w-7xl">
+    <main class="container mx-auto my-6 flex max-w-7xl flex-row px-6 lg:px-8 xl:px-12">
       {{ block "main" . }}{{ end }}
     </main>
     {{ partial "footer.html" . }}

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -1,15 +1,15 @@
 {{ define "main" }}
   {{ if gt .Pages 0 }}
-    <section class="mx-auto min-w-0 max-w-2xl lg:max-w-3xl flex-grow">
+    <section class="mx-auto min-w-0 max-w-2xl flex-grow lg:max-w-3xl">
       {{ partial "section-header.html" . }}
       {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
         {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
-          <h2 class="mt-12 text-2xl font-bold first:mt-8 text-neutral-700 dark:text-neutral-300">
+          <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
             {{ .Key }}
           </h2>
-          <hr class="border-double border-neutral-400 max-w-none" />
+          <hr class="max-w-none border-double border-neutral-400" />
         {{ end }}
-        <div class="overflow-hidden divide-y divide-neutral-300 dark:divide-neutral-600">
+        <div class="divide-y divide-neutral-300 overflow-hidden dark:divide-neutral-600">
           {{ range .Pages }}
             {{ partial "article-link.html" . }}
           {{ end }}
@@ -19,10 +19,10 @@ <h2 class="mt-12 text-2xl font-bold first:mt-8 text-neutral-700 dark:text-neutra
     </section>
     {{ partial "aside.html" . }}
   {{ else }}
-    <section class="mx-auto min-w-0 max-w-2xl lg:max-w-3xl flex-grow">
+    <section class="mx-auto min-w-0 max-w-2xl flex-grow lg:max-w-3xl">
       {{ partial "section-header.html" . }}
-      <section class="mt-10 prose max-w-none dark:prose-invert">
-        <p class="py-8 border-t">
+      <section class="prose mt-10 max-w-none dark:prose-invert">
+        <p class="border-t py-8">
           <em>{{ i18n "list.no_articles" | emojify }}</em>
         </p>
       </section>

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <article class="flex-grow mx-auto text-lg lg:text-xl min-w-0 max-w-prose">
+  <article class="mx-auto min-w-0 max-w-prose flex-grow text-lg lg:text-xl">
     <header class="text-base">
       {{- if .Site.Params.article.showBreadcrumbs | default false }}
         {{- partial "breadcrumbs.html" . }}
@@ -15,7 +15,7 @@
         {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
       </div>
     </header>
-    <section class="max-w-none text-base prose  dark:prose-invert">
+    <section class="prose max-w-none text-base  dark:prose-invert">
       {{ .Content | emojify }}
     </section>
     <footer class="pt-8">

diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
@@ -1,9 +1,9 @@
 {{ define "main" }}
-  <div class="mx-auto min-w-0 max-w-2xl lg:max-w-3xl flex-grow">
+  <div class="mx-auto min-w-0 max-w-2xl flex-grow lg:max-w-3xl">
     {{ partial "section-header.html" . }}
-    <section class="flex flex-wrap -mx-2 overflow-hidden">
+    <section class="-mx-2 flex flex-wrap overflow-hidden">
       {{ range .Data.Terms }}
-        <article class="px-2 my-3 overflow-hidden w-1/2 md:w-1/3 lg:w-1/4">
+        <article class="my-3 w-1/2 overflow-hidden px-2 md:w-1/3 lg:w-1/4">
           <h2>
             <a
               class="text-lg font-medium hover:underline hover:decoration-primary-500 hover:underline-offset-auto"

diff --git a/layouts/_default/term.html b/layouts/_default/term.html
@@ -1,10 +1,10 @@
 {{ define "main" }}
-  <div class="mx-auto min-w-0 max-w-2xl lg:max-w-3xl flex-grow">
+  <div class="mx-auto min-w-0 max-w-2xl flex-grow lg:max-w-3xl">
     {{ partial "section-header.html" . }}
     <section class="w-full">
       {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
         <h2 class="mt-12 text-2xl font-bold first:mt-8">{{ .Key }}</h2>
-        <hr class="border-double border-neutral-400 max-w-none" />
+        <hr class="max-w-none border-double border-neutral-400" />
         {{ range .Pages }}
           {{ partial "article-link.html" . }}
         {{ end }}

diff --git a/layouts/partials/article-link.html b/layouts/partials/article-link.html
@@ -2,21 +2,21 @@
   <h3 class="flex items-center text-xl font-semibold">
     {{ with .Params.externalUrl }}
       <a
-        class="hover:underline hover:decoration-primary-500 hover:underline-offset-auto text-neutral-800 dark:text-neutral-200"
+        class="text-neutral-800 hover:underline hover:decoration-primary-500 hover:underline-offset-auto dark:text-neutral-200"
         href="{{ . }}"
         target="_blank"
         rel="external"
         >{{ $.Title | emojify }}</a
       >
       <span
-        class="-mt-2 text-xs cursor-default text-neutral-400 dark:text-neutral-500"
+        class="-mt-2 cursor-default text-xs text-neutral-400 dark:text-neutral-500"
         title="{{ i18n "list.externalurl_title" }}"
       >
         &#8599;
       </span>
     {{ else }}
       <a
-        class="hover:underline hover:decoration-primary-500 hover:underline-offset-auto text-neutral-800 dark:text-neutral-200"
+        class="text-neutral-800 hover:underline hover:decoration-primary-500 hover:underline-offset-auto dark:text-neutral-200"
         href="{{ .RelPermalink }}"
         >{{ .Title | emojify }}</a
       >

diff --git a/layouts/partials/article-pagination.html b/layouts/partials/article-pagination.html
@@ -6,7 +6,7 @@
         <span>
           {{ if .PrevInSection }}
             <a class="flex text-right" href="{{ .PrevInSection.RelPermalink }}">
-              <span class="mr-3 article-pagination-direction">&larr;</span>
+              <span class="article-pagination-direction mr-3">&larr;</span>
               <span class="flex flex-col">
                 <span class="article-pagination-title">{{ .PrevInSection.Title }}</span>
                 <span class="article-pagination-date">
@@ -29,7 +29,7 @@
                   {{ end }}
                 </span>
               </span>
-              <span class="ml-3 article-pagination-direction">&rarr;</span>
+              <span class="article-pagination-direction ml-3">&rarr;</span>
             </a>
           {{ end }}
         </span>

diff --git a/layouts/partials/aside.html b/layouts/partials/aside.html
@@ -19,16 +19,16 @@
 {{- end }}
 
 {{- if $showRSide }}
-  <aside class="flex-auto min-w-0 space-y-6 pl-10 mt-3 pr-4 xl:pl-16 hidden lg:block text-sm xl:text-base">
+  <aside class="mt-3 hidden min-w-0 flex-auto space-y-6 pl-10 pr-4 text-sm lg:block xl:pl-16 xl:text-base">
     {{ if $showSeries }}
       {{ partial "components/post-series" . }}
     {{ end }}
     {{ with .GetTerms "tags" }}
       {{ partial "components/post-tags" . }}
     {{ end }}
     {{- if $showTOC }}
-      <div class="sticky self-start top-20 min-h-screen overflow-y-auto truncate">
-        <label class="font-bold text-lg mb-4">{{ i18n "article.table_of_contents" }}</label>
+      <div class="sticky top-20 min-h-screen self-start overflow-y-auto truncate">
+        <label class="mb-4 text-lg font-bold">{{ i18n "article.table_of_contents" }}</label>
         {{ .TableOfContents }}
       </div>
     {{- end }}

diff --git a/layouts/partials/author.html b/layouts/partials/author.html
@@ -1,7 +1,7 @@
 {{ if .Params.showAuthor | default (.Site.Params.article.showAuthor | default true) }}
   <div class="flex text-base text-neutral-500 dark:text-neutral-400">
     {{ with .Site.Author.image }}
-      <img class="w-16 h-16 my-auto mr-4 rounded-full" src="{{ . | relURL }}" alt="Avatar" />
+      <img class="my-auto mr-4 h-16 w-16 rounded-full" src="{{ . | relURL }}" alt="Avatar" />
     {{ end }}
     <div class="place-self-center">
       {{ with .Site.Author.name | markdownify | emojify }}

diff --git a/layouts/partials/badge.html b/layouts/partials/badge.html
@@ -1,6 +1,6 @@
 <span class="flex">
   <span
-    class="ml-1 px-1 py-[1px] text-sm font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600"
+    class="ml-1 rounded-md border border-primary-400 px-1 py-[1px] text-sm font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
   >
     {{ . }}
   </span>

diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html
@@ -7,7 +7,7 @@
   {{ else if not .p1.IsHome }}
     {{ template "crumb" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
   {{ end }}
-  <li class="inline {{ if or (eq .p1 .p2) (.p1.IsHome) }}hidden{{ end }}">
+  <li class="{{ if or (eq .p1 .p2) (.p1.IsHome) }}hidden{{ end }} inline">
     <a class="hover:underline" href="{{ .p1.RelPermalink }}">{{ .p1.Title }}</a
     ><span class="px-1 text-primary-500">/</span>
   </li>

diff --git a/layouts/partials/components/post-series.html b/layouts/partials/components/post-series.html
@@ -1,12 +1,12 @@
 {{- $series := .Site.Taxonomies.series }}
 {{- $currPageLinkTitle := .LinkTitle }}
 <div class="truncate">
-  <label class="font-bold text-lg">{{ i18n "article.series" }}</label>
+  <label class="text-lg font-bold">{{ i18n "article.series" }}</label>
   <ul class="mt-2 space-y-1">
     {{- range (.GetTerms "series") }}
       <li>
         <a class="font-semibold" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
-        <ul class="pl-4 mt-1 space-y-1">
+        <ul class="mt-1 space-y-1 pl-4">
           {{- range .Pages }}
             {{- if ne $currPageLinkTitle .Page.LinkTitle }}
               <li>

diff --git a/layouts/partials/components/post-tags.html b/layouts/partials/components/post-tags.html
@@ -1,6 +1,6 @@
 <div>
-  <label class="font-bold text-lg">{{ i18n "article.tags" }}</label>
-  <div class="space-x-2 mt-2">
+  <label class="text-lg font-bold">{{ i18n "article.tags" }}</label>
+  <div class="mt-2 space-x-2">
     {{ range $index, $value := . }}
       <a href="{{ .Permalink }}" class="hover:underline">#{{ .LinkTitle }}</a>
     {{ end }}

diff --git a/layouts/partials/dev-parameters.html b/layouts/partials/dev-parameters.html
@@ -1,92 +1,92 @@
 {{ if .Site.IsServer }}
-  <div class="container p-4 lg:px-8 xl:px-12 mx-auto overflow-y-auto h-60 max-w-7xl">
-    <table class="w-full text-left table-auto table-collapse">
-      <caption class="pb-2 caption-top">
+  <div class="container mx-auto h-60 max-w-7xl overflow-y-auto p-4 lg:px-8 xl:px-12">
+    <table class="table-collapse w-full table-auto text-left">
+      <caption class="caption-top pb-2">
         Hugo Variables for the current page.
       </caption>
       <thead>
-        <tr class="p-2 font-semibold bg-gray-200 dark:bg-neutral-900 border-t border-gray-100 dark:border-gray-900">
+        <tr class="border-t border-gray-100 bg-gray-200 p-2 font-semibold dark:border-gray-900 dark:bg-neutral-900">
           <th>Variable</th>
           <th>Value</th>
         </tr>
       </thead>
       <tbody>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.Name</td>
           <td>{{ printf "%#v" .Name }}</td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.Title</td>
           <td>{{ printf "%#v" .Title }}</td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.Kind</td>
           <td>{{ printf "%#v" .Kind }}</td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.Type</td>
           <td>{{ printf "%#v" .Type }}</td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.IsPage</td>
           <td>{{ printf "%#v" .IsPage }}</td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.IsHome</td>
           <td>{{ printf "%#v" .IsHome }}</td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.Next</td>
           <td>{{ printf "%v" .Next }}</td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.Prev</td>
           <td>{{ printf "%v" .Prev }}</td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.Params</td>
           <td>
             <table>
               {{ range $k,$v := .Params }}
                 <tr>
-                  <td class="pr-2 italic text-right">{{ printf "%#v:" $k }}</td>
+                  <td class="pr-2 text-right italic">{{ printf "%#v:" $k }}</td>
                   <td>{{ printf "%#v" $v }}</td>
                 </tr>
               {{ end }}
             </table>
           </td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.Section</td>
           <td>{{ printf "%#v" .Section }}</td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.CurrentSection</td>
           <td>{{ printf "%v" .CurrentSection }}</td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.Pages</td>
           <td>
             {{ printf "%v" .Pages }}
             <table>
               {{- range $k,$v := .Pages }}
                 <tr>
-                  <td class="pr-2 italic text-right">{{ printf "%#v:" $k }}</td>
+                  <td class="pr-2 text-right italic">{{ printf "%#v:" $k }}</td>
                   <td>{{ printf "%v" $v }}</td>
                 </tr>
               {{ end -}}
             </table>
           </td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.Resources</td>
           <td>{{ printf "%v" .Resources }}</td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.File</td>
           <td>{{ if .File }}{{ printf "%v" .File }}{{ else }}""{{ end }}</td>
         </tr>
-        <tr class="p-2 border-t">
+        <tr class="border-t p-2">
           <td>.File.Dir</td>
           <td>{{ if .File }}{{ printf "%#v" .File.Dir }}{{ else }}""{{ end }}</td>
         </tr>

diff --git a/layouts/partials/dev-size-indicator.html b/layouts/partials/dev-size-indicator.html
@@ -1,6 +1,6 @@
 {{ if .Site.IsServer }}
   <div
-    class="fixed top-0 right-0 z-30 flex items-center justify-center w-8 h-8 mt-12 mr-8 text-gray-700 uppercase rounded-full bg-yellow-200"
+    class="fixed right-0 top-0 z-30 mr-8 mt-12 flex h-8 w-8 items-center justify-center rounded-full bg-yellow-200 uppercase text-gray-700"
   >
     <span class="block sm:hidden">all</span>
     <span class="hidden sm:block md:hidden">sm</span>

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,5 +1,5 @@
-<footer class="text-neutral-500 dark:text-neutral-500 bg-neutral-200 dark:bg-neutral-900">
-  <div class="container flex flex-row px-6 lg:px-8 xl:px-12 py-4 mx-auto text-sm max-w-7xl">
+<footer class="bg-neutral-200 text-neutral-500 dark:bg-neutral-900 dark:text-neutral-500">
+  <div class="container mx-auto flex max-w-7xl flex-row px-6 py-4 text-sm lg:px-8 xl:px-12">
     <div class="flex-1">
       <p>
         {{/* Copyright */}}