This site uses cookies. By continuing to use this site you agree to our privacy policy and terms and conditions.
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.
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.
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 = {
...
}
Currently the following plugins are enabled:
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 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.