🚀 Tailwind CSS Corner Shape: esquinas «pro» sin hacks

Hace unos días compartí que estaba creando unas utilidades para recortar esquinas en tarjetas, con idea de estandarizarlas y convertirlas en un patrón oficial dentro de Flowtitude.

Pues bien: no vamos a desarrollar esas utilidades (al menos por ahora), porque he encontrado un plugin que lo resuelve de forma muy elegante —y además abre la puerta a mucho más que un simple «corte».

👉 Se llama Tailwind CSS Corner Shape Plugin.

✨ ¿Qué hace exactamente?

Este plugin aprovecha la propiedad CSS corner-shape para que tus rounded-* de siempre se vean con un estilo más moderno (tipo squircle, bevel y variantes similares), sin tocar tu HTML ni montar soluciones específicas por componente.

En pocas palabras: sigues usando Tailwind como siempre, pero las esquinas pueden verse mucho más refinadas.

✅ Lo mejor (para nuestro día a día)

• Mejora automática de *`rounded-`**: aplicas tus radios normales y el plugin se encarga del “look” de las esquinas.
• Compatible con valores arbitrarios: si usas rounded-[20px], también entra.
• Presets listos: puedes activar estilos como squircle (y otros) de forma directa.
• Degradación limpia: si el navegador no soporta corner-shape, se mantiene el border-radius estándar sin romper nada.

🧩 Cómo lo usaríamos en Tailwind v4 (CSS-first)

En el enfoque de Tailwind v4, se integra de forma muy natural cargando el preset:

@plugin "tailwindcss-corner-shape/presets/squircle";

🎯 Por qué encaja con Flowtitude

Porque respeta tu escala de radios (rounded-*) y convierte esa decisión de diseño en algo más potente, sin meter ruido en el sistema ni obligarnos a mantener utilidades «caseras» para cada caso.

📌 Enlace al plugin https://github.com/bilalharouchi/tailwindcss-corner-shape