How to Add Text Shadow in Tailwind CSS?

Adding a text shadow in Tailwind CSS is useful for making text for creating visual effects like glows and embossed or debossed effects. Tailwind CSS does not provide text shadow utilities out of the box but it allows you to easily extend its functionality to add custom utilities. In this article, we will explore how to add a text shadow in a project using Tailwind CSS.

Approach

• Begin the project by creating a React application and installing Tailwind CSS along with its dependencies.
• Modify the tailwind.config.js file to include a custom plugin. Within this plugin, define the text-shadow styles you want to support, such as various shadow sizes and colors.
• Once the custom utilities are defined, you can apply them directly in your React components using the classes you created, allowing for easy integration of text shadows throughout your application.
• Finally, run the application to see the text-shadow effects in action, making adjustments as needed to perfect the styles.

Prerequisites

• ReactJS
• Tailwind CSS
• Node.js npm
• React Icons

Steps To Add Text Shadow

Step 1: Set up a React Application

npx create-react-app react-app
cd react-app

Step 2: Install Tailwind CSS using the command

npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

Step 3: Configure the tailwind paths in your tailwind.config.js file

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primaryGreen: "#4CAF50",  // Green
        primaryBlack: "#000000",  // Black
        primaryWhite: "#FFFFFF",  // White
      }
    },
  },
  plugins: [],
}

Step 4: Add tailwind directives to your index.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

body {

  margin: 0;
  font-family: 'Times New Roman', Times, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Project Structure:

Updated Dependencies:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Example: This example demonstrates the creation of text shadow using React and Tailwind CSS

// App.js

import React, { useState } from "react";

function App() {

    return (
        <div className="flex items-center justify-center min-h-screen bg-green-100">
            <ul class="space-y-8 w-full h-96 p-8 flex items-center justify-center 
                       gap-2 flex-col bg-inherit rounded-xl">
                <li class="[text-shadow:_0_2px_4px_rgb(99_102_241_/_0.8)] 
                           text-indigo-600 text-xl md:text-2xl leading-snug 
                           font-manrope font-extrabold">Text Shadow: Small
                </li>
                <li class="[text-shadow:_0_4px_4px_rgb(99_102_241_/_0.8)]
                            text-indigo-600 text-xl md:text-2xl leading-snug 
                            font-manrope font-extrabold">Text Shadow: Default
                </li>
                <li class="[text-shadow:_0_8px_8px_rgb(99_102_241_/_0.8)] 
                            text-indigo-600 text-xl md:text-2xl leading-snug 
                            font-manrope font-extrabold">Text Shadow: Large
                </li>
                <li class="[text-shadow:_0_4px_8px_#00BCD4] text-[#00BCD4] 
                            text-xl md:text-2xl leading-snug font-manrope 
                            font-extrabold">Text Shadow: Arbitrary (Custom Color)
                </li>
                <li class="[text-shadow:_0_4px_8px_rgba(14_165_223_/_0.5)]
                            text-sky-400 text-xl md:text-2xl leading-snug 
                            font-manrope font-extrabold"> Text Shadow: Arbitrary
                    (Tailwind CSS Color)
                </li>
            </ul>
        </div>
    );
}

export default App;

Step 4: Run the Application

npm start

Output:

Conclusion

This article showcases the flexibility of Tailwind CSS and its extensibility through custom utilities such as adding text shadows. By extending the default configuration we can introduce new styling options that are not available out of the box. We also demonstrated how JavaScript can be integrated with Tailwind to dynamically manipulate styles and adding interactivity to a static webpage.