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
Folder StructureStep 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.
Add Custom Box Shadow In Tailwind CSS