Customise Tailwind

Customisation is a core priority for Gust. We know that getting stuck with something another developer has added for you is endlessly frustrating, so we've enabled you to customise the underlying Tailwind config file to ensure you can match your website to your brand.

Customise Tailwind Config

To customise the Tailwind config file, head to Gust > Settings where you'll see the default one. Have a read of Tailwind's configuration docs if you're unfamiliar with this section.

The Tailwind configuration file is probably the first place you'll look to when making default components match your brand. Many of the components use class names like bg-primary and so changing the primary colour will update those components automatically.

Using JavaScript Packages

Sometimes, when updating the Tailwind config, you'll need to reference core Tailwind libraries or other JS packages. The following packages are pre-installed and can be required:

tailwindcss/colors
tailwindcss/defaultTheme
tailwindcss/plugin
@tailwindcss/typography
@tailwindcss/forms
@tailwindcss/aspect-ratio
@tailwindcss/line-clamp

You must require them and not import them:

var colors = require('tailwindcss/colors')

module.exports = {
  ...
}

Tailwind Plugins

Currently the following plugins are enabled:

Custom and third party plugins

You can create your own plugins by following the Tailwind documentation. If you need to add a third party plugin, you must first require it, for example:

const elevation = require('tailwindcss-elevation')

Note that due to how Tailwind runs within Gust, there may be some incompatibility with third party plugins. If you find that a plugin has broken something, contact support and we can take a look.

Adding Fonts

Adding fonts is relatively straight forward. First of all, make sure you've got the font hosted somewhere, this will likely be on Google Fonts. Then add something like the below snippet to your theme's functions.php file. In this example we'll add Open sans.

add_filter( 'gust_fonts', 'my_custom_fonts' );
function my_custom_fonts( $fonts )
{
  $fonts[] = array(
    'id' => 'open_sans',
    'url' => 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap',
  );
  return $fonts;
}

Then go to the Tailwind config and update it with your new font:

{
  "theme": {
    "extend": {
      "fontFamily": {
        "sans": ["Open Sans", "sans-serif"]
      }
    }
  }
}

More detail in Tailwind's docs.

Customise Tailwind