Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bentzibentz/tailwindcss-layered-box-shadow
Advanced layered box shadows for tailwindcss
https://github.com/bentzibentz/tailwindcss-layered-box-shadow
Last synced: about 2 months ago
JSON representation
Advanced layered box shadows for tailwindcss
- Host: GitHub
- URL: https://github.com/bentzibentz/tailwindcss-layered-box-shadow
- Owner: bentzibentz
- License: mit
- Created: 2022-09-02T19:29:22.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-09-03T07:44:59.000Z (over 2 years ago)
- Last Synced: 2024-08-03T17:12:33.741Z (5 months ago)
- Language: JavaScript
- Size: 257 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
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:
```sh
# 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:
```js
// 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
```html
```
Output:
```css
.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:
```js
// 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/](https://bentzibentz.github.io/tailwindcss-layered-box-shadow/)