Tailwind CSS tutorial #19: Font Weight
Tags: tutorial, css, tailwindcss, webdev
Published: 2022-11-21 15:43:14

In the article, we will go into detail on how to use `font-weight`.

## Font Weight
**Format**
> `font-{weight}`

| Alignment | Tailwind Class | CSS Property |
| ------ | ------ | ------ |
|[font-thin](#font-thin) | `font-thin` | `font-weight: 100;`|
|[font-extralight](#font-extralight) | `font-extralight` | `font-weight: 200;`|
|[font-light](#font-light) | `font-light` | `font-weight: 300;`|
|[font-normal](#font-normal) | `font-normal` | `font-weight: 400;`|
|[font-medium](#font-medium) | `font-medium` | `font-weight: 500;`|
|[font-semibold](#font-semibold) | `font-semibold` | `font-weight: 600;`|
|[font-bold](#font-bold) | `font-bold` | `font-weight: 700;`|
|[Font-extrabold](#font-extrabold) | `font-extrabold` | `font-weight: 800;`|
|[Font-black](#font-black) | `font-bold` | `font-weight: 900;`|

## **Setting the font weight** 
Control the font weight of an element using the font-{weight} utilities.

## **Code**
```html
<ul class="container mx-auto leading-none divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">
  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="font-light text-5xl align-middle mb-2">Hello World</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">font-light	</div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="font-normal text-5xl align-middle mb-2">Hello World</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">font-normal	</div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="font-medium text-5xl align-middle mb-2">Hello World</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">font-medium	</div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="font-semibold text-5xl align-middle mb-2">Hello World</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">font-semibold</div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="font-bold text-5xl align-middle mb-2">Hello World</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">font-bold	</div>
  </li>
</ul>
```
**Full code:**
The overall code will be attached to [repo ](https://github.com/codewithshubhi/learn-tailwind-css/blob/main/font%20weight.html)link.

**Overall Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erj1cnrbrzhjgelh0jou.png)

**Resources:**
[tailwind.css](https://tailwindcss.com/docs)

Thank you for reading :), To learn more, check out my blogs on [Flex Direction](https://dev.to/shubhicodes/tailwind-css-tutorial-13-flex-direction-i8j), [Hackathons](https://dev.to/shubhicodes/all-about-hackathons-how-to-find-participate-win-42kk) and [Flex Wrap](https://dev.to/shubhicodes/tailwind-css-tutorial-14-flex-wrap-kee).
If you liked this article, consider following me on [Dev.to](https://dev.to/shubhicodes) for my latest publications. You can reach me on [Twitter](https://twitter.com/heyShubhi).

Keep learning! Keep coding!! 💛