Global
Global

Global is a component with global styles and javascript.

Styles

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

Global Styles

Add to the body the class xt-body to have this features:

  • Custom body scrollbar components styles. You can disable this feature with xt-optout-scroll and keep others xt-body features.

Utilities Styles

These are layout utilities.

SyntaxMixinVariantsDescription
Utility.xt-container-resetxt-container-resetresponsiveOn a container reset container styles
Utility.xt-container-removext-container-removeNOT POSSIBLEInside a container child remove horizontal spacing as set in theme.container.padding
Utility.xt-container-yxt-container-yNOT POSSIBLEAs container but with vertical spacing spacing as set in theme.container.padding
Utility.xt-container-y-removext-container-y-removeNOT POSSIBLEInside a xt-container-y child remove vertical spacing as set in theme.container.padding
Utility.xt-h-screenxt-h-screenresponsiveHeight 100vh and retain height on vertical scroll/resize on mobile
Utility.xt-min-h-screenxt-min-h-screenresponsiveMin height 100vh and retain height on vertical scroll/resize on mobile
Utility.xt-max-h-screenxt-max-h-screenresponsiveMax height 100vh and retain height on vertical scroll/resize on mobile

To have .container fluid so with only one max-width in Tailwind CSS preset set theme.extend.container.fluid: '1536px' with the desired max-width, see Tailwind CSS container.

Components Styles

These are layout component classes.

SyntaxMixinDescription
Component.xt-overflow-mainxt-overflow-mainOverflow scrollbar style
Component.xt-overflow-subxt-overflow-subOverflow scrollbar style small version
Component[readonly], [disabled], .xt-disabledxt-disabledDisabled styles
Component.xt-backdropxt-backdropBackdrop styles
Component.xt-designxt-designSetup design styles in position absolute