Textschatten mit Tailwind CSS

Seit einigen Jahren bin ich begeisterter Nutzer von Tailwind CSS – sofern es das jeweilige Projekt sinnvoll zulässt.

Was mir bei der Standardkonfiguration von Tailwind CSS jedoch häufig fehlt sind Text-Schatten (text-shadow). Aus diesem Grund füge ich normalerweise folgenden Code in meine Tailwind CSS-Datei ein:

@layer components {
    @responsive {
        .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;
        }
    }
}

Anschließend stehen folgende Klassen zur Verfügung:

• text-shadow
• text-shadow-sm
• text-shadow-md
• text-shadow-lg
• text-shadow-xl
• text-shadow-none

Alle Schatten-Variationen können mit den Responsive-Prefixen wie sm:, md:, etc. genutzt werden.