A Tailwind CSS plugin that adds utilities for creating inverted borders - circular cutouts in the corners of elements that create a unique visual effect.
- Install the plugin via npm:
npm install tailwindcss-inverted-border
- Add the plugin to your
tailwind.config.js
:
module.exports = {
plugins: [require("tailwindcss-inverted-border")],
};
The plugin provides two types of utilities:
Use inverted-border-{size}
to set the size of the inverted border. This uses your theme's border radius values.
<div class="inverted-border-2">
<!-- Content -->
</div>
Available sizes correspond to your Tailwind border radius theme values:
inverted-border-sm
inverted-border-md
inverted-border-lg
inverted-border-xl
inverted-border-2xl
- etc.
Use inverted-border-{color}
to set the color of the inverted border. This uses your theme's color palette.
<div class="inverted-border-blue-500">
<!-- Content -->
</div>
<!-- Basic usage -->
<div class="inverted-border-2 inverted-border-blue-500">
Basic inverted border
</div>
<!-- Larger size -->
<div class="inverted-border-4 inverted-border-purple-600">
Larger inverted border
</div>
<!-- Combined with other utilities -->
<div class="p-4 bg-gray-100 inverted-border-2 inverted-border-black">
Styled element with inverted border
</div>
The plugin creates a radial gradient that forms a circular cutout in the corner of the element. It:
- Uses CSS custom properties for dynamic color control
- Maintains a 1:1 aspect ratio for consistent circles
- Creates proper stacking context using
isolation: isolate
- Supports all colors from your Tailwind theme
The plugin uses your existing Tailwind configuration for:
- Border radius values (for sizes)
- Color palette (for border colors)
No additional configuration is required, but you can customize the available values by modifying your theme's borderRadius
and colors
settings.
This plugin works in all modern browsers that support:
- CSS Custom Properties
- Radial Gradients
- Aspect Ratio
MIT
Contributions are welcome! Please feel free to submit a Pull Request.