Visit on Twitter
Visit on Npm
Visit on Github

Preset
Global
Global

Theme

The following theme values are added with the preset:

  • breakpoints added desktop first media queries breakpoints that uses max-width: -sm, -md, -lg, -xl, -2xl.
  • breakpoints added the media queries for hover hover-none and hover-hover.
  • font-size text-xs modified to ~13px, text-2xs added with ~12px, text-3xs* added with ~11px, text-4xs* added with ~10px, for better control on small font sizes.
  • colors and a default primary color stack to be replaced with your primary color.
  • z-index additional z-index used by components, use z-below for z-index below content, use z-content for z-index above content, z-above for z-index above pupup content, use z-last for z-index above anything.
  • inset additional inset, use top-100 left-100 bottom-100 right-100 to position with the value 100%.
  • border-radius rounded-inherit added, rounded-sm modified to ~3px, rounded-xs added with ~2px, for better control on small border radius.
  • cursor cursor-none added.
  • outline outline-browser added.
  • Added new settings see animation preset.

Variants

Xtend UI add custom Tailwind CSS variants.

  • added variants to style activation classes with off:, group-off:, on:, group-on:, in:, group-in:, out:, group-out:, dir-before:, group-dir-before:, dir-after:, group-dir-after:, done:, group-done:

  • added variants to style form validation after form submit with valid-submit: and invalid-submit:.

  • added group-active: variant.

To show/hide and animate a node with activation classes you need to use Xt.on and Xt.off or toggle components (toggle, drop, overlay, slider, tooltip).

Customization

You can customize components css inside tailwind.config.js, use theme.extend to change Xtend UI preset default.

Check xtendui/tailwind.preset.js for default preset.

module.exports = {
  theme:{
    extend: {
      colors: {
        // custom xtendui colors
        primary: {
          50: '#F8F7FF',
          100: '#F1F0FE',
          200: '#DDD9FD',
          300: '#C8C2FC',
          400: '#9E95FA',
          500: '#7567F8',
          600: '#695DDF',
          700: '#463E95',
          800: '#352E70',
          900: '#231F4A',
        },
      },
    },
  },
}

You can customize components inside tailwind.config.js, use theme.extend to change Xtend UI default component styles.

Check xtendui/tailwind.components.js for default component styles.

module.exports = {
  theme:{
    extend: {
      xtendui: {
        typography: { // typography component
          utility: theme => ({
            // modify utilities
          }),
          component: theme => ({
            // modify components
          }),
        },
      },
    },
  },
}
Close Fullscreen