Введение:
Сегодня мы рассмотрим компонент Tailwind, о котором знает только Проза! 😂 Извините, что пришлось убрать эту шутку с дороги!
Если вы, как и я, пользуетесь Tailwind CSS уже давно, даже очень давно, вы, возможно, до сих пор не сталкивались с этой удивительной функцией инструмента! Я говорю о компоненте «Типографика» и, более конкретно, о наборе элементов класса «Проза». Эта коллекция стилей была создана для больших наборов HTML, которые вы, возможно, не можете контролировать. Возможно, вы создали блог своего сайта, используя необработанный текст в формате markdown, или вы извлекаете большое количество текстового контента из CMS.
В любом случае, классы Прозы здесь, чтобы помочь! 👌
Образец проекта:
Естественно, нам понадобится пример, поэтому давайте создадим проект на основе Tailwind.
Мы будем использовать инструмент Tailwind CSS Play. Это позволит нам быстро начать работу и убедиться, что ваше окружение идентично моему.
Мы заменим код по умолчанию фрагментом, приведенным ниже. Это неформатированный HTML из моей последней записи в блоге:
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<article class="">
<h1>5 Web Dev Platforms, Tools & Frameworks To Learn In 2022 🔥</h2>
<img src="https://blog.layer6training.com/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Funsplash%2FSyYmXSDnJ54%2Fupload%2Fv1659720841329%2Fss-CHaLc9d.jpeg%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=3840&q=75" alt="">
<h2>1. React/NextJS </h2>
<p>Like it or lump it, Javascript frameworks have continued to take over in all aspects of web development from Web3 to traditional web apps. React and frameworks based on it have exploded in 2022 taking over from some of the other major players in the field.</p>
<p>As the tide of React rises, so do the others that are based on its component framework. This includes NextJS, a 2016 open source React-component-based framework that was created by the team at Vercel. Since its creation in 2016 the team has added a bunch of cutting-edge features geared towards edge hosting platforms like its own. In addition to NextJS's cloud edge focus, many consider the framework as a backend framework due to its many server-side features.</p>
<img src="https://nextjs.org/_next/image?url=%2Fstatic%2Fblog%2Flayouts-rfc%2Fpage.png&w=3840&q=75" alt="">
<p>NextJS is the framework I personally have chosen for all my projects. You can read more about it here: NextJS</p>
</article>
</div>
Это должно выглядеть вот так:
Не очень хорошо, верно? Что не удивительно. Конечно, мы могли бы просто добавить стили, как обычно, к каждому элементу HTML. Но, допустим, у вас есть большое количество текста, либо из CMS, либо просто много статического текстового контента на вашем сайте. Ручное добавление стилей может занять много времени. Это, как правило, одна из самых больших жалоб на Tailwind CSS со стороны пользователей CSS. Не волнуйтесь, компонент Typography уже на подходе!
Итак, давайте реализуем это.
Нам понадобится добавить один небольшой фрагмент кода в наш файл конфигурации Tailwind. Это будет третья вкладка сверху в нашей сессии кода под названием «Config».
💡 ПРИМЕЧАНИЕ* поскольку мы используем TailwindCSS Play, нам не нужно устанавливать плагин Typography, но в обычном проекте вам нужно будет установить плагин с помощью npm install -D @tailwindcss/typography в дополнение к добавлению приведенного ниже фрагмента кода config
Добавьте приведенную ниже строку require на вкладку config в TailwindCSS Play:
module.exports = {
theme: {
extend: {
// ...
},
},
plugins: [
require('@tailwindcss/typography'),
],
}
Теперь мы готовы к работе!
Вверху в теге Article у нас есть пустой элемент class. Внутри открытых кавычек поместите класс prose.
<article class="prose">
и с добавлением этого единственного атрибута class вы можете увидеть, что мы превратились из безвкусного в вау! 🤩.
Я знаю, что я очень преувеличиваю простые стили текста, и что нам предстоит еще многое сделать, но эта одношаговая функция может стать для некоторых решающим фактором.
Что происходит за кулисами?
Если вам интересно, что здесь происходит, то создатели Tailwind CSS очень постарались, чтобы создать этот прозаический стиль, который учитывает наиболее оптимальный контекст стилизации для этих типов текстовых тегов. Практически это дает вам возможность одним щелчком мыши создать стиль блога.
Мы можем сделать еще один шаг вперед, и вот здесь-то и проявляется настоящая сила!
Допустим, нам нравится, как это выглядит, но мы хотели бы по-другому оформить наши изображения. Опять же, вместо того, чтобы просматривать наш файл и добавлять стиль ко всему, что имеет тег «img», или создавать собственный многоразовый CSS-класс, мы можем просто использовать синтаксис прозаического класса, чтобы стилизовать все теги «img» одинаково.
Например:
Допустим, мы хотим получить небольшой эффект округления, мы добавим следующий класс:
prose-img:rounded-lg
Теперь наше изображение и все остальные, использующие тег «img», унаследуют этот стиль:
Мы также можем использовать этот метод для других HTML-тегов, например, для заголовка H1. Я думаю, что для этой статьи в блоге я бы хотел, чтобы он был выровнен по центру.
prose-h1:text-center
Но допустим, мы хотим оформить все наши заголовки в фирменных цветах. Вместо того чтобы добавлять класс для h1, h2, h3 и т.д., мы можем использовать общий атрибут класса под названием headings. Это позволит применить цвет ко всем типам заголовков:
prose-headings:text-indigo-600
Давайте проверим, где мы находимся:
<article class="prose prose-img:rounded-lg prose-h1:text-center prose-headings:text-indigo-600 p-6">
и теперь вы видите, что с помощью 6-7 классов Tailwind CSS и одной строки кода мы можем стилизовать неограниченное количество текста/контента.
Теперь рассмотрим обратную ситуацию. Вы можете столкнуться с ситуацией, когда по каким-либо причинам вы не хотите наследовать стиль «прозы». Это также легко решается.
Просто используйте класс «not-prose» и добавьте к этому элементу свой стиль, как обычно!
class="not-prose"
Вот и все! 👌 Конечно, под капотом этого плагина есть еще много чего интересного, и я рекомендую вам ознакомиться с официальными документами Tailwind CSS Docs.
Если вам понравилось или вы узнали что-то новое из этого поста, пожалуйста, поставьте лайк и следите за мной, чтобы узнать больше! 🙏