One of my goals for this year is to become more familiar with Tailwind CSS. As part of that, I am going to post a few things on the topic to the blog. This week, I intend to focus on fonts and typography.
Tailwind is known for doing everything through classes (sometimes to a point where it gets a bit ridiculous). If you want to apply a font family, you can do so by using the class “font-[name]”, like so:
See the Pen
Tailwind 1: Fonts and Typography — Font Family by Joe Steinbring (@steinbring)
on CodePen.
You can also create custom font families by modifying the theme.fontFamily element in the tailwind.config.js file.
Similar to the “font-[name]” classes, you can apply a font size by using the class “text-[name]”, like so:
See the Pen
Tailwind 1: Fonts and Typography — Font Size by Joe Steinbring (@steinbring)
on CodePen.
The exact size of the text is going to depend on what operating system the user is using and what font you are using.
Another way to play with your font is to fiddle with the font weight. Not every font is going to have a definition for every one of these weights, but by using “font-[name]” classes, you can apply a particular font weight, like so:
See the Pen
Tailwind 1: Fonts and Typography — Font Weight by Joe Steinbring (@steinbring)
on CodePen.
The next step is to look at the font style. The two options are “italic” and “not-italic”. Since everything in this system is applied with classes, the second option is obviously just there to override the first option.
See the Pen
Tailwind 1: Fonts and Typography — Font Style by Joe Steinbring (@steinbring)
on CodePen.
As you can see, each bit of text is going to end up with a heck of a lot of classes on them. It makes it pretty good for component-based architectures (like vue or react), though.
The next step is to cover which class name to use for text color. It is “text-[color]-[a number from 100 to 900]” where the number is the shade of that color. If we use the middle-of-the-road value of 500, the colors look like this:
See the Pen
Tailwind 1: Fonts and Typography — Text Color by Joe Steinbring (@steinbring)
on CodePen.
You might think that the higher the number, the stronger the color, but as you can see here …
See the Pen
Tailwind 1: Fonts and Typography — Text Color 2 by Joe Steinbring (@steinbring)
on CodePen.
… that really isn’t the case. That middle-of-the-road number is really your best bet.
If you want to change the text opacity, you can use the “text-opacity-[a number from 0 through 100]” class.
See the Pen
Tailwind 1: Fonts and Typography — Text Opacity by Joe Steinbring (@steinbring)
on CodePen.
One thing that I noticed was that it won’t allow you to define an opacity unless you also define a color.
If you want to defined text alignment, there are classes for that, as well. You can use “text-[alignment]”, like so:
See the Pen
Tailwind 1: Fonts and Typography — Text Alignment by Joe Steinbring (@steinbring)
on CodePen.
If you are interested in text decoration, there is an “underline” class to underline something, a “line-through” class to put a line through it, and a “no-underline” class to override the “underline” class. You can use it, like so:
See the Pen
Tailwind 1: Fonts and Typography — Text Decoration by Joe Steinbring (@steinbring)
on CodePen.
I am sure that I am missing something (afterall, tailwind has a lot in it), but I think that I am going to declare the topic of Tailwind fonts and Typography covered at this point.
Have a question, comment, etc? Feel free to drop a comment, below.