Class Merger
Consolidate multiple classes into one unified class. Preserves breakpoints and pseudo-states.
Consolidate multiple classes into one unified class. Preserves breakpoints and pseudo-states.
Class Merger
Simplify your Webflow workflow by consolidating multiple CSS classes into a single, unified class—while preserving styling across breakpoints and interactive states.
What It Does
Class Merger automatically detects all classes applied to your selected element and combines them into one new class. Perfect for cleaning up complex styling, consolidating utility classes, or simplifying inherited component styles.
Key Features
- Smart detection: Instantly displays all classes on your selected element.
- Complete merge: Combines properties from all classes into one.
- Responsive preservation: Maintains styles across all 7 breakpoints (Desktop XXL → Mobile Portrait).
- Interactive states: Preserves hover, focus, active, and other pseudo-states.
- Custom naming: Choose any name for your new merged class.
- One-click process: Simple, fast merging with visual feedback.
Perfect For
- Consolidating multiple utility classes into semantic classes.
- Simplifying component styling during refactoring.
- Cleaning up inherited styles from multiple sources.
- Creating standalone classes from complex combinations.
- Reducing class clutter in your elements.
How It Works
- Select any element in the Webflow Designer.
- View all applied classes in the extension panel.
- Enter a name for your new merged class.
- Click Merge Classes.
- Done—your new class is created and applied.
What Gets Merged
- Colors: background, text, borders.
- Typography: fonts, sizes, weights, line-height.
- Spacing: padding, margin.
- Layout: display, position, flexbox, grid.
- Effects: opacity, shadows, transforms.
- Responsive styles: preserved across all breakpoints.
- Interactive states: hover, focus, active, and more.
Technical Details
- Built with Webflow Designer API v2.
- Processes all 7 responsive breakpoints.
- Handles 14 pseudo-states.
- Displays merged property count after completion.
- Validates against duplicate class names.
- Non-blocking async operations for smooth performance.
Use Case Example
Before:.card .shadow-lg .rounded .p-4
After:.card-styled (all properties merged into a single class)
Version 1.0.0 • Webflow Designer API v2
Class Merger
Simplify your Webflow workflow by consolidating multiple CSS classes into a single, unified class—while preserving styling across breakpoints and interactive states.
What It Does
Class Merger automatically detects all classes applied to your selected element and combines them into one new class. Perfect for cleaning up complex styling, consolidating utility classes, or simplifying inherited component styles.
Key Features
- Smart detection: Instantly displays all classes on your selected element.
- Complete merge: Combines properties from all classes into one.
- Responsive preservation: Maintains styles across all 7 breakpoints (Desktop XXL → Mobile Portrait).
- Interactive states: Preserves hover, focus, active, and other pseudo-states.
- Custom naming: Choose any name for your new merged class.
- One-click process: Simple, fast merging with visual feedback.
Perfect For
- Consolidating multiple utility classes into semantic classes.
- Simplifying component styling during refactoring.
- Cleaning up inherited styles from multiple sources.
- Creating standalone classes from complex combinations.
- Reducing class clutter in your elements.
How It Works
- Select any element in the Webflow Designer.
- View all applied classes in the extension panel.
- Enter a name for your new merged class.
- Click Merge Classes.
- Done—your new class is created and applied.
What Gets Merged
- Colors: background, text, borders.
- Typography: fonts, sizes, weights, line-height.
- Spacing: padding, margin.
- Layout: display, position, flexbox, grid.
- Effects: opacity, shadows, transforms.
- Responsive styles: preserved across all breakpoints.
- Interactive states: hover, focus, active, and more.
Technical Details
- Built with Webflow Designer API v2.
- Processes all 7 responsive breakpoints.
- Handles 14 pseudo-states.
- Displays merged property count after completion.
- Validates against duplicate class names.
- Non-blocking async operations for smooth performance.
Use Case Example
Before:.card .shadow-lg .rounded .p-4
After:.card-styled (all properties merged into a single class)
Version 1.0.0 • Webflow Designer API v2
- Instantly displays all CSS classes applied to your selected element in real-time.Instantly displays all CSS classes applied to your selected element in real-time.
- Preserves all styling across 7 breakpoints from Desktop XXL to Mobile Portrait.Preserves all styling across 7 breakpoints from Desktop XXL to Mobile Portrait.
- Maintains hover, focus, active, and all 14 pseudo-states in the merged class.Maintains hover, focus, active, and all 14 pseudo-states in the merged class.
- Merge multiple classes into one with custom naming and instant application.Merge multiple classes into one with custom naming and instant application.
- Prevents duplicate class names and shows total properties merged for transparency.Prevents duplicate class names and shows total properties merged for transparency.