Link is a component to style default links, can also be applied to other tags.


You can customize the default styles of this component inside tailwind.config.js setting see css customization. Check xtendui/src/link.css.js for default styles.

Global Styles

Add to the body the class xt-links-default or xt-links-inverse to have link global styles.


Use a without classes or .xt-link to create a link.

Component.xt-linkxt-linkLink styles

To have custom styles use Tailwind CSS, this styles are for automatically styling blank html tags, for example coming from cms or wysiwyg editors. Links a are automatically styled when they don't have [class]. You can customize components check xtendui/src/link.css.js for default styles.

Links a with target="_blank" needs rel="noopener" or rel="noreferrer" to avoid cross-origin issues.


Use component utility .xt-links-default and .xt-links-inverse on parent elements to style child links.

Utility.xt-links-defaultxt-links-defaultresponsiveDefault links colors
Utility.xt-links-inversext-links-inverseresponsiveInverse links colors

You can nest up to two time included the body to override links styles.