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

Класс
Предпросмотр 
text-inherit
Aa
text-current
Aa
text-transparent
Aa
text-black
Aa
text-white
Aa
text-slate-50
Aa
text-slate-100
Aa
text-slate-200
Aa
text-slate-300
Aa
text-slate-400
Aa
text-slate-500
Aa
text-slate-600
Aa
text-slate-700
Aa
text-slate-800
Aa
text-slate-900
Aa
text-gray-50
Aa
text-gray-100
Aa
text-gray-200
Aa
text-gray-300
Aa
text-gray-400
Aa
text-gray-500
Aa
text-gray-600
Aa
text-gray-700
Aa
text-gray-800
Aa
text-gray-900
Aa
text-zinc-50
Aa
text-zinc-100
Aa
text-zinc-200
Aa
text-zinc-300
Aa
text-zinc-400
Aa
text-zinc-500
Aa
text-zinc-600
Aa
text-zinc-700
Aa
text-zinc-800
Aa
text-zinc-900
Aa
text-neutral-50
Aa
text-neutral-100
Aa
text-neutral-200
Aa
text-neutral-300
Aa
text-neutral-400
Aa
text-neutral-500
Aa
text-neutral-600
Aa
text-neutral-700
Aa
text-neutral-800
Aa
text-neutral-900
Aa
text-stone-50
Aa
text-stone-100
Aa
text-stone-200
Aa
text-stone-300
Aa
text-stone-400
Aa
text-stone-500
Aa
text-stone-600
Aa
text-stone-700
Aa
text-stone-800
Aa
text-stone-900
Aa
text-red-50
Aa
text-red-100
Aa
text-red-200
Aa
text-red-300
Aa
text-red-400
Aa
text-red-500
Aa
text-red-600
Aa
text-red-700
Aa
text-red-800
Aa
text-red-900
Aa
text-orange-50
Aa
text-orange-100
Aa
text-orange-200
Aa
text-orange-300
Aa
text-orange-400
Aa
text-orange-500
Aa
text-orange-600
Aa
text-orange-700
Aa
text-orange-800
Aa
text-orange-900
Aa
text-amber-50
Aa
text-amber-100
Aa
text-amber-200
Aa
text-amber-300
Aa
text-amber-400
Aa
text-amber-500
Aa
text-amber-600
Aa
text-amber-700
Aa
text-amber-800
Aa
text-amber-900
Aa
text-yellow-50
Aa
text-yellow-100
Aa
text-yellow-200
Aa
text-yellow-300
Aa
text-yellow-400
Aa
text-yellow-500
Aa
text-yellow-600
Aa
text-yellow-700
Aa
text-yellow-800
Aa
text-yellow-900
Aa
text-lime-50
Aa
text-lime-100
Aa
text-lime-200
Aa
text-lime-300
Aa
text-lime-400
Aa
text-lime-500
Aa
text-lime-600
Aa
text-lime-700
Aa
text-lime-800
Aa
text-lime-900
Aa
text-green-50
Aa
text-green-100
Aa
text-green-200
Aa
text-green-300
Aa
text-green-400
Aa
text-green-500
Aa
text-green-600
Aa
text-green-700
Aa
text-green-800
Aa
text-green-900
Aa
text-emerald-50
Aa
text-emerald-100
Aa
text-emerald-200
Aa
text-emerald-300
Aa
text-emerald-400
Aa
text-emerald-500
Aa
text-emerald-600
Aa
text-emerald-700
Aa
text-emerald-800
Aa
text-emerald-900
Aa
text-teal-50
Aa
text-teal-100
Aa
text-teal-200
Aa
text-teal-300
Aa
text-teal-400
Aa
text-teal-500
Aa
text-teal-600
Aa
text-teal-700
Aa
text-teal-800
Aa
text-teal-900
Aa
text-cyan-50
Aa
text-cyan-100
Aa
text-cyan-200
Aa
text-cyan-300
Aa
text-cyan-400
Aa
text-cyan-500
Aa
text-cyan-600
Aa
text-cyan-700
Aa
text-cyan-800
Aa
text-cyan-900
Aa
text-sky-50
Aa
text-sky-100
Aa
text-sky-200
Aa
text-sky-300
Aa
text-sky-400
Aa
text-sky-500
Aa
text-sky-600
Aa
text-sky-700
Aa
text-sky-800
Aa
text-sky-900
Aa
text-blue-50
Aa
text-blue-100
Aa
text-blue-200
Aa
text-blue-300
Aa
text-blue-400
Aa
text-blue-500
Aa
text-blue-600
Aa
text-blue-700
Aa
text-blue-800
Aa
text-blue-900
Aa
text-indigo-50
Aa
text-indigo-100
Aa
text-indigo-200
Aa
text-indigo-300
Aa
text-indigo-400
Aa
text-indigo-500
Aa
text-indigo-600
Aa
text-indigo-700
Aa
text-indigo-800
Aa
text-indigo-900
Aa
text-violet-50
Aa
text-violet-100
Aa
text-violet-200
Aa
text-violet-300
Aa
text-violet-400
Aa
text-violet-500
Aa
text-violet-600
Aa
text-violet-700
Aa
text-violet-800
Aa
text-violet-900
Aa
text-purple-50
Aa
text-purple-100
Aa
text-purple-200
Aa
text-purple-300
Aa
text-purple-400
Aa
text-purple-500
Aa
text-purple-600
Aa
text-purple-700
Aa
text-purple-800
Aa
text-purple-900
Aa
text-fuchsia-50
Aa
text-fuchsia-100
Aa
text-fuchsia-200
Aa
text-fuchsia-300
Aa
text-fuchsia-400
Aa
text-fuchsia-500
Aa
text-fuchsia-600
Aa
text-fuchsia-700
Aa
text-fuchsia-800
Aa
text-fuchsia-900
Aa
text-pink-50
Aa
text-pink-100
Aa
text-pink-200
Aa
text-pink-300
Aa
text-pink-400
Aa
text-pink-500
Aa
text-pink-600
Aa
text-pink-700
Aa
text-pink-800
Aa
text-pink-900
Aa
text-rose-50
Aa
text-rose-100
Aa
text-rose-200
Aa
text-rose-300
Aa
text-rose-400
Aa
text-rose-500
Aa
text-rose-600
Aa
text-rose-700
Aa
text-rose-800
Aa
text-rose-900
Aa

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

