
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/tab/index.mdx'

## Default Class Table
  
<CssTable name="tab" />
  
## Demo
  
<Demo></Demo>
  
## Css Schema


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.tabs {
  @apply grid items-end;
}

.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
.tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active) {
  @apply border-b-transparent;
}

.tab {
  @apply relative row-start-1 inline-flex h-8 cursor-pointer select-none appearance-none flex-wrap items-center justify-center text-center text-sm leading-loose;
  --tab-padding: 1rem;
}
.tab:is(input[type="radio"]) {
  @apply w-auto rounded-b-none;
}
.tab:is(input[type="radio"]):after {
  --tw-content: attr(aria-label);
  content: var(--tw-content);
}
.tab:not(input):empty {
  @apply cursor-default;
  grid-column-start: span 9999;
}

.tab-content {
  @apply col-start-1 col-end-[span_9999] row-start-2 -mt-[--tab-border] hidden border-transparent;
  border-width: var(--tab-border, 0);
}
:checked + .tab-content:nth-child(2),
.tab-active + .tab-content:nth-child(2) {
  @apply rounded-ss-none;
}

input.tab:checked + .tab-content,
.tab-active + .tab-content {
  @apply block;
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.tabs-lifted > .tab:focus-visible {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.tab {
  @apply text-opacity-50 [@media(hover:hover)]:hover:text-opacity-100;
  --tab-color: theme(colors.base-content);
  --tab-bg: theme(colors.base-100);
  --tab-border-color: theme(colors.base-300);
  color: var(--tab-color);
  padding-inline-start: var(--tab-padding, 1rem);
  padding-inline-end: var(--tab-padding, 1rem);
}
.tab.tab-active:not(.tab-disabled):not([disabled]),
.tab:is(input:checked) {
  @apply border-base-content border-opacity-100 text-opacity-100;
}
.tab:focus {
  @apply outline-none;
}
.tab:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -5px;
}
.tab-disabled,
.tab[disabled] {
  @apply text-base-content cursor-not-allowed text-opacity-20;
}
@media (hover: hover) {
  .tab[disabled],
  .tab[disabled]:hover {
    @apply text-base-content cursor-not-allowed text-opacity-20;
  }
}

.tabs-bordered > .tab {
  @apply border-base-content border-opacity-20;
  border-style: solid;
  border-bottom-width: calc(var(--tab-border, 1px) + 1px);
}

.tabs-lifted > .tab {
  border: var(--tab-border, 1px) solid transparent;
  border-width: 0 0 var(--tab-border, 1px) 0;
  border-start-start-radius: var(--tab-radius, 0.5rem);
  border-start-end-radius: var(--tab-radius, 0.5rem);
  border-bottom-color: var(--tab-border-color);
  padding-inline-start: var(--tab-padding, 1rem);
  padding-inline-end: var(--tab-padding, 1rem);
  padding-top: var(--tab-border, 1px);
}
.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]),
.tabs-lifted > .tab:is(input:checked) {
  background-color: var(--tab-bg);
  border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
  border-inline-start-color: var(--tab-border-color);
  border-inline-end-color: var(--tab-border-color);
  border-top-color: var(--tab-border-color);
  padding-inline-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
  padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
  padding-bottom: var(--tab-border, 1px);
  padding-top: 0;
}
.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):before,
.tabs-lifted > .tab:is(input:checked):before {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + var(--tab-radius, 0.5rem) * 2);
  height: var(--tab-radius, 0.5rem);
  bottom: 0;
  background-size: var(--tab-radius, 0.5rem);
  background-position:
    top left,
    top right;
  background-repeat: no-repeat;
  --tab-grad: calc(69% - var(--tab-border, 1px));
  --radius-start: radial-gradient(
    circle at top left,
    transparent var(--tab-grad),
    var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
    var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
    var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
  );
  --radius-end: radial-gradient(
    circle at top right,
    transparent var(--tab-grad),
    var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
    var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
    var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
  );
  background-image: var(--radius-start), var(--radius-end);
}
.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before,
.tabs-lifted > .tab:is(input:checked):first-child:before {
  background-image: var(--radius-end);
  background-position: top right;
}
[dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before,
[dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
  background-image: var(--radius-start);
  background-position: top left;
}
.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before,
.tabs-lifted > .tab:is(input:checked):last-child:before {
  background-image: var(--radius-start);
  background-position: top left;
}
[dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before,
[dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
  background-image: var(--radius-end);
  background-position: top right;
}

.tabs-lifted
  > .tab-active:not(.tab-disabled):not([disabled])
  + .tabs-lifted
  .tab-active:not(.tab-disabled):not([disabled]):before,
.tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
  background-image: var(--radius-end);
  background-position: top right;
}

.tabs-boxed {
  @apply bg-base-200 rounded-btn p-1;
}
.tabs-boxed .tab {
  @apply rounded-btn;
}
.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]),
.tabs-boxed :is(input:checked) {
  @apply bg-primary text-primary-content [@media(hover:hover)]:hover:text-primary-content;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css
.tabs-md :where(.tab) {
  @apply h-8 text-sm leading-loose;
  --tab-padding: 1rem;
}

.tabs-lg :where(.tab) {
  @apply h-12 text-lg leading-loose;
  --tab-padding: 1.25rem;
}

.tabs-sm :where(.tab) {
  @apply h-6 text-sm leading-3;
  --tab-padding: 0.75rem;
}

.tabs-xs :where(.tab) {
  @apply h-5 text-xs leading-3;
  --tab-padding: 0.5rem;
}

```

</div>
</div>



