Tailwind CSS v3.0+ InnerShadow Plugin

Tailwind 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.

🚀 Features

• 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.).

🌟 Inspiration

This project is inspired by ycs77/tailwindcss-glowing.

📦 Installation

Install the plugin using npm or yarn:

npm i -D tailwindcss-innershadow
# or yarn
yarn add -D tailwindcss-innershadow

🔧 Usage

1. Add the plugin to your tailwind.config.js:

   const innerShadow = require('tailwindcss-innershadow');
   
   module.exports = {
     plugins: [innerShadow],
   };

2. Use the utilities in your HTML or components:

   <div class="innerShadow-white/10 innerShadow-4xl">
     Example with Inner Shadow
   </div>

✨ Options

Inner Shadow Sizes

Control the blur size using these utilities:

| 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 |

Inner Shadow Colors with Opacity

Apply any Tailwind CSS color with optional opacity for the shadow:

• innerShadow-red-500
• innerShadow-blue/20
• innerShadow-gray-700
• innerShadow-purple/50
• Or use any custom color defined in your Tailwind theme.

🌟 Example

<div class="p-6 rounded-lg bg-gray-100 innerShadow-black/30 innerShadow-3xl">
  Inner Shadow Example
</div>

📄 License

This project is licensed under the MIT License.

🌍 Connect

• GitHub: My Profile
• Discord: @jaamey.pr

Create dynamic inner shadow effects with Tailwind CSS InnerShadow Plugin! 🎨