Краткая справка

Класс
Свойства
decoration-autotext-decoration-thickness: auto;
decoration-from-fonttext-decoration-thickness: from-font;
decoration-0text-decoration-thickness: 0px;
decoration-1text-decoration-thickness: 1px;
decoration-2text-decoration-thickness: 2px;
decoration-4text-decoration-thickness: 4px;
decoration-8text-decoration-thickness: 8px;

Основы использования

Настройка толщины оформления текста

Используйте утилиты decoration-{width}, чтобы изменить толщину текстового оформления элемента.

decoration-1

Быстрая коричневая лиса прыгает через ленивую собаку.

decoration-2

Быстрая коричневая лиса прыгает через ленивую собаку.

decoration-4

Быстрая коричневая лиса прыгает через ленивую собаку.

<p class="underline decoration-1 ...">Быстрая коричневая лиса...</p>
<p class="underline decoration-2 ...">Быстрая коричневая лиса...</p>
<p class="underline decoration-4 ...">Быстрая коричневая лиса...</p>

Применяя условно

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:decoration-4 to only apply the decoration-4 utility on hover.

<p class="underline hover:decoration-4">
  <!-- ... -->
</p>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:decoration-4 to apply the decoration-4 utility at only medium screen sizes and above.

<p class="underline md:decoration-4">
  <!-- ... -->
</p>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.


Использование пользовательских значений

Настройка вашей темы

Вы можете настроить утилиты decoration-{width}, отредактировав theme.textDecorationThickness или theme.extend.textDecorationThickness в вашем файле tailwind.config.js.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      textDecorationThickness: {
        3: '3px',
      }
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

Произвольные значения

If you need to use a one-off text-decoration-thickness value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<p class="decoration-[3px]">
  <!-- ... -->
</p>

Learn more about arbitrary value support in the arbitrary values documentation.