How to change input placeholder color?

All Mantine inputs can be divided into two groups:

Inputs that are based on the <input /> HTML element (for example, TextInput). For these inputs, use the &::placeholder selector to change placeholder color.
Inputs that are based on the <button /> HTML element (for example, DatePickerInput). For these inputs, use Styles API to change placeholder color.

import { TextInput } from '@mantine/core';
import { DatePickerInput } from '@mantine/dates';
import classes from './Demo.module.css';

function Demo() {
  return (
    <>
      <TextInput
        placeholder="Text input with red placeholder"
        classNames={{ input: classes.textInput }}
      />
      <DatePickerInput
        placeholder="Date input with blue placeholder"
        mt="md"
        classNames={{ placeholder: classes.datePickerInputPlaceholder }}
      />
    </>
  );
}