Customizing shadow sizes in Tailwind CSS
Customizing shadow sizes in Tailwind CSS involves defining your own shadow utilities beyond the default ones. You do this by extending the boxShadow
property in your Tailwind configuration file. Here’s a step-by-step guide:
1. Create or Open Your Tailwind Configuration File
If you don’t have a tailwind.config.js
file yet, generate one using:
npx tailwindcss init
This will create a basic configuration file if one doesn’t already exist.
2. Modify the Configuration File
Open the tailwind.config.js
file. You’ll extend the boxShadow
theme within the theme
key. Here’s how to do it:
module.exports = {
theme: {
extend: {
boxShadow: {
'sm-custom': '2px 2px 4px rgba(0, 0, 0, 0.1)',
'md-custom': '4px 4px 8px rgba(0, 0, 0, 0.2)',
'lg-custom': '6px 6px 12px rgba(0, 0, 0, 0.3)',
'xl-custom': '8px 8px 16px rgba(0, 0, 0, 0.4)',
'2xl-custom': '10px 10px 20px rgba(0, 0, 0, 0.5)',
},
},
},
variants: {},
plugins: [],
}
In this configuration:
sm-custom
defines a small shadow with 2px offset, 4px blur radius, and 10% opacity.md-custom
defines a medium shadow with 4px offset, 8px blur radius, and 20% opacity.lg-custom
defines a large shadow with 6px offset, 12px blur radius, and 30% opacity.xl-custom
defines an extra-large shadow with 8px offset, 16px blur radius, and 40% opacity.2xl-custom
defines an even larger shadow with 10px offset, 20px blur radius, and 50% opacity.
3. Rebuild Your CSS
After making changes to the configuration file, you need to rebuild your CSS to apply the new shadow utilities. This is typically done by running:
npx tailwindcss build
or if you are using a build tool like webpack, it might involve a different command specific to your setup.
4. Use the Custom Shadows in Your HTML
You can now use your custom shadow utilities in your HTML:
<div class="shadow-md-custom">
This element has a custom medium shadow.
</div>
5. Combining Shadows
You can also combine different shadow utilities by applying multiple classes:
<div class="shadow-lg-custom shadow-md-custom">
This element has both large and medium custom shadows.
</div>