Skip to content

Conversation

@philipp-spiess
Copy link
Member

@philipp-spiess philipp-spiess commented Mar 26, 2025

This PR adds new text-shadow-* utilities and default values courtesy of @danhollick's.

Usage is similar to the normal shadow-* utilities, for example:

<h1 class="text-center text-7xl tracking-tight text-white text-shadow-xl">
  Some fancy <br />
  headline
</h1>

Since this PR also adds first-class support for the --text-shadow theme namespace, it also means it resolves #17047.

Test plan

@philipp-spiess philipp-spiess requested a review from a team as a code owner March 26, 2025 10:39
@danhollick
Copy link

danhollick commented Mar 26, 2025

@philipp-spiess I think you might have used an old play link, which is my bad. I updated the link in trello but not in discord. (New link)

I readjusted the scale so it goes from 2xs to lg to match the box-shadow one. Same values, just all shifted down one.
Screenshot 2025-03-26 at 12 07 54

@philipp-spiess
Copy link
Member Author

@danhollick Ah great spot, updated it and also ran your play through a Vite project to make sure it's creating the right CSS: https://tailwind-text-shadows-preview-2kdnjb32b.vercel.app/

@adamwathan
Copy link
Member

@philipp-spiess Can we add UI tests for this one to make sure the shadow colors work? Like the box-shadow utilities we have to not really use the variables here annoyingly for the colors to work, so if we ever forget that and try to refactor it to use variables it would be good to have tests that fail.

@thecrypticace thecrypticace merged commit 5e255de into main Mar 28, 2025
6 checks passed
@thecrypticace thecrypticace deleted the feat/text-shadows branch March 28, 2025 17:06
philipp-spiess pushed a commit to tailwindlabs/tailwindcss.com that referenced this pull request Apr 14, 2025
`shadow-<color>` is used for box-shadow, the right name is
`text-shadow-<color>` according to
tailwindlabs/tailwindcss#17389.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

6 participants