Tailwind CSS' extensibility is one of its best features
As well as the library of utility CSS classes that Tailwind provides, the ability to easily add your own has been one of my main advantages of using it.
You can add your own CSS to a stylesheet within a specific layer, customise the theme settings within a tailwind.config.js file, and write your own custom plugins that you can reuse and even release as separate open-source projects.
Here is a complete plugin that I've added to some projects recently:
const plugin = require('tailwindcss/plugin');
plugin(function({ addVariant }) {
addVariant('hocus', ['&:hover', '&:focus'])
});
By adding these lines of JavaScript, Tailwind will generate a new set of utility classes that apply styles to both hover and focus states for an element - reducing the number of classes that need to be added and making it more maintainable.
Other plugins that I've written recently include creating different variants of buttons, styling elements within an HTML table (similar to the Tailwind typography plugin), and adding multi-theme support to make components themable with different colours.
I've also released some as open-source projects on GitHub.
The interesting thing is that the plugin API is how Tailwind itself generates its own classes, and I like the stability that provides.
However you extend Tailwind, the fact you can tweak and extend it for each project is great and something that you can't always do or do easily with other tools or frameworks.
- Oliver
