Has anyone successfully implemented the utility first CSS class convention in Webflow and have any tips on the initial setup, utility classes included, obstacles faced while building the site, if they would take this approach again, and a URL to the site?

Yes, many Webflow users have successfully implemented a utility-first CSS class system—similar to Tailwind CSS—within Webflow, and it can work well with the right setup. Here's a breakdown of how to approach it, lessons from those who’ve done it, and best practices for success.

1. Utility-First Setup in Webflow

• Build a component library project first: Create a dedicated Webflow project (or a style guide page) that houses all your utility classes and patterns.
• Name classes functionally: Use consistent, atomic names like padding-sm, text-center, bg-gray, etc.
• Use combo classes where necessary: Combine utility classes on elements instead of creating unique combo classes per component.
• Rely heavily on Finsweet's Client-First system or Relume’s class naming structure, which blend utility-first principles with component organization.

2. Recommended Utility Classes to Start With

• Spacing: margin-top-sm, padding-md, gap-lg
• Flex/Grid: flex, flex-col, justify-center, grid-2
• Typography: text-xs, text-lg, text-bold
• Colors: bg-light-gray, text-dark, border-blue
• Display & Position: hidden, inline-block, absolute, z-10
• Sizing: w-100, h-auto, max-w-lg
• Interaction: hover:bg-dark, transition

3. Common Challenges

• Webflow’s visual interface prefers semantic or component-based styling, so a purely utility-first system may feel cumbersome initially.
• Auto-cleaning unused classes is not friendly to utility systems: Webflow suggests removing unused classes, but you may use utilities inconsistently across dynamic CMS content.
• Couldn't preview changes globally: Unlike Tailwind’s config-based approach, updating styles across utilities in Webflow means editing each class manually unless using a global style system combined with custom code.

4. Developer Feedback on This Approach

• Pros:

• Faster prototyping once classes are established

• Consistent spacing and styling

• Easier handoff if devs use Tailwind or similar concepts

• Cons:

• Harder to manage at scale inside Webflow’s UI

• Non-designers may struggle with class application

• Doesn’t leverage Webflow’s component/BEM-style strengths

• Would they do it again?: Yes, but often as a hybrid approach, using utility classes for layout and spacing, and semantic/component classes for complex elements.

5. Live URLs to View

Users who have shared sites using a utility-first method (either custom or via Finsweet’s Client-First) include:

• Relume Library (Webflow components built on a utility-first mindset):
  https://www.relume.io/library

• Finsweet Client-First projects:
  https://clientfirst.webflow.io/

These are not pure Tailwind replicas but adopt many core utility-class principles.

Summary

Adopting a utility-first CSS convention in Webflow is very possible and has been done effectively using tools like Finsweet’s Client-First or custom class systems. The key is a thoughtful setup, disciplined naming, and balancing convenience with manageability. For most users, a hybrid of utility and semantic classes offers the best of both worlds.