Tailwind text-shadow

There is no support for text-shadow class in Tailwind out of the box as of now, but we can add it with a simple plugin right in the config, without any extra external dependencies.

/** @type {import('tailwindcss').Config} */

const plugin = require("tailwindcss/plugin")

module.exports = {
  mode: "jit",
  content: ["*.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      textShadow: {
        sm: "1px 1px 2px var(--tw-shadow-color)",
        DEFAULT: "2px 2px 4px var(--tw-shadow-color)",
        lg: "4px 4px 8px var(--tw-shadow-color)",
        xl: "6px 6px 12px var(--tw-shadow-color)"
      }
    }
  },
  plugins: [
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          "text-shadow": (value) => ({
            textShadow: value
          })
        },
        { values: theme("textShadow") }
      )
    })
  ]
}

This simple solution gives us classes like text-shadow, text-shadow-sm, text-shadow-lg and we can conveniently apply colors to our shadow with good old shadow-indigo-500, for example.