Skip to content

Variants for styling htmx classes with Tailwind CSS

License

Notifications You must be signed in to change notification settings

aniftyco/tailwind-htmx

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

tailwind-htmx

Variants for styling htmx classes with Tailwind CSS

Getting Started

Installation

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'),
    // ...
  ],
};

Configuration

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';
      };
    }),
  ],
};

Usage

<div>
  <button hx-post="/example">Post It!</button>
  <img id="spinner" class="invisible htmx-request:visible" src="/img/bars.svg" />
</div>

About

Variants for styling htmx classes with Tailwind CSS

Resources

License

Stars

Watchers

Forks