Pre-requisites

All GEL components have a couple of peer dependencies so please ensure the following are installed:

Installation

GEL can be installed using a package manager like npm, yarn or pnpm.

If you are using a workspace update tailwind.config.js to use the withGEL helper exported by @westpac/ui as follows.

If you are using npm in the workspace update tailwind.config.js as follows.

Also, you have to create a postcss.config.js on the root of your application as follows.

For applications using brand fonts add the following options config to the withGEL helper.

Ensure tailwind directives are added to your main CSS file.

If you have initialized your project with Nx build system follow the official Nx tailwind documentation to configure tailwind. Nx based projects requires __dirname prefix to the paths in the tailwind.config.js file and postcss file.

Resources

This library can be found on npm under @westpac/ui.

Please raise any issues on the Github repo.

GEL is using Tailwind for styling. Visit the Tailwind docs to learn more about installation and usage.