@kematzy/tailwind

A personal collection of Tailwind CSS plugins for faster development

Available plugins:

• Colors - plugins/colors provides a range of theme colours as CSS variables together with Tailwind classes

• Alerts - plugins/alerts provides styling for alert components

• Badges - plugins/badges provides styling for badge components

• Buttons - plugins/buttons provides styling for button components

• Scrollbars - plugins/scrollbars provides better styling for scrollbars on some browsers

• Shiki - plugins/shiki provides formatting for Code Blocks in the styling of VS Code

• Tabs - plugins/tabs provides easy tab formatting support

• Tables - plugins/tables provides easy table formatting support

• Text-Columns - plugins/text-columns simple plugin that provides easy text columns support

• Debug - plugins/debug provides some media query guides based upon the browser width

More plugins will be added

Usage

Install the NPM package first of all

pnpm add -d @kematzy/tailwind

Then in top of your tailwind.config.js file extract the required plugins like this:

// import required plugins
import {
  colors,  // note colors must always be loaded first

  alerts,
  badges,
  buttons,
  scrollbars,
  shiki,
  textColumns,
  tabs,
  tables
  debug
} from '@kematzy/tailwind'

/** @type {import('tailwindcss').Config} */
module.exports = {
  // snip
}

Then add the plugin to the plugins: [] array like this.

// snip
plugins: [
  colors,

  alerts,
  badges,
  buttons,
  scrollbars,
  shiki,
  textColumns,
  tabs,
  tables,

  debug,
],
// snip