Цвет заполнителя

Применение

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

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

Управляйте непрозрачностью цвета заполнителя элемента с помощью утилит placeholder-opacity-{amount}.

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

Адаптивность

Чтобы управлять цветом текста заполнителя ввода в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите цвета текста. Например, используйте md:placeholder-green-500, чтобы применить утилиту placeholder-green-500 только при средних размерах экрана и выше.

<input class="placeholder-gray-500 md:placeholder-green-500" placeholder="[email protected]">

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Фокус

Чтобы управлять цветом заполнителя элемента в фокусе, добавьте префикс focus: к любой существующей утилите цвета заполнителя. Например, используйте focus:placeholder-blue-600, чтобы применить утилиту placeholder-blue-600 к фокусу.

Утилиты Фокуса также можно комбинировать с адаптивными утилитами, добавляя префикс {screen}: отзывчивого перед префиксом focus:.

<input class="... md:placeholder-gray-900 md:focus:placeholder-red-600 ...">

Кастомизация

Цвета заполнителя

По умолчанию Tailwind делает всю цветовую палитру по умолчанию доступной в качестве цветов-заполнителей.

Вы можете настроить свою цветовую палитру, отредактировав theme.colors в Вашем файле tailwind.config.js, или настроив только цвета Вашего заполнителя в разделе theme.textColor.

  // tailwind.config.js
  module.exports = {
    theme: {
-     placeholderColor: theme => theme('colors'),
+     placeholderColor: {
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
+     }
    }
  }

Варианты

По умолчанию, только responsive, темный режим (если включен) и focus варианты создаются для утилит placeholder color.

Вы можете контролировать, какие варианты создаются для утилит placeholder color для изменения свойства placeholderColor в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и active:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       placeholderColor: ['hover', 'active'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения placeholder color, Вы можете полностью отключить их, установив для placeholderColor свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     placeholderColor: false,
    }
  }