Tailwind is a utility-first CSS framework that provides a set of pre-defined CSS classes, making it easy to create responsive and customizable UI components. Tailwind Packages are pre-built sets of styles and components that are designed to work with Tailwind CSS, making it easier to build complex interfaces quickly.
Tailwind Packages are created by the Tailwind community and are available for free on platforms like GitHub and NPM. There are packages for everything from UI components like buttons and modals to entire design systems that provide a cohesive set of styles and components for a website or application.
Using Tailwind Packages can save developers a lot of time and effort, as they don't have to create styles and components from scratch. Additionally, Tailwind Packages can help ensure consistency and accessibility across a project, as they are designed to work together seamlessly.
In summary, Tailwind is a CSS framework that provides pre-defined CSS classes, and Tailwind Packages are pre-built sets of styles and components that are designed to work with Tailwind. Using Tailwind Packages can save developers time, effort, and help ensure consistency and accessibility across a project.
In this post, we compiled a list of the best open-source TailwindCSS plugins, that you can use directly in your project.
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.
A Tailwind CSS plugin that gives you an out-of-the-box, customizable, override dark mode.
Nightwind uses the existing Tailwind color palette and your own custom colors to automatically generate the dark mode version of the Tailwind color classes you use.
For example, whenever you use a class like bg-red-600 it gets automatically switched to bg-red-300 in dark mode.
Nightwind relies on a fixed 'nightwind' class to manage transitions, and a toggled 'dark' class applied to a top level element in the DOM, typically the root element.
Kutty is a tailwind plugin for building web applications. It has a set of accessible and reusable components that are commonly used in web applications.
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
Based on the Tailwind CSS utility classes, Preline UI's prebuilt components and UI elements help you quickly design and customize responsive mobile-first websites with the components a website needs, including buttons, dropdowns, navigation bars, modals, and more.
Preline's components are grouped by visual usability criteria (components, navigation, forms, etc.) and styled directly on top of Tailwind CSS, making them easy to extend and customize. This is a lifesaver for developers looking to create a unique and eye-catching design system without the hassle of creating each component by hand.
A super tiny tailwind plugin that enables the use of the Nord color palette.
Made this mainly for myself, as I kept copying the Nord colours over manually. But hopefully it can save someone else 5 mins at the start of a project!
This project is a series of plugins to enable/encourage systematized web design/development and some other useful utility classes.
AREA 17 strongly believes in design systems and then using these systems to build products for both ourselves and our clients. Tailwind is thus a natural fit for us, but we wanted more "system" to the utilities to tie closer to our design methodology.
This package is used to integrate tailwindcss and StencilJS. This plugin for Stencil is specifically focused on the integration between tailwindcss v3.x and the Stencil build. While tailwindcss can be integrated into a Stencil build, this plugin aims to ease the integration, while providing an optimised inclusion of styles across the shadow DOM. For tailwind v2 support, please see the v0.6+ versions and branch.
This plugin also aims to allow users to make use of all the tailwindcss classes and postcss plugins like @apply. In such both styles of tailwindcss usage can be used in a single component. This plugin also aims to allow the use of object initialisers to conditionally set styles.
This plugin adds some filter utilities to your configuration. Based on the default colors this plugin renders the following utilities for you:
drop-shadow
drop-shadow-{SIZE}
sizex: sm, md, lg, xl and 2xl
drop-shadow-{COLOR}-{INDEX}
Tailwind CSS default colors
backdrop-blur
Sizes from 1 - 5
bg-blur
Sizes from 1 - 5
blur
Sizes from 1 - 5
The drop shadow utility uses CSS custom properties to make it easier to define your favorite style. You can find a list of all generated utilities in the list of all utilities.
A plugin that provides a composable API for giving elements a fixed aspect ratio.
Tailwind CSS v3.0 shipped with native aspect-ratio support, and while these new utilities are great, the aspect-ratio property isn't supported in Safari 14, which still has significant global usage. If you need to support Safari 14, this plugin is still the best way to do that.
TailwindCSS Plugin to integrate with Inter Typeface from Rasmus Andersson @rsms. It adds .font-inter class to apply Inter font family, adjusts letter spacing for each font size according to the Dynamic Metrics and allows to toggle font feature settings. Optionally adds @font-face from https://rsms.me/inter/inter.css.
In photography, a scrim is something that softens light — from the sun, or a flash — and is typically a piece of fabric, paper or acrylic stretched across a frame.
In UX, a scrim is a design technique (a gradient or overlay) used to make text more legible when overlaid on an image. The kind of visual treatment that is becoming increasingly common in card-based design.
A typical scrim is a neutral gradient that starts about half-way down an image and increases to 30%-40% opacity, creating a subtle darkening effect that provides enough contrast for white text to be legible.
The default shadow plugin for TailwindCSS doesn't support colored shadows, which is a trend now. This can be customized, of course, but it is still overwhelming to get colored shadows for, e.g.: 10 colors.
WARNING: This generates a lot of styles, so it is recommended that you choose only the colors that are necessary, and/or enable purging.
A plugin that provides utilities for animation property. Not only does the plugin provide the usual animation properties, these also support dynamic writing using JIT mode, even you can add new properties by using configuration
TailwindCSS utility to override foreground fill color of text content, is especially useful to style autocompleted form fields with tailwindcss-autofill because color won't work.
This plugin generates a set of css classes to add fixed margins to container children, except last one, to spread content in a consistent manner.
This can be useful when you want to spread items in the container with a set interval but don't want to add margins to every child manually and remove it from last child to make separation look proper.
Responsive embed component for tailwindcss, based on bootstrap's responsive embed which is itself credited to Nicolas Gallagher and SUIT CSS. This will add the .embed-responsive and .embed-responsive-item components to your css.
This plugin relies on webdna/tailwindcss-aspect-ratio to create the aspect ratio utility classes.
✂️ Tailwind CSS utility classes for trimming whitespace above & below capital letters. A proposed CSS property to remove the extra space from text bounding boxes, which affects optical alignment. This article from Microsoft Design outlines the problem and how the proposed solution works.
Internationalization in semitic languages needs more than just translating texts, you would also need to mirror the layout horizontally. This can be done by adding dir="rtl" the the layout body tag, but this is propably not be enough and you will need to create a different style for RTL.
With tailwindcss-rtl plugin you will be able to support both RTL and LTR in the same style.
3D Plugin for Tailwind CSS adds additional transform utilities and animations which can help you to add three dimensional styling to your interface.
By default TailwindCSS adds transforms in two dimensions ("x" and "y" axis only), so scale, rotate, and translate are flat transformations. This plugin adds support for the "z" axis and implements extensions to the bounce and spin animations to allow them to operate in multiple directions.
Hamza Mousa
tailwindlabs
