Utility for text-shadow?

[HapLifeMan]

Hey, what about create an utility for text-shadow? :)

[pedroborges]

I also needed it on a project and added them based on shadow utility for now:

@responsive {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.10);
  }

  .text-shadow-md {
    text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
  }

  .text-shadow-lg {
    text-shadow: 0 15px 30px rgba(0,0,0,0.11), 0 5px 15px rgba(0,0,0,0.08);
  }

  .text-shadow-none {
    text-shadow: none;
  }
}

[adamwathan]

We're not opposed to adding this at some point, but going to skip it for now since it's so easy to add utilities yourself.

We may revisit this sooner once we've made it easy to opt in/out of different modules.

[kharysharpe]

@adamwathan is this still going to be considered?

[hacknug]

You can use @benface's plugin for this: https://github.com/benface/tailwindcss-typography

[justingolden21]

Just commenting in 2020 that this little utility is still welcome : )

[d4h0]

Hi @adamwathan. Yes, this is easy to add. But what are the disadvantages of adding a few more utility classes to Tailwind? Why should all Tailwind users, who need this, add it themselves?

I guess, the situation has changed in the meantime, and there wouldn't be any disadvantage today to add more utility classes.

[JonathanSchndr]

I thought this was the concept of tailwind, can you please explain again why exactly no text shadow is added? @adamwathan thanks!!

[pottz91]

we need text shadow but not with an extra module, which is still working fine.

[ghost]

Hi,
I'm a beginner of web-design and tailwind.
I'd like to add text-shadow and read #162 (comment) and https://tailwindcss.com/docs/functions-and-directives#responsive , but could not understand where to write the code.
The code (in index.css) does not work.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer components{
    @responsive {
        .text-shadow {
          text-shadow: 0 2px 4px rgba(0,0,0,0.10);
        }
      
        .text-shadow-md {
          text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
        }
      
        .text-shadow-lg {
          text-shadow: 0 15px 30px rgba(0,0,0,0.11), 0 5px 15px rgba(0,0,0,0.08);
        }
      
        .text-shadow-none {
          text-shadow: none;
        }
      }
}

Could anyone help me?

[kh09211]

Hi,
I'm a beginner of web-design and tailwind.
I'd like to add text-shadow and read #162 (comment) and https://tailwindcss.com/docs/functions-and-directives#responsive , but could not understand where to write the code.
The code (in index.css) does not work.
Could anyone help me?

I think you are using the wrong syntax for this, I looked at the current tailwind docs and founds this is how you make responsive utility classes. In your index.css try

@layer utilities {
    @variants responsive {
        .text-shadow {
          text-shadow: 2px 2px 4px black;
        }
        .text-shadow-md {
          text-shadow: 4px 4px 8px black;
        }
        .text-shadow-lg {
          text-shadow: 15px 15px 30px black;
        }
        .text-shadow-none {
          text-shadow: none;
        }
    } 
}

[adamwathan]

We have decided not to add this feature to Tailwind due to potential bloat issues.

We will consider adding this in the rewrite in Q2 2023.

Stupid sarcastic shit like this is not welcome here.

[justingolden21]

Yeah I agree. I saw this in my email and thought it was legitimate, not knowing anybody's name in this thread. (In addition to also bring somewhat rude and not contributing to the conversation)

[lpeterke]

+1

I just finished designing a new site with Tailwind. I was able to do this with zero custom CSS. Well, almost. I had to add two classes for having a text-shadow.

Use case: having text as an overlay on an image (Article Banner). If I go for a white text but the editor happens to upload an article image with a lot of white in it then it gets very hard to read the text.

Yes, it is very easy to implement a solution myself, but I still wanted to give my +1 in here. I think having text overlays on images is not an uncommon use case and I think it would be cool to have a solution on this in Tailwind.

[sajjadalis]

+1

[kuntau]

I was wondering too why there's no text-shadow directive since tailwind have include some less common directive?

Can we reopen this issue please? +1

[chhuang]

Please can you explain to us the reason why text-shadow is not included by default?

Thanks!

[adamwathan]

Hasn't been added because we haven't prioritized working on it. I think it would be a good thing to add but it's a ton of work doing all of the research to figure out what values should be included by default and designing great default text shadows. The box shadows in v1 took two of us working on it for about 100 hours, doing all sorts of experiments with real objects and light sources and studying dozens of existing well designed sites and design systems.

So would still like to add it, but it's not an hour long job or anything, at least not to do things to our standards.

[chhuang]

Got it. Me (and probably a few of us here) thought it would be a copy-pasta of box-shadow but in reality it's way more complicated than that.

Thank you for the great work!

[justingolden21]

Oh wow, I didn't realize it was that complex either. Thank you for taking the time to explain this. I think your time is better spent improving Tailwind in other ways 😄 Thanks for all the work you do

[realmichaelye]

Thanks for the great work! I still would like to see text-shadow on tailwind tho, it's such a common utility that I think even if it took a long time it'd be worth it

