@viget/tailwindcss-plugins

Tailwind CSS Plugins

This plugin wraps up a collection of other plugins we've written for Tailwind CSS.

Plugins include:

• animate
• parent-expanded
• parent-open
• rect
• sr
• text-underline-position

Utilities include:

• hex alpha reference
• helper functions

Installation

Add @viget/tailwindcss-plugins to devDependencies in package.json.

yarn add -D @viget/tailwindcss-plugins

Usage

Simply require the plugins or utilities in your tailwindcss.config.js file, and follow the usage instructions in each plugin’s README.

// utilities
const a = require('@viget/tailwindcss-plugins/utilities/alpha')
const { em, rem, remPair, pxPair } = require('@viget/tailwindcss-plugins/utilities/fns')
const plugins = require('@viget/tailwindcss-plugins')

// plugins
plugins: [
  plugins.rect,
  plugins.sr,
  // ...
],

Notes

There are some additional plugin examples included in this repository’s examples directory. These are not registerable in your Tailwind config. The reasons for this are that these represent plugins which:

• could have a number of different outputs that require varying approaches
• have a highly specific project use case
• are an alternate approach to one of the registerable plugins

For example, heading components could be done any number of ways. They could be simple or complex, fixed or responsive, wrapped for rich text or classnames only. For this reason, we've included several examples of these. If you need one of these plugins, it is recommended to copy and paste the plugin code into a custom plugin for your project.

Visit code.viget.com to see more projects from Viget.

Changelog

[3.0.0] - 06-13-2022

Added

• Added the text-underline-position plugin

Removed

• Removed animation plugin
• Removed background plugin
• Removed blend plugin
• Removed filter plugin
• Removed flex-basis plugin
• Removed gradient plugin

Changed

• Updated Tailwind to v3
• Updated tests for Tailwind v3
• Updated dependencies

Deprecated

• n/a