@kematzy/tailwind v0.0.6
@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 componentsBadges -
plugins/badges
provides styling for badge componentsButtons -
plugins/buttons
provides styling for button componentsScrollbars -
plugins/scrollbars
provides better styling for scrollbars on some browsersShiki -
plugins/shiki
provides formatting for Code Blocks in the styling of VS CodeTabs -
plugins/tabs
provides easy tab formatting supportTables -
plugins/tables
provides easy table formatting supportText-Columns -
plugins/text-columns
simple plugin that provides easy text columns supportDebug -
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