Text Color
Utilities for controlling the text color of an element.
Default class reference
Usage
Control the text color of an element using the text- utilities.
The quick brown fox jumped over the lazy dog.
Changing opacity
Control the opacity of an element’s text color using the text-opacity- utilities.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
p class="text-purple-700 text-opacity-100 . ">The quick brown fox . p> p class="text-purple-700 text-opacity-75 . ">The quick brown fox . p> p class="text-purple-700 text-opacity-50 . ">The quick brown fox . p> p class="text-purple-700 text-opacity-25 . ">The quick brown fox . p> p class="text-purple-700 text-opacity-0 . ">The quick brown fox . p>Responsive
To control the text color of an element at a specific breakpoint, add a : prefix to any existing text color utility. 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 . "> The quick brown fox. p>For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
Hover
To control the text color of an element on hover, add the hover: prefix to any existing text color utility. For example, use hover:text-blue-600 to apply the text-blue-600 utility on hover.
button class="text-white hover:text-red-500 . "> Hover me button>Hover utilities can also be combined with responsive utilities by adding the responsive : prefix before the hover: prefix.
button class=". md:text-blue-500 md:hover:text-blue-600 . ">Buttonbutton>Focus
To control the text color of an element on focus, add the focus: prefix to any existing text color utility. For example, use focus:text-blue-600 to apply the text-blue-600 utility on focus.
input class="text-green-900 focus:text-red-600 . ">Focus utilities can also be combined with responsive utilities by adding the responsive : prefix before the focus: prefix.
input class=". md:text-gray-900 md:focus:text-red-600 . ">Customizing
Text Colors
By default Tailwind makes the entire default color palette available as text colors.
You can customize your color palette by editing theme.colors in your tailwind.config.js file, or customize just your text colors in the theme.textColor section.
// tailwind.config.js module.exports = theme: - textColor: theme => theme('colors'), + textColor: + 'primary': '#3490dc', + 'secondary': '#ffed4a', + 'danger': '#e3342f', + > > >Variants
By default, only responsive, dark mode (if enabled), group-hover, focus-within, hover and focus variants are generated for text color utilities.
You can control which variants are generated for the text color utilities by modifying the textColor property in the variants section of your tailwind.config.js file.
For example, this config will also generate active variants:
// tailwind.config.js module.exports = variants: extend: // . + textColor: [' active '], > > >Disabling
If you don’t plan to use the text color utilities in your project, you can disable them entirely by setting the textColor property to false in the corePlugins section of your config file:
// tailwind.config.js module.exports = corePlugins: // . + textColor: false, > >Text Color
Utilities for controlling the text color of an element.
Class reference
Usage
Control the text color of an element using the .text- utilities.
Changing opacity v1.4.0+
Control the opacity of an element’s text color using the .text-opacity- utilities.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
p class="text-purple-700 text-opacity-100">The quick brown fox . p> p class="text-purple-700 text-opacity-75">The quick brown fox . p> p class="text-purple-700 text-opacity-50">The quick brown fox . p> p class="text-purple-700 text-opacity-25">The quick brown fox . p> p class="text-purple-700 text-opacity-0">The quick brown fox . p>Responsive
To control the text color of an element at a specific breakpoint, add a : prefix to any existing text color utility. For example, use md:text-green-600 to apply the text-green-600 utility at only medium screen sizes and above.
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
text-blue-600 sm:text-green-600 md:text-indigo-600 lg:text-red-600 xl:text-gray-900 . "> The quick brown fox. Hover
To control the text color of an element on hover, add the hover: prefix to any existing text color utility. For example, use hover:text-blue-600 to apply the text-blue-600 utility on hover.
button class="text-blue-600 hover:text-red-600 . "> Button button>Hover utilities can also be combined with responsive utilities by adding the responsive : prefix before the hover: prefix.
button class=". md:text-blue-500 md:hover:text-blue-600 . ">Buttonbutton>Focus
To control the text color of an element on focus, add the focus: prefix to any existing text color utility. For example, use focus:text-blue-600 to apply the text-blue-600 utility on focus.
input class="text-gray-900 focus:text-red-600 . ">Focus utilities can also be combined with responsive utilities by adding the responsive : prefix before the focus: prefix.
input class=". md:text-gray-900 md:focus:text-red-600 . ">Customizing
Text Colors
By default Tailwind makes the entire default color palette available as text colors.
You can customize your color palette by editing theme.colors in your tailwind.config.js file, or customize just your text colors in the theme.textColor section.
// tailwind.config.js module.exports = theme: - textColor: theme => theme('colors'), + textColor: < + 'primary': '#3490dc', + 'secondary': '#ffed4a', + 'danger': '#e3342f', + > > >Responsive and pseudo-class variants
By default, only responsive, hover and focus variants are generated for text color utilities.
You can control which variants are generated for the text color utilities by modifying the textColor property in the variants section of your tailwind.config.js file.
For example, this config will also generate active and group-hover variants:
// tailwind.config.js module.exports = < variants : < // . - textColor : ['responsive', 'hover', 'focus'] , + textColor : ['responsive', 'hover', 'focus', 'active', 'group-hover'] , > >Disabling
If you don’t plan to use the text color utilities in your project, you can disable them entirely by setting the textColor property to false in the corePlugins section of your config file:
// tailwind.config.js module.exports = < corePlugins : < // . + textColor : false , > >On this page
Цвет текста
Управляйте цветом текста элемента с помощью утилит text- .
Быстрая коричневая лиса прыгает через ленивую собаку.
p class="text-blue-600">Быстрая коричневая лиса. p>p class="text-sky-400">Быстрая коричневая лиса. 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-sky-400/100">Быстрая коричневая лиса. p> p class="text-sky-400/75">Быстрая коричневая лиса. p> p class="text-sky-400/50">Быстрая коричневая лиса. p> p class="text-sky-400/25">Быстрая коричневая лиса. p> p class="text-sky-400/0">Быстрая коричневая лиса. p>
Вы можете использовать любое значение, определенное в вашей шкале непрозрачности, или использовать произвольные значения, если вам нужно отклониться от маркеров вашего дизайна.
p class="text-blue-600/[.06]">Быстрая коричневая лиса. p>Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : text-blue-600 , чтобы применять утилиту text-blue-600 только при hover .
Попробуйте навести курсор мыши на текст, чтобы увидеть ожидаемое поведение
Быстрая коричневая лиса прыгает через ленивую собаку.
p class="text-slate-500 hover:text-blue-600">Быстрая коричневая лиса. p>p class="text-slate-400 hover:text-sky-400">Быстрая коричневая лиса. p>
Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.
Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: text-green-600 , чтобы применить утилиту text-green-600 только на экранах среднего размера и выше.
p class="text-blue-600 md:text-green-600"> p> По умолчанию Tailwind делает всю цветовую палитру по умолчанию доступной в виде цветов text . Вы можете настроить свою цветовую палитру, отредактировав theme.colors или theme.extend.colors в файле tailwind.config.js .
module.exports = theme: extend: colors: 'regal-blue': '#243c5a', >, > > > Кроме того, вы можете настроить только цвета text , отредактировав theme. textColor или theme.extend. textColor в своем файле tailwind.config.js .
Узнайте больше о настройке темы по умолчанию в документации по кастомизации темы.
Если вам нужно использовать одноразовое color value , которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.
Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.
Copyright © 2023 Tailwind Labs Inc.
Text Color
Utilities for controlling the text color of an element.
Control the text color of an element using the text- utilities.
The quick brown fox jumps over the lazy dog.
p class="text-blue-600">The quick brown fox. p>p class="text-sky-400">The quick brown fox. p>
Control the opacity of an element’s text color using the color opacity modifier.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
p class="text-blue-600/100">The quick brown fox. p> p class="text-blue-600/75">The quick brown fox. p> p class="text-blue-600/50">The quick brown fox. p> p class="text-blue-600/25">The quick brown fox. p> p class="text-blue-600/0">The quick brown fox. p>p class="text-sky-400/100">The quick brown fox. p> p class="text-sky-400/75">The quick brown fox. p> p class="text-sky-400/50">The quick brown fox. p> p class="text-sky-400/25">The quick brown fox. p> p class="text-sky-400/0">The quick brown fox. p>
You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.
p class="text-blue-600/[.06]">The quick brown fox. 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 .
Try hovering over the text to see the expected behaviour
The quick brown fox jumps over the lazy dog.
p class="text-slate-500 hover:text-blue-600">The quick brown fox. p>p class="text-slate-400 hover:text-sky-400">The quick brown fox. 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.
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.
Learn more about arbitrary value support in the arbitrary values documentation.
Copyright © 2023 Tailwind Labs Inc.