Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add text-shadow-* utilities #17389

Merged
merged 6 commits into from
Mar 28, 2025
Merged

Add text-shadow-* utilities #17389

merged 6 commits into from
Mar 28, 2025

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
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
5 participants