Tailwind typography plugin, prose class

Introduction to TailwindCSS

TailwindCSS has revolutionized the approach to CSS frameworks. You could say it’s flipped the paradigm, making you feel almost like you’re using inline CSS when working with it.

In my opinion, it’s hands down the most convenient and enjoyable framework for developers to use. It’s also highly optimized and fast, which means it doesn’t hurt your website’s performance. In fact, switching to TailwindCSS from another heavy framework can actually improve your SEO.

The Hidden Gem: TailwindCSS Plugins

Among TailwindCSS’s numerous advantages is its support for plugins. These include both community plugins and native/core plugins from Tailwind. This incredible feature often flies under the radar for many developers.

Plugins have a wide range of interesting applications. In this post, we’ll focus on one of them - the Typography plugin.

Introducing the Typography Plugin

The Typography plugin is an excellent solution for all kinds of headless applications and those that use content pulled from external files like markdown, external CMS systems, or other HTML content from APIs.

The Challenge with Utility-First Frameworks

Since TailwindCSS is a ‘utility-first’ framework, one of its great advantages is its modularity and portability. However, this can also be a drawback, as it doesn’t style default HTML tags like h1, h2, a, p, etc. by default.

This means that content from external sources (like for blogs, news, etc.) isn’t styled automatically. Developers often resort to using ‘traditional’ CSS or ‘scoped’ styles for such content.

How the Typography Plugin Solves This

The ‘typography’ plugin comes to the rescue here, allowing us to apply TailwindCSS classes to sources we don’t have direct control over.

After installing the typography plugin (which is very simple), we get access to a new ‘prose’ class. With this, we can define styles for HTML elements we can’t directly manipulate.

Using the Typography Plugin

Here’s an example of how to use the Typography plugin:

<article class="prose lg:prose-xl px-4 md:px-0
    dark:prose-invert
    prose-h1:font-bold prose-h1:text-2xl
    prose-h2:font-bold prose-h2:text-xl
    prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl
    prose-headings:bold prose-headings:py-4
    prose-p:text-lg
    w-full
    mx-auto
    py-6
"> {CMS_Content} </article>

This is a very convenient and elegant solution.

The Magic of the ‘Prose’ Class

Besides the prose- element classes, the typography plugin also has the prose class and its variants like prose-xl, prose-lg, etc.

This class is specially designed for content like blogs, news, or longer articles. It ensures that the wrapped text is at the most comfortable width for reading.

The Science Behind Readability

Studies have shown that the most optimal and comfortable line length for people to read is between 50-75 characters. You can read more about this on the Baymard Institute website.

The ‘prose’ classes are based on this length. Personally, I’m a big fan of this class and generally formatting blog or article content to fit within the 50-70 character range, as it really is more comfortable and easier to read.

Conclusion

I highly recommend everyone to familiarize themselves with both the Typography plugin and the very well-thought-out classes it contains. It’s a powerful tool that can significantly enhance your web development workflow, especially when dealing with content-heavy websites.