Relume Class Sync: How To Automatically Apply Your Webflow Styles To New Components

Watch: Relume Class Sync: How To Automatically Apply Your Webflow Styles To New Components

Match a pasted component to existing classes

Relume’s Class Sync guide explains how its Chrome extension handles matching class names. It makes incoming styles match the existing Webflow project's styles when Class Sync is enabled.

For example, your project already has a button class with a 1rem border radius. Paste a component that also uses button. Check whether it keeps the existing button style instead of creating button 2. Use the intended Relume style guide and consistent class names. A renamed class is not the same class merely because it looks similar.

Existing duplicate classes still need manual cleanup. Class Sync does not redesign every imported component. Inspect base classes and combo classes before replacing duplicates. Check the component's mobile layout and interaction states after pasting. For a larger import, follow the Relume-to-Webflow workflow and start with one page.

A clear Webflow building process helps you decide which class conventions to preserve.