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>
Contact Us