Getting started with utility classes
Utility classes (also called magic classes) are short names built into Dirigible Studio. Type one into a block's settings and the theme styles it for you.
Add a class to a block
- Select the block in the editor.
- In the sidebar, expand Advanced at the bottom of the block settings.
- Type the class name in Additional CSS class(es). Separate several classes with spaces, for example
mt-8 scroll-animate-fade. - Click Update and check the live page.
Type class names exactly as shown in the reference tables — without a leading dot or commas.
Dashboard → Magic Classes in WordPress lists the most common classes. The full reference lives in this CSS Utility Classes collection.
Breakpoint prefixes
Many classes accept a screen-size prefix. The prefix limits when the class applies:
| Prefix | Applies |
|---|---|
sm: |
Phones only (under 640px) |
md: |
Under 768px |
lg: |
Tablets and larger (768px and up) |
xlg: |
Desktop (1024px and up) |
Examples: lg:mt-0 removes top margin from tablet width up; sm:w-full makes a block full width on phones only.
Important modifier
Add ! before a class name to force it over other styles. Examples: !mt-0, !mb-0. In the reference tables, important variants appear on the same row as the regular class.
Legacy names
Some utilities have two names that do the same thing. w-full and width-100 both set full width; !mt-0 and enforce-mt-0 both force no space above. The reference lists aliases together on one row.
Scroll animations
Scroll animation classes need Scroll Animations turned on under Appearance → Customize → Settings → Animations. See the Animation section for the full list.