tailwindcss-innershadow

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