Integration

Learn how easy it is to use Hansui with TailwindCSS, HTMX, and AlpineJS.

TailwindCSS

TailwindCSS utilizes atomic classes that are added directly to your HTML markup. When using Hansui’s components, nothing changes in this regard — you can seamlessly integrate TailwindCSS classes into your components.

Each Hansui component includes an Attr property, which allows you to specify TailwindCSS classes or any custom classes you need. These custom classes take precedence over the default ones due to CSS specificity and order — they are appended to the default styles, meaning your custom styles will override any defaults as expected.

This setup allows you to use the utility-first approach of TailwindCSS alongside Hansui without any friction. Just set the classes you want through Attr, and let Hansui handle the rest, ensuring that your customizations are always respected. It’s as simple as that!

Example

// complete this
@button.Success("All good").WithAttrs(templ.Attributes)