Типография
Утилиты для управления толщиной текстовых украшений.
| Class | Styles |
|---|---|
decoration-<number> | text-decoration-thickness: <number>px; |
decoration-from-font | text-decoration-thickness: from-font; |
decoration-auto | text-decoration-thickness: auto; |
decoration-(length:<custom-property>) | text-decoration-thickness: var(<custom-property>); |
decoration-[<value>] | text-decoration-thickness: <value>; |
Используйте утилиты decoration-<number> типа decoration-2 и decoration-4 для изменения толщины текстового украшения элемента:
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
<p class="underline decoration-1">Быстрая коричневая лиса...</p><p class="underline decoration-2">Быстрая коричневая лиса...</p><p class="underline decoration-4">Быстрая коричневая лиса...</p>Используйте синтаксис decoration-[<value>] , чтобы задать text decoration thickness на основе полностью пользовательского значения:
<p class="decoration-[0.25rem] ..."> Lorem ipsum dolor sit amet...</p>Для переменных CSS вы также можете использовать синтаксис: decoration-(length:<custom-property>)
<p class="decoration-(length:--my-decoration-thickness) ..."> Lorem ipsum dolor sit amet...</p>Это просто сокращение, decoration-[length:var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a text-decoration-thickness утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<p class="underline md:decoration-4 ..."> Lorem ipsum dolor sit amet...</p>Подробнее об использовании вариантов читайте в документации по вариантам.