Если вы собираетесь вести блог о чем-то, делайте это со стилем

Если вы собираетесь что-то делать, делайте это со стилем!¹

Где мои стили?

Мы только что установили TailwindCSS в наш проект и готовы начать добавлять стили, чтобы он выглядел лучше, но по какой-то причине теперь он выглядит хуже, чем до установки.

До	После

Конфигурация Preflight является виновником, который «украл» наши стили. Я уже сталкивался с этим на одном из моих разных шаблонов серии Vite vue ts tailwind. Здесь я буду цитировать документацию:

Построенный поверх modern-normalize, Preflight — это набор базовых стилей для проектов Tailwind, которые призваны сгладить кросс-браузерные несоответствия и облегчить вам работу в рамках ограничений вашей системы дизайна.

В основном, чтобы стили были согласованы во всех браузерах, некоторые элементы имеют дополнительные стили, некоторые — отключенные стили, а некоторые, например, заголовки, вообще не имеют стилей.

Итак, давайте приступим к оформлению нашего блога, а чтобы ускорить процесс, воспользуемся официальным плагином типографики TailwindCSS.

Добавление плагина типографики

1. Установите плагин

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

2. Добавьте запись plugins в tailwind.config.js

   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')],
    }
   

3. Теперь мы можем добавить стили prose в наш html.

   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>
   

   Сразу же мы видим улучшения
   

4. Мы сделаем еще один шаг вперед, центрируя содержимое и добавляя модификаторы точек останова.

   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 }}

и сделаем то же самое в blog/src/layouts/_default/list.html.

Автоматическая сортировка классов с помощью Prettier

Наличие утилитарных css-классов в html может быть очень многословным и громоздким. Это легко может сделать наш код трудночитаемым. Чтобы помочь нам в этом, мы можем автоматически сортировать их.

Мы используем prettier как pre-commit hook, поэтому вместо установки prettier-plugin-tailwindcss как npm-зависимости мы добавим его как additional_dependency для нашего prettier hook.

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:
                 - "prettier@2.7.1"
                 - "prettier-plugin-go-template@0.0.13"
+                - "prettier-plugin-tailwindcss@0.1.12"

Классы плагина типографики не сортируются

По какой-то причине классы плагина @tailwindcss/typography не сортируются. Я пробовал разные варианты, но не смог заставить его работать. Я начал обсуждение, для меня это похоже на ошибку, но, возможно, я что-то упускаю.

Ссылки

• https://tailwindcss.com/docs/preflight
• https://dev.to/imomaliev/vite-vue-ts-tailwind-template-convert-styles-to-tailwindcss-classes-and-configs-part-3-467c
• https://tailwindcss.com/docs/preflight#headings-are-unstyled
• https://github.com/tailwindlabs/prettier-plugin-tailwindcss
• https://tailwindcss.com/docs/typography-plugin
• https://github.com/tailwindlabs/tailwindcss/discussions/8921

1. Цитата Джейсона Стэтхэма