무언가에 대해 블로그를 작성하려면 스타일을 가지고 하세요.

If you're going to do something, do it with style!¹

내 스타일은 어디에 있습니까?

Built on top of modern-normalize, Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

타이포그래피 플러그인 추가

$ npm install --save-dev @tailwindcss/typography

diff --git a/blog/tailwind.config.js b/blog/tailwind.config.js
index 9d0ca2f..586083d 100644
--- a/blog/tailwind.config.js
+++ b/blog/tailwind.config.js
@@ -4,5 +4,5 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/typography')],
 }

이제 html에 prose 스타일을 추가할 수 있습니다.

diff --git a/blog/src/layouts/_default/single.html b/blog/src/layouts/_default/single.html
index 560541c..6cc083d 100644
--- a/blog/src/layouts/_default/single.html
+++ b/blog/src/layouts/_default/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-    <article>
+    <article class="prose">
         <h1>{{ .Title }}</h1>
         {{ .Content }}
     </article>

즉시 우리는 개선 사항을 볼 수 있습니다

콘텐츠를 중앙에 배치하고 중단점 수정자를 추가하여 한 단계 더 나아가겠습니다.

diff --git a/blog/src/layouts/_default/single.html b/blog/src/layouts/_default/single.html
index 560541c..6cc083d 100644
--- a/blog/src/layouts/_default/single.html
+++ b/blog/src/layouts/_default/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-    <article class="prose">
+    <article class="prose prose-sm prose-table:table-fixed lg:prose-lg xl:prose-xl 2xl:prose-2xl mx-auto">
         <h1>{{ .Title }}</h1>
         {{ .Content }}
     </article>

훨씬 낫다. prose-table:table-fixed 요소 수정자도 추가했음을 알 수 있습니다. 이는 기사의 테이블 크기가 고정되도록 하기 위한 것입니다.

헤더에 스타일 추가

diff --git a/blog/src/layouts/index.html b/blog/src/layouts/index.html
index 4fbcad1..9c1cdd3 100644
--- a/blog/src/layouts/index.html
+++ b/blog/src/layouts/index.html
@@ -1,8 +1,10 @@
 {{ define "main" }}
-    <h1>{{ .Site.Title }}</h1>
+    <h1 class="text-5xl font-bold">{{ .Site.Title }}</h1>
     {{ range .Pages }}
         <article>
-            <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+            <h2 class="text-4xl underline">
+                <a href="{{ .Permalink }}">{{ .Title }}</a>
+            </h2>
         </article>
     {{ end }}
 {{ end }}

Prettier를 사용한 자동 클래스 정렬

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index b8b2f7f..0b88113 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -26,6 +26,7 @@ repos:
             additional_dependencies:
                 - "[email protected]"
                 - "[email protected]"
+                - "[email protected]"

타이포그래피 플러그인 클래스가 정렬되지 않음

연결