Использование плагина tailwindcss-typography для реализации типографики на сайте
Я думаю ни для кого не секрет, что сейчас Tailwind является одним из популярнейших утилитарных CSS-фреймворков. Я сам с того момента, как впервые попробовал в деле Tailwind, все больше стал применять его в рабочих проектах и до сих пор остаюсь доволен результатом работы с этим фреймворком.
Но сегодня я хочу рассказать об одном очень полезном плагине к Tailwind, который сильно меня выручает при необходимости реализации аккуратной оформления текстового контента (текстовые страницы, статьи и пр.) в разрабатываемых сайтах.
В чем суть проблемы
В большинстве случаев при разработке многостраничного сайта так или иначе приходится прорабатывать всю мелкую типографику текстовых разделов. При этом надо учитывать, что контент может редактироваться пользователем в админке и соответственно в контенте в любой момент могут появиться и подчеркивания и таблицы и все виды заголовков (h1-h6) и курсив и жирное начертание и прочее множество других элементов типографики. И все это должно автоматически, корректно и гармонично отображаться в адаптивном режиме с поддержкой кучи разных разрешений экранов различных устройств.
С точки зрения верстки подобных разделов, тоже все непросто, поскольку CSS-классы непосредственно на элементы контента особо не навешаешь, ибо этот контент создается пользователем в WYSIWYG-редакторе через систему администрирования (например с помощью CKeditor и пр.) или преобразовываться из другого формата (например из Markdown в HTML).
В общем, скажу честно, подробная проработка типографики является долгой, муторной, дорогой и очень скучной задачей, которую еще и не всегда оценит заказчик. Поэтому я начал искать какое-то готовое решение, которое бы автоматизировало стилизацию подобного контента на разрабатываемых сайтах и в процессе поисков натолкнулся на плагин tailwindcss-typography от команды Tailwind, который как раз и решает подобную проблему.
Плагин tailwindcss-typography
Tailwindcss-typography — официальный плагин к Tailwind CSS, предоставляющий готовую реализацию типографики для аккуратного стилизованного форматирования заданного текстового контента (например какой-нибудь статьи в новостном сайте).
Чтобы с помощью этого плагина красиво, аккуратно и автоматически стилизовать текстовый контент, для начала достаточно просто задать класс prose для элемента (контейнера), содержащего соответствующий текстовый контент, как в примере ниже:
<article class="prose">
<h1>Это заголовок первого уровня</h1>
<p>
Тут какой-то пример текста.
</p>
<ul>
<li>Пункт №1</li>
<li>Пункт №2</li>
<li>Пункт №3</li>
</ul>
<p>
Тут еще какой-то текст, но уже с подчеркиваниями и пр.
</p>
<!-- ... -->
</article>Соответственно весь контент внутри блока с классом prose будет автоматически красиво стилизован. Вообще сам по себе плагин просто генерирует большой набор селекторов вида .prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {} которые уже и стилизуют контент и за счет подобного подхода, плагин никак непосредственно не влияет на код текстового контента.
Управление стилизацией контента производится также установкой дополнительных классов к элементу-контейнеру с классом prose. Например в случае необходимости отображать блок в большем размере шрифтов, можно ипользовать дополнительный класс prose-xl, как показано в следующем примере:
<article class="prose prose-xl">
<p>
Весь текст в этом блоке будет отображаться крупно.
</p>
</article>В настоящее время, в этом плагине есть несколько основных классов, задающие размеры текста в блоке, среди которых по умолчанию используется `prose-base`:
"prose-sm"— 0.875rem (14px)"prose-base"(используется по умолчанию) — 1rem (16px)"prose-lg"— 1.125rem (18px)"prose-xl"— 1.25rem (20px)"prose-2xl"— 1.5rem (24px)
Обратите внимание на то, что классы не фиксируют жестко размеры шрифта всего текста, а задают среднюю величину, от которой отклоняются различные элементы верстки (например заголовки h1-h6, теги sub и sup и пр.).
Также плагин предоставляет несколько предопределенных цветовых схем (по умолчанию используется prose-gray), названия которых уже могут быть знакомы тем, кто уже работал с цветовыми наборами присутствующими в Tailwind: prose-gray, prose-slate, prose-zinc, prose-neutral, prose-stone.
Как и в случае с размерами шрифта, эти классы-пресеты задают усредненный тон. Например, если задан prose-gray, то это значит, что контент будет в тонах серого, а не конкретно одного значения цвета.
Адаптивность реализуется стандартными возможностями Tailwind, т.е. все теми же префиксами sm:, md:, lg:, xl:, 2xl, как это показано на примере:
<article class="prose prose-lg md:prose-xl lg:prose-2xl prose-emerald">
...
</article>В случае, если вам необходимо немного модифицировать под себя внешний вид каких-то HTML элементов, вы можете воспользоваться специальными модификаторами классов (стандартный функционал Tailwind), наподобие prose-ol:, prose-li:, prose-h1:, prose-h2: и т.д. Я думаю логика именования подобных модификаторов вполне очевидна:
<article class="prose prose-a:text-gray-600 hover:prose-a:text-gray-500 prose-ul:list-none prose-ul:p-0 prose-li:p-0">
...
</article>Весь список классов и модификаторов вы можете увидеть в неплохой документации из репозитория проекта. А если вам не хватит предопределенных возможностей, то тогда уже с помощью JavaScript вы можете задать нужные такие настройки, что также хорошо описано в документации.
Заключение
Данный плагин не только помогает облегчить разработку, но и делает более согласованным взаимодействие веб-дизайнеров с верстальщиками и веб-разработчиками. Дизайнеры при создании макетов, могут не выдумывать с нуля типографику, а сразу опираться на возможности этой библиотеки. Да и разработчики скажут дизайнерам спасибо как минимум за то, что не надо будет изобретать велосипед и заново писать кучу скучных CSS-классов для отображения контента.
Лично мне этот плагин с момента знакомства с ним и по сей день, существенно облегчил рутинную работу и поэтому я рекомендую ознакомиться с этим плагином всем, кто разрабатывает сайты с использованием Tailwind.