Font Weight
Controls the font weight of an element.
| Class | Property |
|---|---|
| fw-100 | font-weight: 100; |
| fw-200 | font-weight: 200; |
| fw-300 | font-weight: 300; |
| fw-400 | font-weight: 400; |
| fw-500 | font-weight: 500; |
| fw-600 | font-weight: 600; |
| fw-700 | font-weight: 700; |
| fw-800 | font-weight: 800; |
| fw-900 | font-weight: 900; |
Using responsive modifiers
Using responsive breakpoints like sm:fw-*,
md:fw-*, lg:fw-*, and xxl:fw-* allows targeting specific utilities in
different viewports.
<div class="fw-500 md:fw-600 ..."></div>Using hover modifiers
Using :hover modifiers such as h:fw-* allows
you to override elements and change their values when hovering over them.
<div class="fw-500 h:fw-600 ..."></div>