How to change the Font Size and Color of Text in Tailwind CSS ?

To change the font size and colour of text in Tailwind CSS, we can use the following Utility Classes.

Changing Font Size

Use the text-[size] classes to set the font size. Replace [size] with a size identifier like xs, sm, md, lg, xl, or numerical values.

<p class="text-lg">This text has a large font size.</p>

Changing Text Color

Use the text-[color] classes to set the text colour. Replace [color] with a colour identifier or a hexadecimal colour code.

<p class="text-blue-500">This text is in blue color.</p>

Changing Font Weight

Optionally, you can adjust the font weight using classes like font-thin, font-normal, font-semibold, font-bold, etc.

<p class="font-bold">This text is bold.</p>