JohnCampionJr/tailwindcss-plugin-starter

A boilerplate for Tailwind CSS plugins

Tailwind CSS Plugin Starter

A boilerplate for Tailwind CSS plugins

About

This is a starter project for Tailwind CSS plugins.

Features

• Includes examples for:
  • addBase
  • addUtilities
  • matchUtilities
  • addComponents
  • addVariant (with function, too)
  • exposing options
  • providing default values
• Tests with Jest
• Coverage with c8
• Releases with np
• Code formatting with prettier

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.

Add tests in the src/index.test.js file.

Use the provided examples or see the Tailwind CSS plugin documentation.

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:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-plugin-name'),
    // ...
  ],
}

Usage

Provide instructions for how to use the plugin.

Configuration

If your plugin is configurable, provide instructions for how to configure it.

// tailwind.config.js
module.exports = {
  plugins: [
    require('tailwindcss-plugin-name')({
      className: 'markdown',
    }),
    // ...
  ],
}