Скачать tailwindcss typography - tailwindcss typography Скачать исходный код

Официальный плагин Tailwind CSS Typography предоставляет набор prose классов, которые вы можете использовать для добавления красивых типографских значений по умолчанию к любому ванильному HTML, который вы не контролируете, например HTML, визуализируемому из Markdown или полученному из CMS.

 < article class =" prose lg:prose-xl " > {{ markdown }} </ article >

Чтобы увидеть, как это выглядит в действии, посмотрите нашу живую демонстрацию на Tailwind Play.

Установка

Установите плагин из npm:

npm install -D @tailwindcss/typography

Затем добавьте плагин в файл tailwind.config.js :

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    // ...
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

Основное использование

Теперь вы можете использовать классы prose для добавления разумных стилей типографики в любой стандартный HTML-код:

 < article class =" prose lg:prose-xl " >
  < h1 > Garlic bread with cheese: What the science tells us </ h1 >
  < p >
    For years parents have espoused the health benefits of eating garlic bread with cheese to their
    children, with the food earning such an iconic status in our culture that kids will often dress
    up as warm, cheesy loaf for Halloween.
  </ p >
  < p >
    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
    springing up around the country.
  </ p >
  <!-- ... -->
</ article >

Выбор шкалы серого

Этот плагин включает класс модификатора для каждой из пяти шкал серого, которые Tailwind включает по умолчанию, поэтому вы можете легко стилизовать свой контент в соответствии с оттенками серого, которые вы используете в своем проекте.

 < article class =" prose prose-slate " > {{ markdown }} </ article >

Вот классы, созданные с использованием стандартной сборки Tailwind CSS v2.0:

Сорт	Серая шкала
`prose-gray` (по умолчанию)	Серый
`prose-slate`	Шифер
`prose-zinc`	Цинк
`prose-neutral`	Нейтральный
`prose-stone`	Камень

Классы модификаторов предназначены для использования с шаблоном модификатора нескольких классов и должны использоваться вместе с базовым классом prose .

Примечание

Всегда включайте класс prose при добавлении модификатора шкалы серого.

 < article class =" prose prose-stone " > {{ markdown }} </ article >

Чтобы узнать о создании собственных цветовых тем, прочтите документацию по добавлению собственных цветовых тем.

Применение масштаба шрифта

Модификаторы размера позволяют настроить общий размер типографики для разных контекстов.

 < article class =" prose prose-xl " > {{ markdown }} </ article >

В комплект поставки входят пять различных размеров шрифтов:

Сорт	Размер основного шрифта
`prose-sm`	0,875рем (14 пикселей)
`prose-base` (по умолчанию)	1рем (16 пикселей)
`prose-lg`	1,125рем (18 пикселей)
`prose-xl`	1,25рем (20 пикселей)
`prose-2xl`	1,5 рем (24 пикселя)

Их можно использовать в сочетании с модификаторами точек останова Tailwind для изменения общего размера шрифта части контента при разных размерах области просмотра:

 < article class =" prose md:prose-lg lg:prose-xl " > {{ markdown }} </ article >

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

Модификаторы размера предназначены для использования с шаблоном модификатора нескольких классов и должны использоваться вместе с базовым классом prose .

Примечание

Всегда включайте класс prose при добавлении модификатора размера.

 < article class =" prose prose-lg " > {{ markdown }} </ article >

Чтобы узнать о настройке включенных масштабов шрифтов, прочтите документацию по настройке CSS.

Адаптация к темному режиму

Каждая цветовая тема по умолчанию включает в себя созданную вручную версию темного режима, которую можно активировать, добавив класс prose-invert :

 < article class =" prose dark:prose-invert " > {{ markdown }} </ article >

Модификаторы элементов

Используйте модификаторы элементов, чтобы настроить стиль отдельных элементов вашего контента непосредственно в HTML:

 < article class =" prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600 " >
  {{ markdown }}
</ article >

Это позволяет легко создавать такие вещи, как стиль ссылок в соответствии с вашим брендом, добавление радиуса границы к изображениям и многое другое.

Вот полный список доступных модификаторов элементов:

Модификатор	Цель
`prose-headings:{utility}`	`h1` , `h2` , `h3` , `h4` , `th`
`prose-lead:{utility}`	`[class~="lead"]`
`prose-h1:{utility}`	`h1`
`prose-h2:{utility}`	`h2`
`prose-h3:{utility}`	`h3`
`prose-h4:{utility}`	`h4`
`prose-p:{utility}`	`p`
`prose-a:{utility}`	`a`
`prose-blockquote:{utility}`	`blockquote`
`prose-figure:{utility}`	`figure`
`prose-figcaption:{utility}`	`figcaption`
`prose-strong:{utility}`	`strong`
`prose-em:{utility}`	`em`
`prose-kbd:{utility}`	`kbd`
`prose-code:{utility}`	`code`
`prose-pre:{utility}`	`pre`
`prose-ol:{utility}`	`ol`
`prose-ul:{utility}`	`ul`
`prose-li:{utility}`	`li`
`prose-table:{utility}`	`table`
`prose-thead:{utility}`	`thead`
`prose-tr:{utility}`	`tr`
`prose-th:{utility}`	`th`
`prose-td:{utility}`	`td`
`prose-img:{utility}`	`img`
`prose-video:{utility}`	`video`
`prose-hr:{utility}`	`hr`

