Font Weight
Controls the font weight of an element.
| Class | Properties |
|---|---|
| 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 breakpoints
Using responsive breakpoints like sm:fw-*, md:fw-*, lg:fw-*, and xxl:fw-* allows targeting specific utilities in different viewports.
<div class="fw-400 md:fw-600 ..."></div>Using variants
Using :hover variants such as h:fw-* allows you to override elements and change their values when hovering over them.
<div class="fw-400 h:fw-600 ..."></div>