tailwind-rounded-out
v1.0.1
Published
Tailwind CSS plugin for outer-rounded corners with background inheritance
Downloads
172
Maintainers
Readme
Tailwind Rounded Out
A Tailwind CSS plugin that adds "outside" rounded corners to elements
Similar to folder tabs or protruding cards. The plugin maintains background color/image inheritance while providing a wide range of customization options.
Features
- Maintains background inheritance (colors, gradients, images)
- Supports all corners and sides independently
- Works with Tailwind's default radius sizes
- Supports arbitrary values
- Zero dependencies besides Tailwind CSS
Installation
npm install tailwind-rounded-out
Setup
Add the plugin to your tailwind.config.js
:
module.exports = {
content: [
// ...
],
theme: {
// Optionally customize default sizes
roundedOut: {
sm: "0.125rem",
// ... other sizes
},
},
plugins: [require("tailwind-rounded-out")],
};
note: if you don't supply custom sizes, the plugin will use the same values from either the theme.borderRadius
or the default theme sizes <
Basic Usage
<!-- All corners -->
<div class="rounded-out-lg">Basic card with large outer corners</div>
<!-- Specific sides -->
<div class="rounded-out-b-xl">Bottom corners only</div>
<!-- Individual corners -->
<div class="rounded-out-bl-2xl">Just bottom-left corner</div>
<!-- Mixed sizes -->
<div class="rounded-out-bl-xl rounded-out-br-sm">
Different sizes for bottom-left and bottom-right
</div>
<!-- Arbitrary values -->
<div class="rounded-out-[25px]">Custom radius size</div>
Available Classes
Full Rounding
rounded-out-{size}
- Sizes:
sm
,md
,lg
,xl
,2xl
,3xl
- Sizes:
Directional Variants
rounded-out-{t|b|l|r}-{size}
- Top, Bottom, Left, Rightrounded-out-{tl|tr|bl|br}-{size}
- Top-Left, Top-Right, etc.rounded-out-{lt|lb|rt|rb}-{size}
- Left-Top, Left-Bottom, etc.
Arbitrary Values
rounded-out-[size]
rounded-out-{direction}-[size]
How It Works
This plugin uses CSS ::before
and ::after
pseudo-elements to create the rounded corner effect with a CSS Mask, and so it can let the real background show through. The pseudo-elements are positioned absolutely and use CSS masks to create the rounded shape so there's no need for a fake background color.
Important Notes
Pseudo-element Usage: Because this plugin uses
::before
and::after
pseudo-elements, you cannot apply additional::before
or::after
styles to elements using these classes.Position Context: Elements using these classes should have
position: relative
or any other position that creates a containing block.Background Inheritance: The rounded corners will automatically inherit background colors, images, and gradients from the parent element.
Examples
Tab-like Navigation
<nav class="flex gap-px text-slate-600">
<a class="relative rounded-out-b-xl bg-blue-300 px-4 py-2 rounded-t-xl">
Inactive Tab
</a>
<a
class="relative rounded-out-b-xl bg-blue-500 px-4 py-2 rounded-t-xl z-10 text-slate-200"
>
Active Tab
</a>
</nav>
Produces;
Card with Mixed Corners
<div
class="relative rounded-out-tl-xl rounded-out-br-xl bg-gradient-to-r from-blue-500 to-purple-500 p-6 rounded-tr-xl rounded-bl-xl before:bg-blue-500 before:bg-none after:bg-purple-500 after:bg-none"
>
Card with diagonal corners
</div>
Produces;
Troubleshooting
Common Issues
Backgrounds Not Showing
- Ensure the parent element has a background color/image set
- The element this is applied to needs to have
position: relative
or any other position that creates a containing block
Conflicts with Other Styles
- Remove any ::before or ::after pseudo-elements on the same element
- Check z-index values if elements appear in wrong order
Overflow notes
- The corners are outside of the bounding box
- Setting an overflow hidden will prevent the pseudo-elements from showing
License
MIT License - See LICENSE file for details