Плагин typography для длинных текстов
Описание товара, статья в блоге или условия доставки часто приходят из CMS или Markdown готовым HTML. Расставить классы каждому <h2> и <p> в таком тексте нельзя. Официальный плагин @tailwindcss/typography решает это одним классом prose: он оформляет всё содержимое блока.
Зачем он нужен
Вот что происходит с таким текстом без плагина:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<article>
<h2>Как выбрать наушники</h2>
<p>Сначала решите, где вы будете их носить.</p>
<ul>
<li>Для дороги — с шумоподавлением.</li>
<li>Для спорта — с защитой от влаги.</li>
</ul>
</article>Preflight убрал размер заголовка, отступы и маркеры списка — текст слился в одну массу. Браузерный скрипт не подключает плагины из npm, поэтому дальше код показан для проекта.
Установка
Установите плагин и подключите его директивой @plugin в src/style.css:
npm install -D @tailwindcss/typography@import "tailwindcss";
@plugin "@tailwindcss/typography";Класс prose
Поставьте prose на обёртку текста. В шаблоне страницы товара, например index.html или шаблоне бэкенда, это выглядит так:
<article class="prose">
<h2>Как выбрать наушники</h2>
<p>Сначала решите, где вы будете их носить.</p>
<ul>
<li>Для дороги — с шумоподавлением.</li>
<li>Для спорта — с защитой от влаги.</li>
</ul>
</article>В проекте с плагином заголовок становится крупным, у абзацев появляются отступы, у списка — маркеры. В предпросмотре под кодом Tailwind не подключён, поэтому там видны стандартные стили браузера, а не оформление плагина. Ширина блока ограничена примерно 65 знаками в строке — так длинный текст удобнее читать.
Модификаторы
| Класс | Что делает |
|---|---|
prose-sm, prose-lg, prose-xl | Меняет общий размер текста |
prose-gray, prose-slate, prose-zinc | Выбирает серую гамму |
dark:prose-invert | Светлый текст для тёмной темы |
max-w-none | Снимает ограничение ширины |
prose-a:text-indigo-600 | Оформляет все ссылки внутри |
not-prose | Отключает оформление для вложенного блока |
Варианты элементов вроде prose-a:, prose-headings:, prose-img: позволяют поправить отдельные теги, не трогая HTML из CMS: prose prose-lg prose-headings:font-semibold.
Частая ошибка
Ставить prose на всю страницу или на макет с карточками. Плагин оформит и ваши кнопки, и ссылки, и списки в меню как части статьи — появятся лишние отступы и подчёркивания. prose ставят только на блок с текстом из CMS или Markdown, а если внутри статьи есть свой компонент, его оборачивают в not-prose.