6 tailwindcss plugins to make your web apps better
Tags: webdev, tailwindcss, design, react
Published: 2023-03-08 20:33:10

**It's remarkable.** Almost every new website I find on the web is made with [tailwindcss](tailwindcss.com). 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](https://github.com/tailwindlabs/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](https://tailwindcss.com/docs/typography-plugin)

## 2. [@kamona/tailwindcss-perspective](https://github.com/Kamona-WD/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 of tailwind-css perspective](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lc85evzc93wkq2y8aaj4.png)
(Screenshot taken from [https://kamona-wd.github.io/tailwindcss-perspective/](https://kamona-wd.github.io/tailwindcss-perspective/))

## 3. [tailwindcss-no-scrollbar](https://github.com/redwebcreation/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](https://github.com/ecklf/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.

```javascript
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](https://github.com/ecklf/tailwindcss-radix)

## 5. [tailwindcss-unsplash](https://github.com/shorwood/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:

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

![Unsplash background image in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2oqerdomk5mpt2gogbs.png)

Using this plugin can boost your development speed by a lot. 
for full documentation click [here](https://github.com/shorwood/tailwindcss-unsplash)

## 6. [@downwindcss/easings](https://github.com/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.

![Easing functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3l0m6fmrs64sx0pqwn7.png)

Screenshot from [https://easings.net/](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 ❤️