Custom classes (advanced)

Remake stores styles as classes. The toolbar writes them for you, but you can also edit the class list directly.

Where to add a class

One block or the page

1. Select the block.

2. Open Overview in the toolbar.

3. Find the block in the list.

4. Open the three-dot menu on its row and choose Manually edit classes.

5. Add your classes to the Class list, separated by spaces.

6. Choose Save changes.

The list may also contain Remake markers such as x-btn:primary. These are not Tailwind classes. They are how Remake applies a base style or variation. Leave them in place unless you mean to remove that style.

The Page entry edits the page body. This is useful for a page-wide background or for overflow-x-hidden when a decorative element causes sideways scrolling.

A run of text

Text with inline styles appears in Overview as a Styled text entry. Edit its class list the same way.

A whole family of elements

Open Style manager, find the base style or variation, open its action menu, and choose Edit classes.

This changes every element using that style. For example, adding tracking-tight to the heading base style tightens every heading on the site.

Base style changes appear in the editor right away and go live with the next publish. Block and component classes publish with the page or component.

A component

Editing the class list of a component instance edits the component's shared root. The change reaches every synchronized instance.

Syntax

Use normal Tailwind-style utility names, separated by spaces:

Common patterns:

Most Tailwind utility classes, variants, and arbitrary values work. Remake is not a full Tailwind project, so a class that depends on a custom config or plugin from your own codebase may not exist.

Prefer w-* max-w-full over a bare max-w-*. The Size control reads and writes w-*, so a block with only a max-width will look like it has no width there.

Screen size prefixes

The device menu writes max-lg:, max-md:, and max-sm:. These match Tablet, Mobile landscape, and Mobile portrait.

In a class list, use the same prefixes to stay consistent with the rest of the editor:

This gives 4 units of padding on desktop, 3 on tablet and below, and 2 on the smallest phones. It follows the same top-to-bottom order as the device menu.

Standard sm:, md:, and lg: prefixes also work, but they mean "from this width up". That is the mobile-first direction. Avoid mixing both styles on the same property unless you have a reason.

Conflicts and overrides

When two plain utilities set the same property, the later one in the list wins. For example:

becomes p-8.

To override a value set by the toolbar, add the new class at the end of the list. To override a base style or variation, add the class after the style marker and check the result. Markers are not ordinary utilities, so the order matters more there.

The toolbar may not recognize a custom class. A padding control can look empty even though p-[18px] is applied. Edit the class list again to change it.

Removing a class

Delete the class from the list and save.

If the class comes from a base style or variation, remove it there instead, or override it in the block's list. Deleting the style marker removes the whole style, not just one property.

There is no per-block CSS editor. If you need a real CSS rule instead of utility classes, you can add a <style> block through the custom head code in Project settings. That applies to the whole site, so use it sparingly.

What can go wrong

• hidden hides the element on every screen.

• fixed and absolute can break a layout, especially on mobile.

• overflow-hidden can cut off menus or shadows.

• A class copied from another project may rely on a color or plugin that does not exist here.

• A class that looks right in the editor can behave differently on the published site if it depends on content that is not there.

Check the page in tablet and mobile, publish, and check the live page before relying on a custom class.

A simple starting recipe

1. Select a card.

2. Open Overview, find the card, and choose Manually edit classes.

3. Add bg-[#f5efe6] p-8 rounded-3xl.

4. Save and check the card on mobile.

5. If the padding is too large there, add max-sm:p-5 at the end.

6. Publish.

Read Style manager for shared styles, and Responsive design for the device order.