TW Elements - Text. Free UI/UX design course

Text

At the end of the previous lesson, we finally managed to place the Call to action elements perfectly in the centre of our Hero Image. But the result is far from satisfactory.

First of all, you can hardly see anything here!

Step 1 - change the colour of the text

Changing the text colour in Tailwind is simple and we've talked about it in the previous lesson. To change it, for example, to white, just add the .text-white class to the element.

Then all elements that are its children will take this property. So add .text-white class to the parent element of our Call to action:

By the way - we can remove .p-10 class, which was added at the beginning of the previous lesson when the Navbar was covering Call to action. We don't need it anymore. HTML:

<!-- Call to action -->
<div class="text-white">
  <h1>I am learning Tailwind</h1>
  <h2>And what an exciting adventure it is!</h2>
</div>

Slightly better, but still the contrast against the background is too weak. We'll get to that soon. Now let's try to improve the text itself a bit more.

Step 2 - change the size of the text

By default, the typography in Tailwind has no styling, which makes headings like h1, h2. h3 etc. and paragraphs look the same.

So to make the h1 element look like the most important heading on the page, we need to use the Tailwind classes.

In Tailwind you can control the font size of any element, including headings, with the text-{size} utility. For example:

text-xs: Extra small text size
text-sm: Small text size
text-base: Base text size (approximately equivalent to the browser default)
text-lg: Large text size
text-xl: Extra-large text size
text-2xl through text-9xl: Incrementally larger text sizes

So let's add .text-5xl class to h1 element in our Call to action, and .text-2xl to the h2:

<!-- Call to action -->
<div class="text-white">
  <h1 class="text-5xl">I am learning Tailwind</h1>
  <h2 class="text-2xl">And what an exciting adventure it is!</h2>
</div>

It's taking shape, but there's still a lot of work to do.

Step 3 - change the weight of the text

You can control the font weight of any element, including headings, with the font-{weight} utility. Have a look at a list of classes you could use:

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
font-medium: Sets the font weight to 500
font-semibold: Sets the font weight to 700
font-extrabold: Sets the font weight to 800
font-black: Sets the font weight to 900

So let's add .font-semibold" class to h1 element in our Call to action, and .font-medium to the h2:

<!-- Call to action -->
<div class="text-white">
  <h1 class="text-5xl font-semibold">I am learning Tailwind</h1>
  <h2 class="text-2xl font-medium">
    And what an exciting adventure it is!
  </h2>
</div>

Better. Now let's centre it.

Step 4 - centre the text

It is true that we managed to centre the Call to action in relation to the Hero Image, but still elements such as headings or the button are pressed to the left edge of the Call to Action. It would be nice if they were fully cantered.

This is also very easy to do in Tailwind. Just add the text-center class to the Call to action element.

<!-- Call to action -->
<div class="text-center text-white">
  <h1 class="text-5xl font-semibold">I am learning Tailwind</h1>
  <h2 class="text-2xl font-medium">
    And what an exciting adventure it is!
  </h2>
</div>

Now Call to action looks much better, but there is still a lot of work ahead of us.

Note: You can also try our Typography generator.

Demo and source code for this lesson