Tailwind Squircle Plugin
Create beautiful squircle shapes using SVG clip paths and the superellipse algorithm. Perfect for modern UI designs that need something between squares and circles.
Installation
npm install tailwind-squircle2
Then import the plugin in your CSS file (e.g., globals.css):
@import "tailwindcss";
@import "tailwind-squircle2/css";
Configure PostCSS in your postcss.config.js:
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}
Squircle Variations
Round Squircle
n = 3 (very rounded)
<div className="squircle-round bg-blue-500"></div>
Perfect Squircle
n = 4 (balanced)
<div className="squircle bg-green-500"></div>
Soft Squircle
n = 6 (softer corners)
<div className="squircle-soft bg-purple-500"></div>
Sharp Squircle
n = 8 (more square-like)
<div className="squircle-sharp bg-pink-500"></div>
Practical Examples
Card Components
Performance
Lightning-fast rendering with optimized SVG clip paths.
Easy to Use
Simple utility classes that work with any Tailwind setup.
Responsive
Works perfectly across all screen sizes and devices.
Button Styles
Profile Images
Comparison with Standard Shapes
Square
Standard rectangle
Rounded Rectangle
Standard border-radius
Squircle
Perfect balance
Circle
Fully rounded