Styles

How to style your elements in Noloco

Introduction to element styles

As you know from the Elements introduction, almost all elements are styleable and map directly to an HTML element. This means you have almost complete control over your styles.

You can style any styleable element by clicking it on the canvas or the element tree and opening the style tab on the right panel

Noloco uses a preconfigured set of values for some of its styles such as width, heights, padding and margins. These values come from Tailwind CSS a popular CSS framework built by excellent designers. Their philosophy (and ours) is that it allows you to work within the constraints of an excellent design system instead of littering your styles with arbitrary, unrelated values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system.