The brand guide utilizes tailwindcss so all the tailwind classes is readily available to you. You have access to tailwind.config.js so everything in tailwind is configurable. You will never have to do inline styles ever.

Tailwind is installed as a PostCss plugin so it compiles evertime you save. Using this approach, all elements you create will inherit the style you set and would make building websites faster and more efficient.

The Brand guide can be accessed through Project > Project Options > Brand Guide

Using the Brand Guide

There are three (3) main sections of the brand guide:

tailwind.jpg

tailwind.config.js

This section allows you to configure tailwind from the ground up. This file is the core of tailwind configuration. For more information about configuring tailwind, see their documentation .

tailwind.css

This section is base css for your tailwind styles. This is also where you add base styles on top of tailwind.  See Adding Base Styles for additional information.

custom.css

This section contains all the custom classes you merged using @apply directive. normally you don’t need to edit this section since the system use it for storing ‘My Classes’ items.

Exporting your Style Sheet

To update your site’s css, save your changes first by clicking on ‘Save and Refresh‘ button – spinnr will try to compile all your changes and alert you if it was successful, then click on ‘ Export Assets‘ button.