tailwindcss-layered-box-shadow

Advanced configurable layered Box Shadow classes for tailwindcss

tailwindcss-layered-box-shadow

A plugin that provides advanced, more realistic and fully configurable layered box shadow classes for tailwindcss.

Installation

Install the plugin from npm:

# Using npm
npm install tailwindcss-layered-box-shadow

# Using Yarn
yarn add tailwindcss-layered-box-shadow

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-layered-box-shadow'),
    // ...
  ],
}

Usage

The Plugin generates 6 default advanced shadow sizes with different number of layers:

Class	Layers
shadow-layered-xs	3
shadow-layered-sm	4
shadow-layered-md	5
shadow-layered-lg	6
shadow-layered-xl	7
shadow-layered-2xl	8

Example Usage

<div class="shadow-layered-xs hover:shadow-layered-lg"></div>

Output:

.shadow-layered-xs {
    box-shadow: 2px 2px 10px -0.2px rgba(98,103,173,0.34),
    3px 3px 10px -0.575px rgba(98,103,173,0.34),
    4px 4px 10px -0.95px rgba(98,103,173,0.34)
;
}

hover\:.shadow-layered-lg {
    box-shadow: 2px 2px 10px -0.2px rgba(98,103,173,0.34),
    3px 3px 10px -0.575px rgba(98,103,173,0.34),
    4px 4px 10px -0.95px rgba(98,103,173,0.34),
    5px 5px 10px -1.325px rgba(98,103,173,0.34),
    6px 6px 10px -1.7px rgba(98,103,173,0.34),
    7px 7px 10px -2.075px rgba(98,103,173,0.34)
;
}

Configuration

You can configure the shadow styles are generated by this plugin under the shadowColor, shadowPositionX, shadowPositionY, shadowBlur, shadowSpread and shadowOpacity keys in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
    theme: {
        shadowColor: '#6267ad',
        shadowPositionX: 1,
        shadowPositionY: 1,
        shadowBlur: 10,
        shadowSpread: -0.2,
        shadowOpacity: 0.34
    }
}

Demo

https://bentzibentz.github.io/tailwindcss-layered-box-shadow/