[v4] Tailwind CSS misinterprets custom text-shadow plugin as text size

[DarthGigi]

What version of Tailwind CSS are you using?

v4.0.12

What build tool (or framework if it abstracts the build tool) are you using?

SvelteKit 2.18.0

What version of Node.js are you using?

v22.14.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/DarthGigi/tailwind-v4-text-shadow-mvce

Describe your issue

Using a custom plugin to add text shadows causes tailwindcss to override the text size property, thinking text-shadow is a text size utility while it's not.

This worked fine in v4.0.5 last time I checked, I'm not sure which release introduced this behavior.

Plugin code

import plugin from "tailwindcss/plugin";

const textShadowPlugin = plugin(function ({ matchUtilities, theme }) {
  matchUtilities(
    {
      "text-shadow": (value) => ({
        textShadow: value
      })
    },
    { values: theme("textShadow") }
  );
});

export default textShadowPlugin;

app.css

@import 'tailwindcss';
@plugin "./plugins/text-shadow.ts";

@theme {
	/* Text Shadow */
	--text-shadow-sm: 0 0px 2px var(--tw-shadow-color);
	--text-shadow: 0 0px 4px var(--tw-shadow-color);
	--text-shadow-lg: 0 0px 8px var(--tw-shadow-color);
	--tw-shadow-color: --alpha(oklch(0 0 0) / 50%);
}

[blaxtonj]

I had a similar issue so I just put it in @layer utilities which worked for me

@layer utilities {
  .text-shadow-none {
    text-shadow: 0 0px 0px var(--tw-shadow-color)
  }
  .text-shadow-sm {
    text-shadow: 0 1px 2px var(--tw-shadow-color);
  }
  .text-shadow {
    text-shadow: 0 2px 4px var(--tw-shadow-color);
  }
  .text-shadow-lg {
    text-shadow: 0 8px 16px var(--tw-shadow-color);
  }
  .text-shadow-xl {
    text-shadow: 0 10px 20px var(--tw-shadow-color);
  }
}

[nwsnws123]

I had a similar issue so I just put it in @layer utilities which worked for me

Does it work with [var(--color)]? For me

@layer utilities {
  .text-shadow-name {
    text-shadow: 0 0 4px var(--tw-shadow-color);
  }
}

works with text-shadow-name shadow-black
and

@layer utilities {
  .text-shadow-name {
    text-shadow: 0 0 4px var(--tw-shadow);
  }
}

works with text-shadow-name shadow-shadow-[var(--color1)], but not other way around.

[blaxtonj]

looking through tailwind doc's it looks like it should be setup like this

   <p className="text-shadow-xl text-white shadow-(color:--color-primary)">
          Hello
        </p>

but if your color is already in your theme you can do something like this

@theme {

  --color-primary: #10537c;

  }

   <p className="text-shadow-xl text-white shadow-primary">
          Hello
        </p>

both seem to have the same effect

[davidwebca]

Omg I thought I was going crazy. When I inspect my code, it gets weird.

In Safari (18.4), I get an issue like that where lines don't match up and the inspector shows classes that aren't even applied to the current element. lg:mr-32 is there, but mt-8 and text-sm is on the parent element, but not on the selected one.

If I select the parent element, I get the same phenomenon as OP :

.lg\:text-lg {
width: calc(var(--spacing) * 30);
}

And in Chrome 134 on macos, nothing happens when I uncheck / check classes in the styles tab (there are no other classes or styles of lower specificity and no other classes showing for the element that could be conflicting - unchecking .mt-32 does nothing and no other class named like this is there. Tailwind is not applied twice and vite-plugin-inspect reveals nothing suspicious, the stylesheet seems to be generated proper. Is there a problem with dev sourcemapping?

Using Tailwind v4.0.14 and, in my case, without plugins. Unclear if it's my fault - because of my setup or not... 🤔 I'll try to create a reproduction later.

[fletch-r]

Has this issue been fixed? I'm still seeing text-shadow-lg be represented as font-size in "tailwindcss": "^4.1.2",.

[philipp-spiess]

@fletch-r This seems to work fine in the play example: https://play.tailwindcss.com/ueFWkopNXX

Have you made sure you also updated @tailwindcss/vite or @tailwindcss/postcss (depending on what you're using)

[fletch-r]

@philipp-spiess Looks like it was my @tailwindcss/postcss that was out of date. Thought it would auto-update/install everything related to tailwind by doing npm i tailwindcss. Thank you

[gn753]

🐛 Bug Report: Custom utility class with text- prefix gets purged when used with other text-* classes

I'm experiencing an issue in Tailwind CSS v4.1.x where a custom utility class like text-small-semibold (defined in @layer utilities) is purged from the output CSS when used alongside other built-in text-* utilities such as text-white.

---

🧪 Reproduction Example

<!-- This is purged: only `text-white` and `bg-[#ff3b30]` are rendered -->
<span class="text-small-semibold text-white bg-[#ff3b30]">Text</span>

<!-- This renders correctly -->
<span class="text-small-semibold">Text</span>