Package Exports

tailwindcss-layered-box-shadow
tailwindcss-layered-box-shadow/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-layered-box-shadow) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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/