frutjam/dist/components/join.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.join{display:inline-flex;align-items:stretch;--join-radius:calc(var(--border-radius)*2);& .join-item{border-start-start-radius:var(--join-ss,0);border-start-end-radius:var(--join-se,0);border-end-start-radius:var(--join-es,0);border-end-end-radius:var(--join-ee,0)}flex-direction:row;>:only-child{--join-ss:var(--join-radius);--join-se:var(--join-radius);--join-es:var(--join-radius);--join-ee:var(--join-radius)}>:first-child:not(:only-child){--join-ss:var(--join-radius);--join-se:0;--join-es:var(--join-radius);--join-ee:0}>:last-child:not(:only-child){--join-ss:0;--join-se:var(--join-radius);--join-es:0;--join-ee:var(--join-radius)}>:not(:first-child):not(:last-child){border-radius:0}& .join-item{margin-inline-start:calc(var(--border, 1px)*-1)}}.join-horizontal{flex-direction:row;>:only-child{--join-ss:var(--join-radius);--join-se:var(--join-radius);--join-es:var(--join-radius);--join-ee:var(--join-radius)}>:first-child:not(:only-child){--join-ss:var(--join-radius);--join-se:0;--join-es:var(--join-radius);--join-ee:0}>:last-child:not(:only-child){--join-ss:0;--join-se:var(--join-radius);--join-es:0;--join-ee:var(--join-radius)}>:not(:first-child):not(:last-child){border-radius:0}& .join-item{margin-inline-start:calc(var(--border, 1px)*-1)}}.join-vertical{flex-direction:column;>:only-child{--join-ss:var(--join-radius);--join-se:var(--join-radius);--join-es:var(--join-radius);--join-ee:var(--join-radius)}>:first-child:not(:only-child){--join-ss:var(--join-radius);--join-se:var(--join-radius);--join-es:0;--join-ee:0}>:last-child:not(:only-child){--join-ss:0;--join-se:0;--join-es:var(--join-radius);--join-ee:var(--join-radius)}>:not(:first-child):not(:last-child){border-radius:0}& .join-item{margin-block-start:calc(var(--border, 1px)*-1)}}.join-item{--join-item:1}