A Tailwind CSS v3.0+ plugin that adds customizable inner shadow utilities with support for dynamic blur sizes and color palettes.
npm install tailwindcss-innershadowTailwind CSS InnerShadow is a robust plugin that allows you to effortlessly add customizable inner shadow effects to your Tailwind CSS v3.0+ projects. Define blur sizes and shadow colors with opacity for stunning, polished designs.
---
- Add inner shadow effects to your elements with ease.
- Fully customizable blur sizes (innerShadow-sm, innerShadow-4xl, etc.).
- Supports Tailwind CSS color palettes with opacity (innerShadow-white/10, innerShadow-blue-500, etc.).
---
This project is inspired by ycs77/tailwindcss-glowing.
---
Install the plugin using npm or yarn:
``bash`
npm i -D tailwindcss-innershadowor yarn
yarn add -D tailwindcss-innershadow
---
1. Add the plugin to your tailwind.config.js:
`javascript
const innerShadow = require('tailwindcss-innershadow');
module.exports = {
plugins: [innerShadow],
};
`
2. Use the utilities in your HTML or components:
`html`
Example with Inner Shadow
---
| Class | Blur Size |
|----------------------|----------------|
| innerShadow-sm | 2px |innerShadow
| | 4px (Default) |innerShadow-md
| | 6px |innerShadow-lg
| | 10px |innerShadow-xl
| | 15px |innerShadow-2xl
| | 25px |innerShadow-3xl
| | 35px |innerShadow-4xl
| | 45px |innerShadow-5xl
| | 50px |
- innerShadow-red-500
-
-
-
- Or use any custom color defined in your Tailwind theme.
---
`html``
Inner Shadow Example
---
This project is licensed under the MIT License.
- GitHub: My Profile
- Discord: [@jaamey.pr]()
---
Create dynamic inner shadow effects with Tailwind CSS InnerShadow Plugin! 🎨