Installation instructions.

Check out xtendui-boilerplate code for Encore, Gulp, Snowpack, Vite, Webpack ready to go!


Install xtendui.

npm install xtendui --save


Install tailwind, xtendui, postcss import, postcss nested.

npm install tailwindcss --save
npm install postcss postcss-import autoprefixer --save-dev

Then in postcss.config.js set up compilation.

module.exports = {
  plugins: [require('postcss-import'), require('tailwindcss/nesting'), require('tailwindcss'), require('autoprefixer')],

Create a tailwind.config.js and add xtendui preset, with this purge configuration.

module.exports = {
  presets: [
    require('tailwindcss/defaultConfig'), require('xtendui/tailwind.preset'),
  // put other purge content e.g.: './src/**/*.{html,js}'
  content: ['./node_modules/xtendui/src/*[!.css].js'],

Then you can use css with tailwind.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "./custom.css"; /* custom css here */

@import "tailwindcss/utilities";

More info in Tailwind docs tailwind postcss.


Use any compiler see postcss usage or tailwind installation or xtendui-boilerplate.


You can customize components css, more info in Tailwind docs tailwind theme.


You can import the components you need as described in the demos.

import { Xt } from 'xtendui'
import 'xtendui/src/toggle'


Xtend UI uses gsap for javascript animations in some demos, but it's not included in the library.

npm install gsap --save


You need to install @babel/core, @babel/preset-env.

npm install @babel/core @babel/preset-env --save-dev

Then in the root of your project set up polyfills with babel.config.js and .browserslistrc.

Global Styles

Add to the body the class xt-body to setup animations global styles, layout global styles, typography global styles.

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

If you use gsap add this javascript to setup animations.

Unsupported browsers

If you want to show a warning on unsupported browser you can use browser update and target exactly supported browsers.

  // put at the end of body tag
  var $buoop = {required:{e:79,f:67,o:50,s:11.1,c:63},api:2021.03 };
  function $buo_f(){
  var e = document.createElement("script");
  e.src = "//";
  e.async = true;
  e.defer = true;
  try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
  catch(e){window.attachEvent("onload", $buo_f)}


If you need to do a fast installation of css and js use xtendui CDN, the css and js are inside the dist/ folder.

The css CDN dist/ includes only the styles used in the documentation demos.

The js CDN dist/ files are large because they include all styles and components, it's not representative of the sizes you see when including Xtend UI as part of your build process.