tailwindcss-plugin-starter
tailwindcss-plugin-starter copied to clipboard
A boilerplate for Tailwind CSS plugins
About
This is a starter project for creating Tailwind CSS plugins.
Features
- Includes examples for:
-
addBase
-
addUtilities
-
matchUtilities
-
addComponents
-
addVariant
- exposing options
- providing default values
-
- Tests with
Vitest
- Coverage with
v8
- Releases with
np
Getting started
Clone the project from GitHub:
git clone https://github.com/maizzle/tailwindcss-plugin-starter.git
Install dependencies:
cd tailwindcss-plugin-starter
npm install
Usage
Write your plugin in the src/index.js
.
Use the provided examples or see the Tailwind CSS plugin documentation.
Testing
Add tests in the src/index.test.js
file or create your own test files.
Use npm run dev
to start the test runner in watch mode.
Use npm test
to run the tests once, with a coverage report.
Publishing to npm
- Update this
README.md
file. - Update the
LICENSE
file. - Update plugin name, description etc in
package.json
. If this is the first release, leave the version number as0.0.0
andnp
will bump it for you (docs). - Update
CHANGELOG.md
or remove it if you're not going to keep a changelog. - Commit and push your changes.
- Run
npm run release
to publish your plugin to npm.
tailwindcss-plugin-name
Replace this text with a short description of what the plugin does.
Installation
Install the plugin from npm:
npm install -D tailwindcss-plugin-name
Then add the plugin to your tailwind.config.js
file:
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwindcss-plugin-name'),
// ...
],
}
Usage
Provide instructions for how to use the plugin.
Configuration
If your plugin is configurable, show users how to configure it.
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-plugin-name')({
className: 'markdown',
}),
// ...
],
}