frutjam/dist/components/tabs.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 */.tabs-vertical{--tabs--display:grid;display:grid;grid-template-columns:max-content 1fr;align-items:start;&:after{display:none}&:before{content:"";grid-column:2;grid-row:1/span 999;align-self:stretch;border-inline-start:1px solid var(--color-base-soft);pointer-events:none}&>.tab{grid-column:1;width:100%;justify-content:flex-start;border-inline-end:2px solid transparent;margin-inline-end:-2px;border-radius:0}&>.tab-active,&>.tab:checked{border-inline-end-color:var(--color-tab-active);position:relative;z-index:1}&>.tab-content{grid-column:2;grid-row:1/span 999}}.tab-disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.tabs-lifted{align-items:flex-end;gap:0;&:after{content:"";width:100%;order:1;border-block-start:1px solid var(--color-base-soft)}&>.tab{border:1px solid transparent;border-block-end:none;&:not(.btn){border-radius:calc(var(--border-radius)*2) calc(var(--border-radius)*2) 0 0}}&>.tab-active,&>.tab:checked{color:var(--color-on-base);border-color:var(--color-base-soft);background-color:var(--color-base);position:relative;z-index:1;margin-block-end:-1px}&>.tab-content{border:1px solid var(--color-base-soft);margin-block-start:-1px;border-radius:0 calc(var(--border-radius)*2) calc(var(--border-radius)*2) calc(var(--border-radius)*2)}}.tabs-bottom{align-items:flex-start;&:after{display:none}&:before{content:"";width:100%;order:-1;border-block-end:1px solid var(--color-base-soft)}&>.tab{border-block-start:2px solid transparent;margin-block-start:-2px}&>.tab-active,&>.tab:checked{border-block-start-color:var(--color-tab-active);position:relative;z-index:1}&>.tab-content{order:-2}}.tabs-underline{align-items:flex-end;&:after{content:"";width:100%;order:1;border-block-start:1px solid var(--color-base-soft)}&>.tab{border-block-end:2px solid transparent;margin-block-end:-2px}&>.tab-active,&>.tab:checked{border-block-end-color:var(--color-tab-active);position:relative;z-index:1}}.tab-content{display:none;width:100%;order:9999;.tab-active+&,.tab:checked+&{display:block}}.tab{--color-tab:currentColor;--color-tab-active:var(--color-primary);--tab--padding-inline:1rem;--tab--padding-block:0.625rem;--tab--font-size:0.875rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding-inline:var(--tab--padding-inline);padding-block:var(--tab--padding-block);font-size:var(--tab--font-size);font-weight:500;cursor:pointer;transition:color .2s ease-in-out,border-color .2s ease-in-out;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:transparent;&:after{content:attr(aria-label)}&:not(.btn){border-radius:0;color:var(--color-tab);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-tab) 60%,transparent)}&:hover{@media (hover:hover){color:var(--color-tab)}}&:checked{color:var(--color-tab-active)}}}.tabs{display:var(--tabs--display,flex);flex-wrap:wrap;gap:0}.tabs-box{background-color:var(--color-base-soft);border-radius:calc(var(--border-radius)*2);padding:.25rem;gap:.25rem;align-items:center;&:after{display:none}&>.tab{border-radius:calc(var(--border-radius)*1.5)}&>.tab-active,&>.tab:checked{background-color:var(--color-base);color:var(--color-on-base);box-shadow:0 1px 3px color-mix(in oklab,oklch(0% 0 0) 10%,transparent)}}.tabs-end{justify-content:flex-end}.tab-active{color:var(--color-tab-active)}.tabs-lg{&>.tab{--tab--padding-inline:1.25rem;--tab--padding-block:0.75rem;--tab--font-size:1rem}}.tabs-md{&>.tab{--tab--padding-inline:1rem;--tab--padding-block:0.625rem;--tab--font-size:0.875rem}}.tabs-sm{&>.tab{--tab--padding-inline:0.75rem;--tab--padding-block:0.5rem;--tab--font-size:0.8125rem}}.tabs-xl{&>.tab{--tab--padding-inline:1.5rem;--tab--padding-block:0.875rem;--tab--font-size:1.125rem}}.tabs-xs{&>.tab{--tab--padding-inline:0.625rem;--tab--padding-block:0.375rem;--tab--font-size:0.75rem}}