Top Tailwind CSS Plugins and Resources

Posted on: August 01 2024

By Dave Becker

Hero image for Top Tailwind CSS Plugins and Resources

Available Tailwind CSS Plugins

Here's some useful plugins that are available to enhance your Tailwind CSS development.

These are also a great way to learn about Tailwind plugins and how to even write your own custom plugins.

Filter Plugins

Aspect Ratio (Official)

Tailwind Labs

A plugin to give elements a fixed aspect ratio

Forms (Official)

Tailwind Labs

A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.

Forms (Official)

Tailwind Labs

A plugin that provides utilities for visually truncating text after a fixed number of lines.

Typography (Official)

Tailwind Labs

A plugin that provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML

Sam Bauers

Tailwind CSS plugin to adds additional transform utilities and animations to add 3D styling

Jack Pallot

Tailwind CSS plugin to add additional functionality to help improve accessibility

adfdev

Tailwind CSS plugin to add alpha support for background color, text and borders

Benoît Rouleau

Tailwind CSS plugin to generate animation utilities

webdna

Tailwind CSS plugin to generate aspect ratio utilities

Background Extended

Nestor Vera

Tailwind CSS plugin to generate missing background utilities

Nestor Vera

Tailwind CSS plugin to generate blend mode utilities

Border Gradients

Cosmin Popovici

Tailwind CSS plugin to generate border gradients utilities

Brandon Nifong

Tailwind CSS plugin to generate individual border side style classes

Krishan König

Tailwind CSS plugin to generates classes for coloring carets

Benoît Rouleau

Tailwind CSS plugin to target child elements as well as the first and the last child

Mert Aşan

Easily create css variables without the need for a css file

Custom Properties

Marc Reichel

A Tailwind CSS plugin that exports theme colors as css custom properties.

Custom Utilities

Jacob Babich

Tailwind CSS plugin to write configuration for your own custom utility

Chance Arthur

Tailwind CSS plugin to create Dark Mode variants

Joren Van Hee

A Tailwind CSS component that shows the currently active screen (responsive breakpoint)

Ron Melkhior

Tailwind CSS plugin to adds direction (LTR, RTL) variants

Directions (rtl,ltr)

Ahmed Kamel

Simple plugin to add directions variants to tailwindcss

Joonas Kykkänen

Tailwind CSS plugin to generate Material Components elevation

Benoît Rouleau

Tailwind CSS plugin to generate filter utilities

Markus A. Wolf

Tailwind CSS plugin to generate some filter utilities for blurs and coloured drop shadows

Fluid Container

Benoît Rouleau

Tailwind CSS plugin to add a fluid container component and related utility classes

David Hellmann

A plugin that makes the use of Fluid Type a breeze.

Benoît Rouleau

Tailwind CSS plugin to generate gap utilities

Gradient Backgrounds

Benoît Rouleau

Tailwind CSS plugin to generate gradient background utilities

Tailwind Border Gradients

cossssmin

This plugin is based on the tailwindcss-gradients plugin.

Chris Rowe

Tailwind CSS plugin to add grid support

Image Rendering

Nestor Vera

Tailwind CSS plugin to generate image rendering utilities

Interaction Variants

Benoît Rouleau

Tailwind CSS plugin to generate missing interaction variants utilities

MathGeniusJodie

Leading trim utility classes and polyfill for Tailwind CSS

Steve Cochrane

Tailwind CSS plugin to add logical properties for working with non-LTR (left-to-right) languages

Logical Properties

Steve Cochrane

Utility classes for CSS Logical Properties and Values (for easier development when working with non-LTR (left-to-right) languages)

Nestor Vera

Tailwind CSS plugin to generate multi column utilities

Jacopo Ranalli

Tailwind CSS plugin to generate an automatic, customisable, overridable dark mode

Kamona-WD

A little bit of utility classes related to css 3d transform

Phoenix LiveView Events

Oliver Marriott

Variants for Phoenix LiveView's phx-*-loading events/css-classes.

Pseudo Selector

Brandon Nifong

Tailwind CSS plugin to generate pseudo selector variants

Eugene Pro

Tailwind CSS plugin to convert px-to-rem

Gavin Joyce

Tailwind CSS plugin to provides a helpful ? dev time utility to highlight the element

RTL (Right to Left)

20lives

Add support for multilingual bidirectional layouts

Enzo Innocenzi

Tailwind CSS plugin adds CSS Scroll Snap utilities to Tailwind CSS

Vaggelis Yfantis

A Tailwind CSS plugin that exports theme colors for shadow colours

Daniel Crewdson

