How To Add Custom Box Shadow In Tailwind CSS?

Last Updated : 03 Oct, 2024

Tailwind CSS is a utility-focused CSS framework. Offers a wide range of design utilities. It does include predefined shading, however, for unique design needs, you might want a custom box shadow that goes beyond the default. in this article, you will learn how to extend Tailwind's default shadow and how to create a custom box shadow utility in your project.

Approach

Start by creating and initializing a new project with npm init -y, then install Tailwind CSS with PostCSS and Autoprefixer. Next, generate a tailwind.config.js file using npx tailwindcss init, set the content paths, and extend the theme to add custom shadows. In the public/tailwind.css file, include the base, components, and utilities from Tailwind. Then, build the CSS by running npx tailwindcss -i public/tailwind.css -o public/styles.css --watch. Lastly, create an index.html file in the public folder to test your custom shadows, and open it in the browser to see how they look.

Steps to Create & Configure the Project

Step 1: Create a New Project Directory

Firstly, we must create a new project directory and navigate to it using the following command in the terminal.

mkdir tailwind-custom-shadow
cd tailwind-custom-shadow

Next you need to initialize the project using the following command:

npm init -y

Step 2: Install Tailwind CSS

When you create a new project you will need to install Tailwind CSS and create a configuration file named tailwind.config.js, you can do this by running following command.

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

Step 3: Configure Template Paths

Edit tailwind.config.js file to add content paths for your HTML and JavaScript files.

JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./public/**/*.{html,js}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

Step 4: Add Tailwind Directives

In public/tailwind.css file, add base, components and utilities layers of Tailwind:

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

Step 5: Extend Tailwind for Custom Shadows

To add custom box shadows, modify tailwind.config.js file. Add custom shadows to theme.extend section:

JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./public/**/*.{html,js}"],
    theme: {
        extend: {
            boxShadow: {
                'custom-light': `4px 4px 10px
                                 rgba(0, 0, 0, 0.1)`,
                'custom-dark': `6px 6px 15px
                                rgba(0, 0, 0, 0.3)`,
                'custom-color': `5px 5px 20px
                                 rgba(34, 60, 80, 0.7)`,
            },
        },
    },
    plugins: [],
}

Step 6: Create the HTML File

Now create public/index.html file to apply and test your custom box shadows:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Custom Shadows</title>
  <link href="./styles.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <h1 class="text-center text-green-600 text-4xl font-bold mb-8">GeeksforGeeks</h1>
  <div class="p-8">
    <div class="shadow-custom-light p-6 bg-white rounded mb-6">
      Light Custom Shadow
    </div>
    <div class="shadow-custom-dark p-6 bg-white rounded mb-6">
      Dark Custom Shadow
    </div>
    <div class="shadow-custom-color p-6 bg-white rounded">
      Colorful Custom Shadow
    </div>
  </div>
</body>
</html>

Project Structure

Step 7: Build the Tailwind CSS File

In your terminal run Tailwind build process to generate final styles.css:

npx tailwindcss -i public/tailwind.css -o public/styles.css --watch

We now have our custom shadow ready and applied to HTML element.

Output: Open index.html file in your browser to see custom box shadows applied.

CSS Introduction

pankajbind

Improve

Article Tags :