Tailwindcss-textshadow - A Utility Plugins for controlling Text Shadow of an element for Tailwind

  • Last update: Nov 28, 2022
  • Comments: 4


A Utility Plugins for controlling Text Shadow of an text element.

Class Properties
.text-shadow text-shadow: 0px 0px 1px rgb(0 0 0 / 20%), 0px 0px 1px rgb(1 0 5 / 10%);
.text-shadow-sm text-shadow: 1px 1px 3px rgb(36 37 47 / 25%);
.text-shadow-md text-shadow: 0px 1px 2px rgb(30 29 39 / 19%), 1px 2px 4px rgb(54 64 147 / 18%)
.text-shadow-lg text-shadow: 3px 3px 6px rgb(0 0 0 / 26%), 0 0 5px rgb(15 3 86 / 22%)
.text-shadow-xl text-shadow: 1px 1px 3px rgb(0 0 0 / 29%), 2px 4px 7px rgb(73 64 125 / 35%)
.text-shadow-none text-shadow: none

💡 Features

Minimal Set-up.

Ready to use out of the box.

Has default preset shadows with variants.

Users will be able to override and extend defaults the same way they can with Tailwind's built-in styles.

Installation & changes in tailwind.config.js


yarn add tailwindcss-textshadow --dev


npm i --save-dev tailwindcss-textshadow

✔️ import the plugin

Add the plugin to the plugins array in your Tailwind configuration file (tailwind.config.js).

plugins: [

🍺 Congratulations! You are ready to use text-shadow in your project.

How to use

No text shadow

Use .text-shadow-none to remove an existing text shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint.

<span class="text-shadow-none">span>


To control the textshadow of an text element at a specific breakpoint, add a {screen}: prefix to any existing text shadow utility. For example, use xl:text-shadow-lg to apply the text-shadow-lg utility at only large screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

<div class="text-shadow sm:text-shadow-sm md:text-shadow-md lg:text-shadow-lg xl:text-shadow-xl ...">


Text Shadow

By default this plugin provides drop text shadow utilities with five modifires, and a utility for removing existing text shadows. You can change, add, or remove these by editing the theme.textShadow section of your Tailwind config.

If a default text shadow is provided, it will be used for the non-suffixed .text-shadow utility. Any other keys will be used as suffixes, for example the key '2xl' will create a corresponding .text-shadow-2xl utility.

To override the default

// tailwind.config.js
module.exports = {
  theme: {
     textShadow: {
        'default': '0 2px 0 #000',
        'md': '0 2px 2px #000',
        'h2': '0 0 3px #FF0000, 0 0 5px #0000FF',
        'h1': '0 0 3px rgba(0, 0, 0, .8), 0 0 5px rgba(0, 0, 0, .9)',

To extend the default

// tailwind.config.js
module.exports = {
  theme: {
    // ...
    extend: {
      // ...
      textShadow: {
        '2xl': '1px 1px 5px rgb(33 34 43 / 20%)',
        '3xl': '0 0 3px rgba(0, 0, 0, .8), 0 0 5px rgba(0, 0, 0, .9)',

Responsive and pseudo-class variants

By default, only responsive, hover and focus variants are generated for text shadow utilities.

You can control which variants are generated for the text shadow utilities by modifying the textShadow property in the variants section of your tailwind.config.js file.

For example, this config will also generate active and group-hover variants:

Use the name textShadow under variants object.

// tailwind.config.js
module.exports = {
  variants: {
    // ... 
    -   textShadow: ['responsive', 'hover', 'focus'],
    +   textShadow: ['responsive', 'hover', 'focus', 'active', 'group-hover'],


💚 If you 👍 this, then please give a . Thank you.


The MIT License (MIT). Please see License File for more information.




  • 1

    Adds lodash dependency for Yarn v2 compatability

    Unless lodash is specified as an explicit dependency, Yarn v2 gives the following error:

    Error: tailwindcss-textshadow tried to access lodash, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

  • 2

    Readme file updated to reflect valid text-shadow css property values.


    I've updated the readme file with valid text-shadow css values. The readme contained a copy of box-shadow css properties from the Tailwindcss site, which is not compatible with the text-shadow property. I actually changed the values to something bit more sensible but I've kept the rgba example.

    I think the keys should make a bit more sense but that's just a technicality in my opinion.


  • 3

    Wondering if the dependencies will be upgraded for this plugin?

    Hi there,

    Though this is not a critical concern, I am just wondering whether there will be updates to the dependencies libraries for this plugin since Tailwindcss has successfully moved to v3 with updates to dependencies such as autoprefixer, postcss, purgecss, etc.

    # npm audit report
    postcss  <=8.2.12
    Severity: moderate
    Regular Expression Denial of Service in postcss - https://github.com/advisories/GHSA-hwj9-h5mp-3pm3
    Regular Expression Denial of Service in postcss - https://github.com/advisories/GHSA-566m-qj78-rww5
    No fix available
      @fullhuman/postcss-purgecss  2.0.3 - 3.0.0
      Depends on vulnerable versions of postcss
      Depends on vulnerable versions of purgecss
        tailwindcss  0.1.0 - 2.2.0-canary.16
        Depends on vulnerable versions of @fullhuman/postcss-purgecss
        Depends on vulnerable versions of autoprefixer
        Depends on vulnerable versions of postcss
        Depends on vulnerable versions of postcss-functions
        Depends on vulnerable versions of postcss-nested
          tailwindcss-textshadow  *
          Depends on vulnerable versions of tailwindcss
      autoprefixer  1.0.20131222 - 9.8.8
      Depends on vulnerable versions of postcss
      postcss-functions  <=3.0.0
      Depends on vulnerable versions of postcss
      postcss-js  <=2.0.3
      Depends on vulnerable versions of postcss
      postcss-nested  <=4.2.3
      Depends on vulnerable versions of postcss
      purgecss  2.0.1-beta.0 - 3.0.0
      Depends on vulnerable versions of postcss
    9 moderate severity vulnerabilities

    Looking forward to the potential update if it is in the pipeline.


  • 4

    idea: extending with colour too?

    Hiya. I've Just stumbled upon this ty.

    would there be any interest in extendign this plugin to include colours too?

    maybe something like text-shadow-md text-shadow-red-500 to override the default colours with those of the red-500 pallete?