Tutorials


Adjusting Font Weights in Tailwind CSS


Adjusting Font Weights in Tailwind CSS

Font weight in Tailwind CSS controls the thickness of the text. Tailwind provides a set of utilities to adjust font weight, which can help you emphasize certain text, create a hierarchy, or improve readability.

1. Font Weight Utilities

Tailwind CSS provides utility classes to adjust font weights using a range of predefined values. These utilities map to standard font-weight values, which you can apply to any text element.

Utility Classes

  • font-thin: Sets the font weight to 100.
  • font-extralight: Sets the font weight to 200.
  • font-light: Sets the font weight to 300.
  • font-normal: Sets the font weight to 400 (default).
  • font-medium: Sets the font weight to 500.
  • font-semibold: Sets the font weight to 600.
  • font-bold: Sets the font weight to 700.
  • font-extrabold: Sets the font weight to 800.
  • font-black: Sets the font weight to 900.

Font Weight Values:

  • 100: Thin
  • 200: Extra Light
  • 300: Light
  • 400: Normal
  • 500: Medium
  • 600: Semi Bold
  • 700: Bold
  • 800: Extra Bold
  • 900: Black

Example Usage:

Thin Font Weight

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Thin Font Weight Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="font-thin bg-blue-500 text-white p-4">
    This text has a thin font weight.
  </p>
</body>
</html>

Normal Font Weight

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Normal Font Weight Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="font-normal bg-red-500 text-white p-4">
    This text has a normal font weight.
  </p>
</body>
</html>

Bold Font Weight

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bold Font Weight Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="font-bold bg-green-500 text-white p-4">
    This text has a bold font weight.
  </p>
</body>
</html>

Black Font Weight

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Black Font Weight Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="font-black bg-yellow-500 text-white p-4">
    This text has a black font weight.
  </p>
</body>
</html>

2. Customizing Font Weights

You can extend or customize font weights in your tailwind.config.js file if you need specific values that are not included in the default configuration.

Configuration Example:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontWeight: {
        'extra-light': '100',
        'extra-bold': '800',
      },
    },
  },
};

Using Custom Font Weights:

Extra Light Font Weight

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Extra Light Font Weight Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="font-extra-light bg-gray-800 text-white p-4">
    This text has an extra light font weight.
  </p>
</body>
</html>

Extra Bold Font Weight

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Extra Bold Font Weight Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <p class="font-extra-bold bg-gray-900 text-white p-4">
    This text has an extra bold font weight.
  </p>
</body>
</html>

Summary

  • Font Weight Utilities:

    • font-thin: Font weight 100.
    • font-extralight: Font weight 200.
    • font-light: Font weight 300.
    • font-normal: Font weight 400 (default).
    • font-medium: Font weight 500.
    • font-semibold: Font weight 600.
    • font-bold: Font weight 700.
    • font-extrabold: Font weight 800.
    • font-black: Font weight 900.

  • Custom Font Weights:

    • Define custom values in tailwind.config.js for additional font weights.


Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about