[brteller]

I understand that this isn't a priority, but it is a standard CSS element used frequently for more standardized design techniques. Such as video backgrounds with text overlays to be specific. Would your team be open to outside resources helping get this done? My company has been largely moving as much of our client work over to using TailwindCSS with Laravel integrations because it is really good and our developers appreciate not having to compile assets every few minutes.

We're trying to move everything out of bootstrap and SCSS but things like this are making that relatively not possible, at least for the latter. I would like to stick with a library that I can safely assume standard elements would be apart of and it's a big feature that would further solidify our decision to solely use Tailwind for future projects.

[adamwathan]

Hey @brteller! You don't need text shadow utilities to be in core to use them in your Tailwind projects, the library is super extensible:

https://tailwindcss.com/docs/adding-new-utilities

We'll definitely add it to core one day but the biggest hurdle is doing all of the design research necessary to come up with the right set of default values.

[matronator]

We're not opposed to adding this at some point, but going to skip it for now since it's so easy to add utilities yourself.

Isn't that the whole point of Tailwind though? I mean, technically, we could add all the utilities ourselves, but that kinda beats the purpose.

[adamwathan]

@matronator I don't think the point is to solve every use case for every project automatically out of the box. Are you suggesting we should get rid of the plugin API and make it impossible to add custom CSS?

[matronator]

