Building Custom Tailwind Plugins
Learn how to build custom Tailwind plugins.
We'll cover the following...
In this lesson, we’ll look at how to create custom Tailwind plugins. We’ll create two small plugins:
A
countersplugin, which will add the ability to automatically add numbers to the document headings or whatever other elements we want.An
arrowsplugin, which will add the ability to incorporate CSS arrow shapes/icons into our designs.
Note: From now on, we don’t need to stop and run the
dev:watchcommand again because the custom plugins don’t need to be installed. But it’s good to make sure the command is still running before we test the HTML example files. Sometimes, while we’re making changes, a syntactic error can stop the execution of the script. In this case, we’ll see an appropriate error message in the terminal, such asSyntaxError: Unexpected identifier. To apply the changes we’ve made and see a proper HTML result, we need to start the script again with the following command:npm run dev:watchIf you need to run the program locally, you can use this command explicitly. Otherwise, we’re running this command in each terminal.