How to fix and prevent class duplication in Webflow

In this doc you’ll learn:

1. What is class duplication
2. How to use class sync to avoid class duplication
3. How to manually fix duplicated classes

What is class duplication?

When pasting a component into a Webflow project, the component can have classes with the same name as a class already in the project with different styling. When this happens Webflow renames the class that’s pasted in and adds a number after it.

For example if I duplicate the Relume Style Guide and change the button class to use a border radius of 1rem, then I paste a component from Relume in, Webflow will change the name of the pasted button class to button 2. We call this class duplication.

How to avoid class duplication with Class Sync

To avoid class duplication you can download the Relume Chrome Extension for Webflow and turn on Class Sync. Class sync stops class duplication by changing the styling of pasted classes to the same as the Webflow project.

Keep an eye out for the yellow alert top right - this happens when a duplicate class has occured.

How to manually fix duplicated classes

Duplicate classes can be found in Style Selectors which can be found by clicking the highlighted icon in the image below or ⌘G

Duplicate classes can be fixed with the following steps:

1. Identify the duplicated class and find it in Style Selectors.
2. Clicking the highlighted list icon in the image below.

For each of the elements affected on this page:

1. Click the element in the list which will take you to the element in the page.
2. Remove all the classes, then add them back one by one with their non duplicated class (e.g remove button 2 and replace it with button).

Troubleshooting Tips

If you have confirmed that you have the chrome extension installed and Class Sync turned on and still facing issues, try these steps:

Clean your project of ALL duplicate classes before pasting in more components

If button 2 already exists in a project then Webflow will duplicate the class if class sync is on or off. You must remove duplicated classes from a project for Class Sync to reliably work.

Toggle Class Sync

Turn off Class Sync, save, and reload designer. Turn Class Sync back on, save, and reload designer. Try pasting again.

Disable the chrome extension and reload

• Go to the extension settings in Chrome by using typing chrome://extensions in the address bar.
• Toggle the Relume extension off.
• Return to your effected Webflow page and refresh the page.
• Go back to extension page and toggle the Relume extension back on.
• Return to your effected Webflow page and refresh the page again.‍

Restart your Chrome browser

‍This will often fix any temporary silliness.

‍

{{note-support="/resources/assets/rtc"}}