Three Tailwind plugins I immediately add to every project

If you’re a web developer, there’s a non-trivial chance you’ve already heard about Tailwind — a new CSS framework based on the concept of utility stylesheet classes. The main idea behind it is that instead of having to come up with class names, dealing with selector specificity and writing repetitive CSS, you can use a predefined (but configurable) list of classes that you can apply directly to your markup.

Here is a sample of some of the most common classes I’ve been recently using:

• flex makes a current element a flex box container (equivalent of display: flex in CSS)
• m-4 applies margin of 1rem (you can also use other values from the list which all scale proportionately, e.g., 2 corresponds to 0.5rem and 8 is 2rem)
• font-lg will increase the font size to 1.125rem and leading (line height) to 1.75rem
• focus:outline-none removes an outline from the element but only for :focus modifier (equivalent of element:focus { outline: none; })

Not having to deal with CSS directly as a big productivity boost when prototyping but also works perfectly as part of the development workflow when working on production projects. Since TailwindCSS compiles your stylesheets using PostCSS, you can create abstractions easily using @apply directive:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
}

Project documentation is very detailed, so I encourage you to check it out at https://tailwindcss.com/docs.

One of the benefits of TailwindCSS that not everyone knows about is its plugin ecosystem

There are several plugins that I use for almost every project and here are three of my favourites. They are all official from the Tailwind Labs (company behind TailwindCSS) which ensures their quality. There’s also plenty of unofficial plugins which you may find useful, depending on the needs of your project. You can find those on different awesome-tailwindcss repositories on GitHub.

Typography

One thing I’ve always dreaded when working on client projects was having to set up a typography style sheets for articles, blog posts and general content of the website. If the end-users have access to a WYSIWYG editor (like the one in WordPress), they’ll probably at some point end up adding elements and styling that will break the carefully built page layout and looks.

The typography plugin mostly solves that problem. It works by adding very sensible and pretty defaults to the typography-related HTML elements wrapped in a .prose class. This means that any HTML content (e.g., generated from markdown) will already have styled headings, paragraphs, and lists.

There is also a text size modifier, similar to how font sizes work in Tailwind. Just remember to still keep the prose class as well, like this:

<article class="prose lg:prose-lg">
  <h1>...</h1>

  <p>...</p>
</article>

You can find the plugin on GitHub: tailwindlabs/tailwindcss-typography

Aspect-ratio

While almost anyone familiar with TailwindCSS will know about the typography plugin, aspect-ratio is used much less frequently. I find it however indispensable for the projects that I work on.

What the aspect-ratio plugin does is, like the name suggests, enforces a specific aspect ratio of the element inside it. I use it in two different ways.

Firstly, it can be used to set the aspect ratio of embedded videos, something that we all used to do using an ugly padding-bottom trick. (Which is exactly how this plugin does that but abstracts that away using a simple API)

<div class="aspect-w-16 aspect-h-9">
  <iframe src="https://www.youtube.com/embed/..." />
</div>

Another use case requires a little more markup but solves a very common and annoying problem of ensuring an aspect ratio and cropping of images. Here’s a markup example that should be self-explanatory:

<div class="relative aspect-w-4 aspect-h-3">
  <div class="absolute inset-0">
    <img src="..." alt="..." class="object-cover w-full h-full" />
  </div>
</div>

You can find the plugin on GitHub: tailwindlabs/tailwindcss-aspect-ratio

Line-clamp

The final TailwindCSS plugin that I always keep in my toolkit (or rather plugins array in my tailwind.config.js) is a line-clamp utility. I often use it along with aspect-ratio to build image and text tiles that need to maintain the same size, e.g., in the blog post grid. The aspect-ratio plugin ensures the images are the same size (since it enforces the aspect ratio of the image and each column in the grid has the same width) but we can never assume what the length of the title or description will be and how many lines it will wrap to on different browser sizes.

The plugin exposes a line-clamp-{n} classes, where n corresponds to how many lines of text the browser should render before trimming the content. So if we want to only show a maximum of 2 lines, we would apply it like this:

<div class="line-clamp-2">...</div>

It also comes with a line-clamp-none class which disables the functionality and can be useful if we want to avoid trimming on bigger breakpoints.

You can find the plugin on GitHub: tailwindlabs/tailwindcss-line-clamp

Bonus: Just-in-time compiler will take TailwindCSS to the next level

A few days ago Adam Wathan and the guys at Tailwind Labs have announced the launch of a just-in-time compiler for Tailwind. There are several issues with Tailwind currently that JIT will solve:

• builds can take a lot of time (Tailwind claims incremental rebuilds with JIT as fast as 3ms)
• you need to enable variants (like active or disabled) manually in tailwind.config.js
• DevTools performance can be appalling due to the generated CSS file size in dev (before purging, which is done for production builds)
• you can’t use non-standard classes in the markup and need to pollute your CSS even for one-off cases (JIT enables things like mx-[33px])

While I can’t use it at StackScout yet because of its current limitations, (like lack of support for recursive @apply which we make use of) it feels like a massive improvement in developer productivity and I can’t wait for the issues to be addressed and JIT integrated into Tailwind proper.

I encourage you to check out the documentation and try it out.

PS. If you liked this article, please share to spread the word.