To get started, clone the project and install the dependencies:
# Using npm
npm install
# Using Yarn
yarnAfter that, you can process the CSS by running:
# Using npm
npm run build
# Using Yarn
yarn run buildLoad up ./index.html in your browser and you're off to the races!
In plugins/object-fit/index.js you'll find an example of a plugin that adds a set of simple, non-configurable utility classes for the object-fit property.
The only option it exposes are the variants you'd like to generate (responsive, hover, focus, etc.), which you pass to the plugin as a simple array:
module.exports = {
// ...
plugins: [
// ...
require('./plugins/object-fit')(['responsive']),
],
}This is just about the simplest type of plugin you could make.
In plugins/simple-buttons/index.js you'll find an example of a plugin that adds new button component classes.
This plugin exposes quite a number of configuration options which can be passed to the plugin as an object:
module.exports = {
// ...
plugins: [
// ...
require('./plugins/simple-buttons')({
// Set some default styles for all buttons.
borderRadius: '.25rem', // Default: .25rem
fontWeight: '600', // Default: 600
lineHeight: '1.25', // Default: 1.25
fontSize: '1rem', // Default: 1rem
padding: '.5rem 1rem', // Default: .5rem 1rem
// Specify the button colors you'd like to generate.
//
// By default, buttons are generated for all of Tailwind's
// default base colors.
colors: {
// Class name: `.btn-primary`
primary: {
background: colors['blue'],
text: colors['white'],
},
// Class name: `.btn-secondary`
secondary: {
background: colors['grey'],
text: colors['black'],
},
},
// Specify additional button sizes you'd like to generate.
//
// You can override any of the default styles from above
// at any given button size.
sizes: {
// Class name: `.btn-sm`
sm: {
fontSize: '.875rem',
padding: '.5rem .75rem',
},
// Class name: `.btn-lg`
lg: {
fontSize: '1.25rem',
padding: '.75rem 1.5rem',
borderRadius: '.5rem',
}
}
}),
],
}Configuration is entirely optional; the plugin will use sane defaults based on Tailwind's default configuration if you don't provide any of your own overrides.
If you want to extend the plugin's default configuration instead of overriding it entirely, you can pass a function which accepts the default configuration, modifies it, and returns a new configuration object:
module.exports = {
// ...
plugins: [
// ...
require('./plugins/simple-buttons')(function (options) {
options.sizes = Object.assign(options.sizes, {
xl: {
fontSize: '1.5rem',
padding: '1rem 2rem',
borderRadius: '.75rem',
}
})
return options
}),
],
}Again, the sky is the limit in terms of the API a plugin exposes for configuration. You can do anything you want!