Variants for styling htmx classes with Tailwind CSS
Install the plugin from npm:
npm install -D tailwind-htmx
Then add the plugin to your tailwind.config.js
file:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwind-htmx'),
// ...
],
};
You can change the default class names to generate with the following options:
// tailwind.config.js
module.exports = {
...,
plugins: [
require('tailwind-htmx')({
classNames: {
settling: 'htmx-settling';
request: 'htmx-request';
swapping: 'htmx-swapping';
added: 'htmx-added';
};
}),
],
};
<div>
<button hx-post="/example">Post It!</button>
<img id="spinner" class="invisible htmx-request:visible" src="/img/bars.svg" />
</div>