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.