Cover Image for Create a Custom Tailwind CSS Plugin

Create a Custom Tailwind CSS Plugin

Lauro Silva
Lauro Silva
Time to read1 min read
Published1y ago

Creating a custom Tailwind plugin can be a great way to extend the functionality of Tailwind CSS. Here are the steps to create a custom Tailwind plugin:

  1. Create a new npm package and install Tailwind CSS as a dependency:
1npm init -y
2npm install tailwindcss
  1. Create a new file called tailwind.config.js in the root of your project:
1module.exports = {
2 theme: {},
3 variants: {},
4 plugins: [],
  1. Add your custom plugin to the plugins array in tailwind.config.js here:
1module.exports = {
2 theme: {},
3 variants: {},
4 plugins: [require('./path/to/your/plugin')],
  1. Create your custom plugin file at the path specified in step 3:
1module.exports = function ({addUtilities}) {
2 const newUtilities = {
3 '.text-underline': {
4 textDecoration: 'underline',
5 },
6 }
8 addUtilities(newUtilities)

In this example, we're creating a new utility class called .text-underline that underlines text. You can create any number of new utility classes in your custom plugin file.

The addUtilities function is used to add the new utility classes to Tailwind's utility classes.

  1. Import your custom plugin in your CSS:
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4@import './path/to/your/plugin';

Make sure to import your custom plugin after the @tailwind utilities directive.

That's it! You've created a custom Tailwind plugin.

Lauro Silva
Written by Lauro Silva

Lauro is a software developer and educator who loves shipping great products and creating accessible educational content for developers. Currently, they are teaching React, TypeScript, and full-stack development with Next.js.