Font style & typography in Tailwindcss

Font style & typography in Tailwindcss

When it comes about font-style and typography, Tailwindcss has a bunch of options we can use. And instead of writing a long article on how it works, I’d like to give you my opinion on these classes.

The best and the most comprehensible system to apply style

Tailwindcss provides to us many classes we can use to change our font sizes. By using 'text-' we can add sizes, style, colors but we can also use 'decoration-' to add some decoration. I've learned CSS then quickly Bootstrap in my developer's career. And i'd like to say that using Tailwindcss system is way more efficient and easy to understand than leading classes of Bootstrap. Maybe it's Tailwindcss documentation's quality but I can garantee you that when you start with Tailwindcss, all others solutions looks like a downgrade.

Customization: the force of Tailwindcss

Of course, we can customize fonts & typographies in tailwind.config.js — and in a previous article, I've explained that Tailwindcss's force is its customization system. Concerning fonts, as front-end developers, we are always looking to customize font families, colors and font sizes from the start of a project. I got to admit that at first, I wasn't confident about using Tailwindcss. Even if advantages were clear, it looked very complicated to me — and i've mentionned that in several of my videos. Nowadays, I've another point of view on its learning curve: Tailwindcss is clearly the most powerful CSS library right now on the market. But its not made for everybody.

A framework for (un)experienced developers

I would recommend to any junior to deep dive immediately in Tailwindcss. Even if this advice would throw them into a painful path to become a Front-End developer — especially if they don't masterize yet CSS. But we got to be honest on this subject: you don't need to masterize CSS to become a Front-End developer. Moreover, how many Front-End developer really know CSS? Basic knowledge of CSS allows you to code an app and add some styling to it. Don't get me wrong: I am not saying you shouldn't learn CSS. What I am saying is: when a junior starts his career, he doesn't necessarely focus on CSS. This is where Tailwindcss is really powerful — it has been build to be accessible right away with its clear documentation... Only if you already handle reading documentation — which is, in my opinion, what you should learn first.

Guillaume