Tailwind CSS Plugin Starter

A boilerplate for creating 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

1. Update this README.md file.
2. Update the LICENSE file.
3. Update plugin name, description etc in package.json. If this is the first release, leave the version number as 0.0.0 and np will bump it for you (docs).
4. Update CHANGELOG.md or remove it if you're not going to keep a changelog.
5. Commit and push your changes.
6. 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',
    }),
    // ...
  ],
}