Установка цвета текста

Управляйте цветом текста элемента с помощью утилит text-{color}.

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

<p class="text-blue-600">Быстрая коричневая лиса...</p>

Изменение непрозрачности

Управляйте непрозрачностью цвета текста элемента с помощью модификатора непрозрачности цвета.

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

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

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

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

<p class="text-blue-600/100">Быстрая коричневая лиса...</p>
<p class="text-blue-600/75">Быстрая коричневая лиса...</p>
<p class="text-blue-600/50">Быстрая коричневая лиса...</p>
<p class="text-blue-600/25">Быстрая коричневая лиса...</p>
<p class="text-blue-600/0">Быстрая коричневая лиса...</p>

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

<p class="text-blue-600/[.06]">Быстрая коричневая лиса...</p>

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

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

Попробуйте навести курсор мыши на текст, чтобы увидеть ожидаемое поведение

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

<p class="text-slate-500 hover:text-blue-600">Быстрая коричневая лиса...</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:text-green-600 to apply the text-green-600 utility at only medium screen sizes and above.

<p class="text-blue-600 md:text-green-600">
  <!-- ... -->
</p>

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


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

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

By default, Tailwind makes the entire default color palette available as text colors. You can customize your color palette by editing theme.colors or theme.extend.colors in your tailwind.config.js file.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

Alternatively, you can customize just your text colors by editing theme.textColor or theme.extend.textColor in your tailwind.config.js file.

Learn more about customizing the default theme in the theme customization documentation.

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

If you need to use a one-off color 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="text-[#50d71e]">
  <!-- ... -->
</p>

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