Placeholder Color

    v1.1.0+

    Utilities for controlling the color of placeholder text.

    Control the placeholder color of an element using the utilities.

    Control the opacity of an element’s placeholder color using the .placeholder-opacity-{amount} utilities.

    Placeholder Color - 图2

    1. <input class="placeholder-gray-500 placeholder-opacity-100 ..." placeholder="jane@example.com">
    2. <input class="placeholder-gray-500 placeholder-opacity-50 ..." placeholder="jane@example.com">
    3. <input class="placeholder-gray-500 placeholder-opacity-25 ..." placeholder="jane@example.com">
    4. <input class="placeholder-gray-500 placeholder-opacity-0 ..." placeholder="jane@example.com">

    Learn more in the placeholder opacity documentation.

    To control the text color of an element at a specific breakpoint, add a {screen}: 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 documentation.

    all

    sm

    Placeholder Color - 图5

    md

    lg

    Placeholder Color - 图7

    xl

    1. <input class="placeholder-gray-600 focus:placeholder-gray-500 ..." placeholder="jane@example.com">

    Focus utilities can also be combined with responsive utilities by adding the responsive prefix before the focus: prefix.

    By default Tailwind makes the entire default color palette available as placeholder colors.

    You can by editing theme.colors in your tailwind.config.js file, or customize just your placeholder colors in the theme.textColor section.

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     theme: {
    4. -     placeholderColor: theme => theme('colors'),
    5. +     placeholderColor: {
    6. +       'primary': '#3490dc',
    7. +       'danger': '#e3342f',
    8. +     }
    10.   }

    By default, only responsive and focus variants are generated for placeholder color utilities.

    You can control which variants are generated for the placeholder color utilities by modifying the placeholderColor property in the variants section of your tailwind.config.js file.

    For example, this config will also generate hover and active variants:

    If you don’t plan to use the placeholder color utilities in your project, you can disable them entirely by setting the placeholderColor property to false in the corePlugins section of your config file:

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     corePlugins: {
    4.       // ...
    5. +     placeholderColor: false,
    6.     }

    ← List Style Position