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

## 默认类名表格
  
<CssTable name="link" />
  
## 样例
  
<Demo></Demo>
  
## Css 结构


### 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
.link {
  @apply cursor-pointer underline;
}
.link-hover {
  @apply no-underline hover:underline;
}

```

</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
.link-primary {
  @apply text-primary [@media(hover:hover)]:hover:text-primary-active;
}
.link-success {
  @apply text-success [@media(hover:hover)]:hover:text-success-active;
}
.link-warning {
  @apply text-warning [@media(hover:hover)]:hover:text-warning-active;
}
.link-error {
  @apply text-error [@media(hover:hover)]:hover:text-error-active;
}
.link-neutral {
  @apply text-neutral [@media(hover:hover)]:hover:text-neutral-active;
}
.link:focus {
  @apply outline-none;
}
.link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

```

</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

```

</div>
</div>