@adamwathan That's not what I'm saying at all. I don't disagree that Tailwind solving every possible problem is unfeasible, I just don't agree with your reasoning against implementing this (because it's easy to make it yourself) - you can make that argument for basically every Tailwind class.

[adamwathan]

@matronator That's not the reason for not adding them though, the reason for not adding them yet was explained here:

#162 (comment)

"You can add them yourself" is the rebuttal to "I can't use Tailwind because I need text shadows."

[matronator]

@adamwathan Got you, sorry, missed that comment.

[brteller]

@adamwathan I understand where you're coming from and do appreciate the fact that you can easily extend or use outside stylesheets for Tailwind.

I'm with others on this one though, having basic white and black text drop shadows with a few default sizes would immensely be useful. Obviously you can't account for every situation, color and size, but 90% of the time you don't really need to. Just as with rounded corners, a text-shadow-sm -md -lg and -xl would suffice in black and white. Which would cover the majority of use cases needed out the box.

I love Tailwind, I appreciate what you guys have built. This is one of those features that the community and your users want immensely, it's not an obscure request or weird CSS component. It's used commonly enough that it would be nice to rely on the core library out the box.

[zzkevinlim]

Was hoping to see this in v3.

[dr35]

2022 and still waiting

[yuiidev]

4+ year issue, and people are still asking for it, don't you guys think this should be getting some priority or timeframe at least?

[adamwathan]

@Demozo See #162 (comment)

If you are unhappy with the work being performed for you for free you are welcome to use another framework, I don't have much patience for this sort of attitude.

[yuiidev]

@adamwathan I am simply asking whether or not this should be getting more priority since people have actively been asking for this for over 4 years. There isn't any "sort of attitude".

I have read that comment, and I'm asking if the situation has changed since then.

[olemarius]

@Demozo Check are you familiar with windicss? Check https://windicss.org/utilities/general/typography.html#text-shadow

[digitaltim-de]

Why not added this?

[lachieh]

As a recap, support for text-shadow will likely not be added to tailwind soon as per this comment but is already achievable in a couple of ways:

1. Extend the css yourself as mentioned in the documentation and demonstrated here:
   Utility for text-shadow? #162 (comment)
2. The arbitrary properties syntax in v3 (and v2 with JIT mode):

   <span class="text-white text-bold [text-shadow:0_4px_8px_rgba(0,0,0,0.12)]">...</span>

If you are reading this thread from the future and you're still wondering if this will be added as a core utility, read the thread because the answer is still probably "not right now". Don't be the timewaster that posts yet another pointless comment asking: "Why not added this?"

[merelinguist]

People following this thread may be interested in this tweet: https://twitter.com/steveschoger/status/1515027409418002432

[matteius]

I wish it were an actual class (though I understand the hundreds of development argument) but I have spent a couple hours now trying to get the examples in this thread to work without success. Probably will take me a hundred hours to figure it out the way it is.

[REGEX777]

man this utility class is needed.....

[lachieh]

man this utility class is needed.....

Then how about you contribute one to the project, @REGEX777?

For anyone else still struggling to understand how to make text-shadows, here is an editable demo with one example using arbitrary properties and another example using custom classes. Make sure you are on at least version 3 for arbitrary properties to work.

[matteius]

Thanks a ton @lachieh -- Not sure why I can't get the CSS classes example to work in my project, but the inline example you provided is working wonders for me right now. Thanks so much!

[volkandkaya]

For multiple text shadows you can also use

[text-shadow:0_4px_8px_rgba(0,0,0,0.1),0_20px_8px_rgba(0,0,0,0.5)]

[silveltman]

Another reason why this is very much needed: text-borders!

like having a 1px (or 2 or whatever) shadow around text that functions as a 1px border. I think this is something that's used very ofter and can be added without a lot of investigation work, because it can use the same rules/guidelines as for normal border. Just using 'text-border' instead of 'border'.

I've also filed a seperate issue (#8598), since this might be a bit off-topic.

[gitRup-ca]

@adamwathan I have quite literally watched this thread for years. When I first started using Tailwind NOT having text shadow was a deal breaker. Like; how do you put text on top of a graphic, where some of the graphic - is the same color as the text? So it is unreadable. OUT OF THE BOX - you can not.

What makes Tailwind so amazing is that OUT OF THE BOX - it is extremely simple and extremely powerful. Except as a busy Noob, I could not figure out how to put text on top of a graphic and read it all. Yes - I admit, then I could not connect the dots of customization. But as a Noob, I did not want to learn how to customize ANOTHER bloody program, while learning a different one.

May I suggest, a step by step, V3.0 Tailwind tutorial of adding text shadows on the official website. When you search for "text shadow" on the official website you should get an excellent example of customization that everyone will want. (kills two birds with one stone)

Thanx

============================================================

In your preferred editor search for @tailwind.
Find the file with ...
@tailwind base;
@tailwind components;
@tailwind utilities;

below utilities add ...

@layer utilities {

   .text-shadow-mycolor{
      text-shadow: 3px 5px 7px rgb(2 51 55.7 / 3.0);
    }

   .text-shadow-lg-mycolor {
      text-shadow: 3px 5px 7px rgb(2 51 55.7 / 7.0);
    }

}

YOU MUST !!!! ...
update your compiled css files to see changes ...
npm run dev or npm run prod to update !!!!!!!
clear your cache!!!!

mycolor is whatever color name or text you want to use
this example is using green rgb colors
text-shadow-frog is also an acceptable name
text-shadow-superduperlargest-frog is also acceptable size name

the "px" values are the offset values of where the shadow will be located relative to the text
the rgb values are its color and the final slash/value is the shadows/glow width

to use
class="starting sfuff .... text-shadow-mycolor ... ending stuff"

[tordans]

Let's stay patient for a little while longer:

Source

[volkandkaya]

@gitRup-ca there is a better solution in that case

.text-shadow { text-shadow: 3px 5px 7px var(--tw-shadow-color); }

shadow-blue-600/60 text-shadow

[gitRup-ca]

@tordans AWESOME!! Truly looking forward to checking things out in a few weeks.

Fair warning though.

If a new version of Tailwind breaks a strict Content Security Policy (CSP) ; I will jump faster then a frog on a hot tin roof !

Stupid LiveWire buried an avatar service into Laravel Jetstreams. Might as well put a 1px webhook into everything everyone does.

NOTE: This is NOT a discussion about CSP. I will NOT reply. I just wanted to give the Tailwind Team a compliment, and in particular @tordans.

[jhhazelaar]

We want to use this in a project. From the example of @gitRup-ca and @volkandkaya we've created this:

@layer utilities {
    @variants responsive {
        .text-shadow-xs {
            text-shadow: 1px 1px 0 var(--tw-shadow-color),
            -1px 1px 0 var(--tw-shadow-color),
            1px -1px 0 var(--tw-shadow-color),
            -1px -1px 0 var(--tw-shadow-color);
        }

        .text-shadow {
            text-shadow: 2px 2px 0 var(--tw-shadow-color),
            -2px 2px 0 var(--tw-shadow-color),
            2px -2px 0 var(--tw-shadow-color),
            -2px -2px 0 var(--tw-shadow-color);
        }
        
        .text-shadow-none {
            text-shadow: none;
        }
    } 
}

This wil outline the font on all sides. Using box shadow color for the colors: https://tailwindcss.com/docs/box-shadow-color

[silveltman]

@jhhazelaar I created a plugin for this usecase.

github issue: #8598
npm: https://www.npmjs.com/package/tailwindcss-text-border

[volkandkaya]

@jhhazelaar glad I could help.

Would love to see 5ish classes added to Tailwind.

[justinh00k]

+1 - came here looking for text shadows!

[lachieh]

@adamwathan is it possible to lock this issue until there is an update? All the spammy +1 comments are irritating.

[text-shadow]

+1 - created an account to keep an eye on when you finally add text-shadow to Tailwind. From what I'm hearing, it's coming soon!

[ojvribeiro]

What about usin' drop-shadow-[x]?

[kotsh23]

@matronator That's not the reason for not adding them though, the reason for not adding them yet was explained here:

#162 (comment)

"You can add them yourself" is the rebuttal to "I can't use Tailwind because I need text shadows."

why you blocked Egypt IPs

[intzaaa]

+1

[RushilJalal]

Is text shadow here?
I started using Tailwind today and found out there is still no support for text shadow.