6 tailwindcss plugins to make your web apps better

It's remarkable. Almost every new website I find on the web is made with tailwindcss. And that is for a good reason. The most popular css framework of the modern web provides almost everything you need to craft beautiful and well designed websites just out of the box.

For most use cases the base functions provided by tailwindcss suffice, however, in some cases they need to be extended. Thankfully, tailwindcss provides an easy way to add plugins on top of it. In the following I will introduce 7 plugins that can help improve your user experience and boost your web apps.

First, let's start with the one of the official tailwindcss plugins:

1. @tailwindcss/typography

This plugin provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS. It allows you to define on of five different gray scales, different sizing scales and element specific modifiers. This plugin is especially handy when working with content-heavy sites as for example your personal blog.

see full documentation here

2. @kamona/tailwindcss-perspective

This plugin adds perspective utilities that can be used for 3D CSS transforms and extends the rotate utility classes, so you make stuff like this:

(Screenshot taken from https://kamona-wd.github.io/tailwindcss-perspective/)

3. tailwindcss-no-scrollbar

With this plugin you can remove a scrollbar from the screen. This especially comes in handy for pages where you are using scroll animations and don't want the scrollbar to be visible.

4. tailwindcss-radix

The functionalities are provided by HeadlessUI by default, however for React users relying on RadixUI, this plugin gives enables developers to define variants based on radix states.

This can for example be used to use different stylings for the Radix ContextMenu component when either being disabled or not.

import React from "react";
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";

const ContextMenu = () => {
  return (
    // --snip--
    <ContextMenuPrimitive.Item
      disabled
      className="radix-disabled:opacity-50 radix-disabled:cursor-not-allowed"
    >
      Item
    </ContextMenuPrimitive.Item>
    // --snip--
  );
};

For full documentation click here

5. tailwindcss-unsplash

This plugin uses the Unsplash API to fetch images that are then used as a background image. The plugin allows you to fetch an Unsplash image by it's ID and also choose for a resolution, such that the following code renders the image below:

<div>
    <span>Unsplash Background-Image</span>
    <div class="bg-unsplash-[SBVWM7Ysmes/lg] bg-cover h-96 w-96 "></div>
</div>

Using this plugin can boost your development speed by a lot.
for full documentation click here

6. @downwindcss/easings

Using easings is essential to make your animations look good and I think every tailwind user knows the timing functions ease-in, ease-out, ease-linear and ease-in-out, but sometimes these easings are not exactly what you need.

Tailwindcss also provides the functionality to define your custom timing functions by using the css property cubic-bezier(), however by using this plugin, you can choose from a large set of timing functions.

Screenshot from https://easings.net/

Alright, that's it!

I think, these plugins can really help you take your web apps to the next level. But, what do you think? Are there any plugins missing from that list. Do you even use plugins for tailwindcss? I would be interested to hear from you in the comments!

❤️ Thanks for reading ❤️