Classes turn repeated styles into one reusable definition — style once, apply everywhere, and update every instance (including its states and breakpoints) from one place.
Where: Right sidebar → "Create Class" / class selector — Create or apply a class on a styled element
Key ideas
- Single source of truth: A class holds the styles once; every element using it stays in sync.
- States & breakpoints included: A class carries :hover/:focus/:active and responsive overrides.
- Source indicators: Orange means a value comes from a class; blue means it is inline on the element.
Steps
- Style an element the way you want it.
- Click "Create Class" and name it (e.g. btn-primary).
- Apply that class to other elements via the class selector.
- Edit any element with the class to update them all.
Reusable styles across instances
- A class stores reusable styles so changes to the class can update every element using it.
- Classes carry responsive overrides and interaction states such as hover, focus, and active.
- Source indicators help distinguish styles inherited from a class from styles set inline on the element.
Create and maintain a class
- Style one representative element and create a descriptive class name.
- Apply that class to matching elements through the class selector.
- Edit shared styles at the class level; use per-element overrides only when an instance truly needs a difference.
Tips
- Use a consistent naming scheme for component roles such as buttons, cards, and layout wrappers.
Limitations and important notes
- A class change affects every matching instance, including states and breakpoints; inspect the result across the project.