How to create A Tailwind CSS plugin?

In this tutorial, we will build a Tailwind CSS UI kit by using the Tailwind plugin to add new components like btn and utilities like flex-center .

step 0 — Setup your project

First of all, create an empty directory and initiate the package.json by this command:

yarn init -y

then install TailwindCss, PostCSS, PostCSS CLI, PostCSS Import, and PreJSS CLI:

yarn add tailwindcss
yarn add -D postcss postcss-cli postcss-import prejss-cli

Create postcss.config.js and tailwindcss.config.js the root and fill it with this:

// postcss.config.js
module.exports = {
  plugins: {
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
    'postcss-import': {},
  },
}

// tailwindcss.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,css}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Afterward, we want to make the package structure. At the root of the project create a path src/components for putting components classes in it and src/utilities for utility classes.

Additionally, we need to create src/index.js to define our plugin for installation.

Step 1 — Create the first component class

At the src/components create btn.css file and add whole your button style to it like this:

// src/components/btn.css
.btn {
  @apply px-2.5 py-1.5;
  @apply rounded-md shadow-sm;
  @apply text-sm font-semibold text-white;
  @apply bg-indigo-600 hover:bg-indigo-500;
  @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
}

This .btn will apply all these tailwind classes to the HTML element.
And also add index.css in the components directory to import all CSS files in it. For example, now I only have one component but you can create more components files and import them in index.css .

// src/components/index.css
@import "btn.css";

Step 2 — Create the first utility class

like the previous step create flex.css file in src/utilities and create your own utility class. here is my class:

// src/utilities/flex.css
.flex-center {
  @apply flex items-center justify-center;
}

Again create index.css for future utility classes.

// src/utilities/index.css
@import "flex.css";

Step 3 — Add build scripts

Now we need to prepare our classes for use in the Tailwind plugin. First of all, we build output CSS files with postcss.

// package.json
{
  //...  
  "scripts": {
      "build:components:css": "postcss src/components/index.css -o dist/components.css",
      "build:utilities:css": "postcss src/utilities/index.css -o dist/utilities.css",
    },
  //...
}

With build:components:css we will get a single file output in dist directory as components.css that contains all the CSS classes you defined in src/components/index.css and the same for utilities .

It’s not complete yet. We need to convert these CSS files that build to Js files for use in the plugin. For this one, we use prejss-cli .

// package.json
{
  //...
  "scripts": {
    "build:components:css": "postcss src/components/index.css -o dist/components.css",
    "build:components:js": "prejss-cli dist/components.css --format commonjs",
    "build:components": "yarn build:components:css && yarn build:components:js",
    "build:utilities:css": "postcss src/utilities/index.css -o dist/utilities.css",
    "build:utilities:js": "prejss-cli dist/utilities.css --format commonjs",
    "build:utilities": "yarn build:utilities:css && yarn build:utilities:js",
    "build": "yarn build:components && yarn build:utilities"
  },
  //...
}

Now run yarn build then you should have dist directory like this:

Step 4 — Create Tailwind plugin

In the last step, we should import the dist/components.js and dist/utilities.js to src/index.js like below:

// src/index.js
const plugin = require('tailwindcss/plugin')

const components = require('../dist/components')
const utilities = require('../dist/utilities')

const TailwindUiKitPlugin = plugin(
  function ({ addUtilities, addComponents }) {
    addUtilities(utilities)
    addComponents(components)
  },
)

module.exports = TailwindUiKitPlugin

In this code, we used the plugin function which Tailwind provide to us. For more details, you can read this page.

Summary

I have published this package and you can install it with:

yarn add tailwind-ui-kit-tutorial

and use it by adding it to your tailwindcss.config.js plugins:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require('tailwind-ui-kit-tutorial')],
}

GitHub: https://github.com/imanmalekian31/tailwind-ui-kit-tutorial
NPM: https://www.npmjs.com/package/tailwind-ui-kit-tutorial

Thanks for reading.