При сочетании этих модификаторов с другими модификаторами, такими как hover , вы, скорее всего, захотите, чтобы другой модификатор был первым:

 < article class =" prose prose-a:text-blue-600 hover:prose-a:text-blue-500 " > {{ markdown }} </ article >

Чтобы узнать больше, прочтите документацию Tailwind CSS по упорядочению составных модификаторов.

Переопределение максимальной ширины

Каждый модификатор размера имеет запеченную max-width предназначенную для того, чтобы контент был максимально читабельным. Однако это не всегда то, что вам нужно, и иногда вам нужно, чтобы содержимое просто заполняло ширину контейнера.

В таких случаях все, что вам нужно сделать, это добавить max-w-none к вашему контенту, чтобы переопределить встроенную максимальную ширину:

 < div class =" grid grid-cols-4 " >
  < div class =" col-span-1 " >
    <!-- ... -->
  </ div >
  < div class =" col-span-3 " >
    < article class =" prose max-w-none " > {{ markdown }} </ article >
  </ div >
</ div >

Расширенные темы

Отмена стилей типографики

Если у вас есть блок разметки, встроенный в какой-то контент, который не должен наследовать стили prose , используйте класс not-prose для его изолирования:

 < article class =" prose " >
  < h1 > My Heading </ h1 >
  < p > ... </ p >

  < div class =" not-prose " >
    <!-- Some example or demo that needs to be prose-free -->
  </ div >

  < p > ... </ p >
  <!-- ... -->
</ article >

Обратите внимание, что в настоящее время вы не можете вкладывать новые экземпляры prose в блок not-prose .

Добавление пользовательских цветовых тем

Вы можете создать свою собственную цветовую тему, добавив новый ключ в раздел typography файла tailwind.config.js и указав свои цвета под ключом css :

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : ( { theme } ) => ( {
        pink : {
          css : {
            '--tw-prose-body' : theme ( 'colors.pink[800]' ) ,
            '--tw-prose-headings' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-lead' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-links' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-bold' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-counters' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-bullets' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-hr' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-quotes' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-quote-borders' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-captions' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-code' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-pre-code' : theme ( 'colors.pink[100]' ) ,
            '--tw-prose-pre-bg' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-th-borders' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-td-borders' : theme ( 'colors.pink[200]' ) ,
            '--tw-prose-invert-body' : theme ( 'colors.pink[200]' ) ,
            '--tw-prose-invert-headings' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-lead' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-invert-links' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-bold' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-counters' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-invert-bullets' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-invert-hr' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-invert-quotes' : theme ( 'colors.pink[100]' ) ,
            '--tw-prose-invert-quote-borders' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-invert-captions' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-invert-code' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-pre-code' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-invert-pre-bg' : 'rgb(0 0 0 / 50%)' ,
            '--tw-prose-invert-th-borders' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-invert-td-borders' : theme ( 'colors.pink[700]' ) ,
          } ,
        } ,
      } ) ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

Дополнительные примеры см. в наших внутренних определениях стилей.

Изменение имени класса по умолчанию

Если по какой-либо причине вам необходимо использовать имя класса, отличное от prose , вы можете сделать это, используя опцию className при регистрации плагина:

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    // ...
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ( {
      className : 'wysiwyg' ,
    } ) ,
  ]
  . . .
}

Теперь каждый экземпляр prose в именах классов по умолчанию будет заменен вашим собственным именем класса:

 < article class =" wysiwyg wysiwyg-slate lg:wysiwyg-xl " >
  < h1 > My Heading </ h1 >
  < p > ... </ p >

  < div class =" not-wysiwyg " >
    <!-- Some example or demo that needs to be prose-free -->
  </ div >

  < p > ... </ p >
  <!-- ... -->
</ article >

Настройка CSS

Если вы хотите настроить необработанный CSS, созданный этим плагином, добавьте свои переопределения под ключом typography в разделе theme вашего файла tailwind.config.js :

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : {
        DEFAULT : {
          css : {
            color : '#333' ,
            a : {
              color : '#3182ce' ,
              '&:hover' : {
                color : '#2c5282' ,
              } ,
            } ,
          } ,
        } ,
      } ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

Как и во всех настройках темы в Tailwind, вы также можете определить ключ typography как функцию, если вам нужен доступ к помощнику theme :

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : ( theme ) => ( {
        DEFAULT : {
          css : {
            color : theme ( 'colors.gray.800' ) ,

            // ...
          } ,
        } ,
      } ) ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

Настройки следует применять к определенному модификатору, например DEFAULT или xl , и добавлять их в свойство css . Настройки создаются с использованием того же синтаксиса CSS-in-JS, который используется для написания плагинов Tailwind.

См. стили по умолчанию для этого плагина для более подробных примеров настройки каждого модификатора.