- Getting started
- The Gust page builder
- Customising styles, fonts, and colours
- Guides and tutorials
- Account & Subscription
Gust takes a developer first approach to WordPress themes and as you nosey through the code, you'll see that almost everything passes through a filter allowing you to update it.
You'll need to be using at least 1.3.0 of Gust to use the Tailwind CSS Just-In-Time mode.
When you're building pages with the Gust page builder, there's nothing more you need to do. JIT is already enabled in that environment so you can continue to work as you normally would. However if you want to use JIT within PHP templates you'll need to enabled Developer mode as per the docs below. In this scenario, whenever you reload the page, Tailwind CSS will re-build itself with the new class names you've added.
Remember that once you've finished, you'll need to disable developer mode and re-build your stylesheet for the changes to take effect.
Currently the following plugins are enabled:
We're working on adding support for users to add their own plugins, both from NPM and their own custom plugins. Until then, if you have a plugin you'd like to see added, let us know and we can look into adding it.
Working with templates
The Gust page builder is intended to be used for things like landing pages, content pages, etc. For templated pages such as posts, pages, products, etc it's likely that you'll want to touch the codebase directly and code these with PHP. There are a few things you'll need to be aware of to get the most out of Gust when taking this approach.
Turning on Developer Mode in the settings will load the development bundle of Tailwind CSS on the front-end. You don't want to do this in production! This is because the development bundle of Tailwind CSS is huge as it includes all the different class names. But it's perfect for development. So switch this on while you're building and don't forget to turn it off again when you're done.
If you use the Gust page builder, Gust will automatically keep track of the class names used on that page. When you save, it'll figure out whether it needs to re-build and if it does, will generate a new production CSS file.
When you're working with PHP files however, it's a little more tricky. Gust will scan the following templates in the theme or child theme and do its best to extract CSS class names:
If you want Gust to watch out for any other templates you might be using, you can add them through the
gust_safelist_templates filter. These should be relative to your theme directory as Gust will use
locate_template under the hood to find them. If you have any other files that you want Gust to watch, pass them in using the
gust_safelist_files filter, with the full path to the file.
You will need to trigger a manual rebuild of the stylesheet if you change any templates. To do that go to the Gust settings from the dashboard and click "Rebuild CSS". It may take a little while as it needs to update both the production and the development builds of your stylesheet.
Overriding the safe list
If the above still isn't quite enough, you can override the safe list that Gust sends to Purge CSS by using the
Hooks and filters
It wouldn't be WordPress if it didn't have hooks and filters, and Gust comes with plenty to make sure you have control over what's being output. We're still working on ensuring this list is exhaustive, so there may be a few extra filters lurking around the codebase. If you find one that's not on this list, or you've found somewhere that needs a new one, let us know and we'll take a look at getting it added.
||This is run before each component is registered. You can override an entire component's JSON with this filter. Great for overriding core components.|
||This is called whenever Gust tries to render a component. It should return the component details. Again, you could override the implementation of a core component here, but on only when pages are being built. This does not effect the editor.|
||When a component node is being rendered the
||Modify any classes being output onto a component node.|
||Modify any attributes being output on a component node.|
||Modify the full HTML of a component node.|