Typography in Tailwind

Font Family

In Tailwind CSS, you can use a set of font family utility classes to specify the font family for text elements in your HTML.

The font family utility classes follow a simple naming convention, where the first part of the class name represents the font family property (font), and the second part represents the font family itself. Here are some examples:

font-sans: sets the font family to the default sans-serif font family
font-serif: sets the font family to the default serif font family
font-mono: sets the font family to the default monospace font family
font-bold: sets the font weight to bold
font-medium: sets the font weight to medium
font-light: sets the font weight to light

You can use multiple font family utility classes to specify a fallback font family if the first font family is not available on the user's device. For example:

font-sans font-serif: sets the font family to the default sans-serif font family, but uses the default serif font family as a fallback.

You can also use custom font families by defining them in your project's CSS or through external libraries like Google Fonts, and then using the font utility class to set the font family. For example:

Then, in your HTML:

<p class="font-roboto">This text will use the Roboto font family.</p>

You can find more information on the font family utility classes and their available options in the Tailwind CSS documentation.

text-xs: sets the font size to 0.75 rem (12 pixels)
text-sm: sets the font size to 0.875 rem (14 pixels)
text-base: sets the font size to 1 rem (16 pixels)
text-lg: sets the font size to 1.125 rem (18 pixels)
text-xl: sets the font size to 1.25 rem (20 pixels)
text-2xl: sets the font size to 1.5 rem (24 pixels)

You can also use responsive font size utility classes to set different font sizes for different screen sizes. For example:

text-base sm:text-lg: sets the font size to 1 rem (16 pixels) by default, but increases it to 1.125 rem (18 pixels) on screens larger than the sm breakpoint.

You can also use relative font size utility classes to adjust the font size based on its parent element. The relative font size utility classes follow the same naming convention as the regular font size utility classes, but with a relative suffix. For example:

text-base relative: sets the font size to 1 rem (16 pixels) relative to its parent element.

You can find more information on the font size utility classes and their available options in the Tailwind CSS documentation

Font Weight

In Tailwind CSS, you can use a set of font weight utility classes to specify the weight (thickness) of text elements in your HTML.

The font weight utility classes follow a similar naming convention to the font size utility classes. The first part of the class name represents the font weight property (font), and the second part represents the weight of the text. Here are some examples:

font-thin: sets the font weight to 100
font-normal: sets the font weight to 400 (normal)
font-semibold: sets the font weight to 600 (semi-bold)
font-bold: sets the font weight to 700 (bold)

You can also use responsive font weight utility classes to set different font weights for different screen sizes. For example:

font-normal sm:font-bold: sets the font weight to 400 (normal) by default, but increases it to 700 (bold) on screens larger than the sm breakpoint.

You can find more information on the font weight utility classes and their available options in the Tailwind CSS documentation.

Text Alignment

The text alignment utility classes follow a naming convention where the first part of the class name represents the horizontal alignment (text), and the second part represents the vertical alignment (left, right, center, justify, top, middle, or bottom). Here are some examples:

text-left: aligns the text to the left of its parent element
text-center: centers the text within its parent element
text-right: aligns the text to the right of its parent element
text-justify: justifies the text within its parent element
align-top: aligns the top of the text with the top of its parent element
align-middle: centers the text vertically within its parent element
align-bottom: aligns the bottom of the text with the bottom of its parent element

You can also use responsive text alignment utility classes to set different alignments for different screen sizes. For example:

text-center sm:text-left: centers the text within its parent element by default, but aligns it to the left on screens larger than the sm breakpoint.

You can find more information on the text alignment utility classes and their available options in the Tailwind CSS documentation.

Text Spacing

In Tailwind CSS, you can use a set of letter spacing utility classes to control the spacing between characters in text elements.

The letter spacing utility classes follow a naming convention where the first part of the class name represents the property (tracking), and the second part represents the amount of letter spacing to apply. Here are some examples:

tracking-tighter: sets the letter spacing to -0.05em (tighter)
tracking-tight: sets the letter spacing to -0.025em (tight)
tracking-normal: sets the letter spacing to 0 (normal)
tracking-wide: sets the letter spacing to 0.025em (wide)
tracking-wider: sets the letter spacing to 0.05em (wider)
tracking-widest: sets the letter spacing to 0.1em (widest)

You can also use responsive letter spacing utility classes to set different letter spacing values for different screen sizes. For example:

tracking-wide sm:tracking-normal: sets the letter spacing to 0.025em (wide) by default, but sets it to 0 (normal) on screens larger than the sm breakpoint.

You can find more information on the letter spacing utility classes and their available options in the Tailwind CSS documentation.

Text Decoration

In Tailwind CSS, you can use a set of text decoration utility classes to add or remove decorations on text elements.

The text decoration utility classes follow a naming convention where the first part of the class name represents the property (underline, line-through, or no) and the second part represents the position (none, black, white, red, green, blue, yellow, indigo, purple, pink, dotted, dashed, solid, double, wavy, or thick). Here are some examples:

underline: adds a solid underline decoration to the text
line-through: adds a line through the text
no-underline: removes any underline decoration from the text
underline-dotted: adds a dotted underline decoration to the text
line-through-red: adds a red line through the text

You can also use responsive text decoration utility classes to set different decorations for different screen sizes. For example:

underline sm:no-underline: adds an underline decoration to the text by default, but removes it on screens larger than the sm breakpoint.

You can find more information on the text decoration utility classes and their available options in the Tailwind CSS documentation.

Decoration Thickness

please refer:

https://tailwindcss.com/docs/text-decoration-thickness

Decoration Style

In Tailwind CSS, you can adjust the style of the underline decoration on text elements using the border utility classes.

The border utility classes follow a naming convention where the first part of the class name represents the property (border, border-t, border-r, border-b, border-l, border-solid, border-dashed, border-dotted, border-double, or border-none) and the second part represents the width (0, 2, 4, 8, ..., or full).

To create an underline decoration with a specific style, you can use one of the border-b utility classes along with a style value that represents the desired style. For example:

htmlCopy code<p class="border-b-dashed">This text has an underline decoration with a dashed style.</p>

In this example, the border-b-dashed class adds a dashed bottom border to the text element, which creates the appearance of a dashed underline.

You can adjust the style of the underline decoration by changing the value of the style part of the utility class. For example, border-b-solid will create an underline decoration with a solid style, while border-b-dotted will create an underline decoration with a dotted style.

Text Transform

In Tailwind CSS, you can adjust the text transform property of text elements using the text-[value] utility classes.

The text-[value] classes follow a naming convention where the [value] part represents the desired value for the text-transform property (uppercase, lowercase, capitalize, normal-case, or none).

Here's an example of using the text-uppercase class to make text all uppercase:

htmlCopy code<p class="text-uppercase">This text is all uppercase.</p>

In this example, the text-uppercase class sets the text-transform property to uppercase, which makes all the letters in the text element uppercase.

You can adjust the text transform of the text element by changing the value of the [value] part of the utility class. For example, text-lowercase will make all the letters lowercase, text-capitalize will capitalize the first letter of each word, text-normal-case will set the text to normal case, and text-none will remove any text transform applied.