From the course: Tailwind CSS 4 Essential Training

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

Applying text and font styles

Applying text and font styles - Tailwind CSS Tutorial

From the course: Tailwind CSS 4 Essential Training

Start my 1-month free trial Buy for my team

Applying text and font styles

“

- [Instructor] Let's style this heading first by making it bold and giving it a larger font size. The font utility classes can be used to set the font weight. As you can see in these auto suggestions. When you move your arrows down and up, you can see the exact CSS rule applied on the left here. Sometimes you might see variables it might not be very helpful, but otherwise you can make out what exactly is the CSS rule applied. So that'll help you decide which utility class to use. You can see these auto suggestions because of the VS Code extension Tailwind SS IntelliSense that is already installed in this code space. All right, so to make our font bold, let's use the class font bold and next, the text utilities give us some text sizing classes. As you can see, these class names are very readable. We have text-2xl, 3xl, 4xl and so on up to text-9xl and that's not it. We have text-xs for very small text and then text-sm text base, which is the normal font size. And then there is text-lg…

Contents