A super tiny tailwind plugin that enables the use of the Nord colour palette

Text Decoration Color

Ahmed Awais

Tailwind CSS plugin to generate classes for anchor link using text-decoration-color:

iunteq

Tailwind CSS plugin to generate classes for adding text shadows to text elements

Jake Navith

Tailwind CSS plugin for variants for theming beyond just light and dark modes without needing custom properties

Enzo Innocenzi

Tailwind CSS plugin to support multiple themes in an application

Steadfast Collective

Tailwind CSS plugin to generate touch variants

Benoît Rouleau

Tailwind CSS plugin to generate transform utilities

Benoît Rouleau

Tailwind CSS plugin to generate transition utilities

Benoît Rouleau

Tailwind CSS plugin to generate custom triangle components

Benoît Rouleau

Tailwind CSS plugin to generate typography utilities

Typography (Official)

Tailwind Labs

A plugin that 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).

Manish Chiniwalar

Tailwind CSS plugin to inject Typography.js styles

Josh Hartshorne

Underline utilities are gaining better support. This plugin adds custom underline utilities, such as colour, offset, style, etc.

Simon J

A plugin that creates lower-specificity utility classes that can be used to create components with overridable defaults.

Visually Hidden

webdna

Tailwind CSS plugin to hide only visually, but have it available for screen readers

Kyle

Square aspect ratio size utility classes

Tailwind Theming

innocenzi

A Tailwind CSS plugin made to handle multiple themes in an application. Suports theme switching and dark themes.

Tailwind CSS Spinner

joshmanders

Spinner utility for Tailwind CSS

Tailwind Responsive Embed

drdogbot7 Jeremy Mullis

Responsive embed is based on bootstrap's responsive embed and will add the .embed-responsive and .embed-responsive-item components to your css.

adevade

This plugin generates classes for ordering flexbox and grid items using order: #;.

Tailwind Hero Patterns

AndreaMinato

Generates background Hero patterns that can be styled by utility classes.

Truncate Multiline

jhta

This plugin will generate utility classes from your configuration file to truncate your text to a given number of lines.

buffalom

Show Tailwind CSS Breakpoints in Nuxtjs when using the tailwindcss-module

Tailwind Tooltip Arrow After

gvital3230

Tailwind Plugin generating triangle arrows for tooltip-ish divs

Available Tailwind CSS Resources

Here's some useful resources for Tailwind CSS development.

Filter Resources

Tailwind Cheat Sheet

NerdCave

Cheat sheet to learn Tailwind CSS quickly. Browse and search all Tailwind utility classes or CSS properties on one page.

Tailwind CSS Cheat Sheet

Flowbite

Use this interactive tool as a cheat sheet to view and search for all the class names from Tailwind CSS, the world's most popular utility-first CSS framework.

umeshmk

A Tailwind CSS Cheat Sheet

Shades Generator for Tailwind CSS

javisperez

Color shades generator for Tailwind CSS. Generate the Tailwind CSS config entries for a given color(s) and automatically generate the shades.

abdumu

This tool can convert Your CSS framework (currently Bootstrap) classes in HTML/PHP (any of your choice) files to equivalent Tailwind CSS classes.

Topics

SEO Linux Security SSH Email Marketing More posts...

Related Posts

Hero image for Best Practices for Typography in Tailwind CSS

Posted on: August 01 2024

By Dave Becker

Best Practices for Typography in Tailwind CSS

Hero image for How to Overlay Text on an Image Using Tailwind CSS

Posted on: July 20 2024

By Dave Becker

How to Overlay Text on an Image Using Tailwind CSS

Hero image for A Visual Guide for Responsive Design Using Tailwind CSS?

Posted on: July 19 2024

By Dave Becker

A Visual Guide for Responsive Design Using Tailwind CSS?

Hero image for How To Customize Flowbite React Components

Posted on: July 03 2024

By Dave Becker

How To Customize Flowbite React Components

Hero image for Next.js Layouts: Maximum Flexibility

Posted on: July 06 2024

By Dave Becker

Next.js Layouts: Maximum Flexibility

Hero image for Boost Payload CMS with Search: Step-by-Step Tutorial

Posted on: August 11 2025

By Dave Becker

Boost Payload CMS with Search: Step-by-Step Tutorial

Hero image for Next.js Environment Variables: Quick Start Guide

Posted on: September 01 2025

By Dave Becker

Next.js Environment Variables: Quick Start Guide

Hero image for Document Nesting With Payload's Nested Docs Plugin

Posted on: April 04 2025

By Dave Becker

Document Nesting With Payload's Nested Docs Plugin