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>