How to create A Tailwind CSS plugin?

iman malekian
3 min readJun 7, 2023

--

preview

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:

dist directory

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.

--

--