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

## 默认类名表格
  
<CssTable name="alert" />
  
## 样例
  
<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
.alert {
  @apply grid w-full grid-flow-row content-start items-center justify-items-center gap-4 text-center sm:grid-flow-col sm:grid-cols-[auto_minmax(auto,1fr)] sm:justify-items-start sm:text-left;
}

```

</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
.alert {
  @apply rounded-box border p-4 text-base-content border-base-400;
}
.alert-primary {
  @apply text-primary-content border-primary/20 bg-primary;
}
.alert-success {
  @apply text-success-content border-success/20 bg-success;
}
.alert-warning {
  @apply text-warning-content border-warning/20 bg-warning;
}
.alert-error {
  @apply text-error-content border-error/20 bg-error;
}
.alert-neutral {
  @apply text-neutral-content border-neutral/20 bg-neutral;
}

```

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



