Help Needed: Placeholder text color and size not applying in Tailwind CSS v4

[codeeon]

Description

I'm having trouble with placeholder styling in Tailwind CSS v4. Specifically, the placeholder text color and size classes are not being applied, while other placeholder styling properties work correctly. I'm wondering if this is a bug or if I'm missing something in my implementation.

What I'm trying to do

I have a custom Input component that wraps a base input component, and I'm trying to style the placeholder text using Tailwind's placeholder utilities.

import { Input as InputComponent } from '@ui/common/components/input'
import { cn } from '@ui/common/lib/utils'
import React from 'react'

export function Input(props: React.ComponentProps<'input'>) {
  const { className, ...rest } = props

  return (
    <InputComponent
      className={cn(
        'h-12 rounded-md border border-gray-200 p-3 text-sm',
        'placeholder:text-sm placeholder:text-gray-400', // These styles are not being applied
        'placeholder:italic placeholder:font-semibold', // These styles ARE being applied correctly
        className
      )}
      {...rest}
    />
  )
}

What's working and what's not

• ✅ Regular input styling works fine (height, border, padding, text size)
• ✅ placeholder:italic and placeholder:font-semibold are correctly applied
• ❌ placeholder:text-sm (font size) is not applied to the placeholder
• ❌ placeholder:text-gray-400 (text color) is not applied to the placeholder

This suggests that the placeholder modifier itself is working, but specifically the text size and color utilities are not being applied to placeholders.

What I've tried

• Using the alternative syntax: [&::placeholder]:text-gray-400
• Checking browser dev tools to see if the styles are being overridden
• Confirming that my Tailwind configuration is correct

Environment

• Tailwind CSS version: 4.0.13
• React version: 19.0.10
• Browser: Chrome

Questions

1. Is this a known issue with Tailwind CSS v4?
2. Is there a different syntax I should be using for placeholder text color and size in v4?
3. Are there any workarounds I can use until this is fixed?
4. Has anyone else encountered this issue and found a solution?

Any help or guidance would be greatly appreciated! If this turns out to be a bug, I'd be happy to create a formal bug report with any additional information needed.

[dongseokSon]

I faced similar problem.

const ButtonVariants = cva(
  `relative border active:scale-95 transition-all text-button bg-white px-4 py-3 flex items-center justify-center gap-2 rounded-2xl`,
  {
    variants: {
      variant: {
        default:
          'hover:bg-primary-50 active:bg-primary-300 border-black text-black active:text-white',
        primary: 'bg-primary active:bg-primary-500 text-white',
        black: 'bg-black text-white',
        white: 'bg-white text-black border-black',
        noLabel: 'gap-0 rounded-xl border-gray-200 p-2',
        blackDisabled: 'bg-black text-white pointer-events-none',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
);

Case like above, when 'default' variant is applied, the default class text-button is not applied. While text-black is a color attribute and text-button is a font attribute, once classes applied after the other styles, formal classes are not applied.

@theme in globals.css

@theme {
...
  --color-black: rgba(0, 0, 0, 1);
...

  --text-button: 1.0625rem;
  --text-button--line-height: 1.4;
  --text-button--font-weight: 600;
...

If I apply both classes (text-black, text-button) in the same layer, they work. I'm not sure the Tailwind 4.0 is malfunctioning, but this has never happened in tailwind 3. Maybe twmerge is not working properly.

[dongseokSon]

import { clsx, ClassValue } from 'clsx';
import { extendTailwindMerge } from 'tailwind-merge';

export const customTwMerge = extendTailwindMerge({
  override: {
    classGroups: {
      'font-size': [
        'text-title1',
        'text-title2',
        'text-title3',
        'text-subtitle1',
        'text-subtitle2',
        'text-subtitle3',
        'text-body1',
        'text-body2',
        'text-button',
        'text-button2',
        'text-caption1',
        'text-caption2',
      ],
    },
  },
});

export const cn = (...inputs: ClassValue[]) => customTwMerge(clsx(inputs));

If I modify cn like this, things work. Idk why

[Calinator444]

I ran into this issue as well. It seems to be exclusive to Google Chrome on my end, although I haven't tested this extensively with different browsers.

I found that making the placeholders important fixes the issue.
For example, this will change placeholder text color placeholder:text-red-900!.

[jerocosio]

Thank you, this fixed it for me!

[howdu]

This should be in issues - placeholder color does not change unless you use important.

The documentation does not work in Chrome/Arc.

[vaibhavshn]

I can replicate this too. Only for colors.

The VS Code intellisense shows the correct output.

But output class doesn't have any value

[vaibhavshn]

I have created a new issue from this: #18319