You probably know just how great it feels to work in Webflow—the ability to create complex custom designed websites and web applications without writing code—truly magical stuff.

But, and there’s always a but, if you’ve spent any time building for the web outside of Webflow you’ll also know how that feels—a world full of awesome frameworks, libraries and toolkits designed and supported by an open-source community to help build better and more maintainable digital products.

That’s where we feel the “blank canvas” of Webflow seems to fall short. Without any guardrails, the blank canvas can quickly become more of a burden than a blessing.

Libraries like Bootstrap were the OG’s of a systematic approach to building for the web. Now, the new kid on the block, TailwindCSS, is changing the way we write CSS, with a utility-first approach.

It’s this utility-first approach that we desperately missed when working inside Webflow and, through that lens, the blank canvas of Webflow feels like falling through a time warp back to a more primitive time. Inspired by TailwindCSS, our goal was to bring a utility-first approach to Webflow with a refreshingly simple, maintainable, and predictable way to build within Webflow.

Like the foundations of making a great stew, braise or ramen, it starts with excellent ingredients, the most important of which is Stock.

Why Utilities

So, why would we use CSS Utilities in the first place?

The short answer: because naming is hard, and even harder when you don’t have the time to do it. Like during the process of building a website.

What ends up happening are CSS class names like section-hero-main, section-hero-main2 or section-main-hero. They all do almost the same thing but not quite. Multiply that a few dozen times and you end up creating a mess of CSS classes that you’re too afraid to touch for fear of breaking something on a page you don’t know about.

If this sounds familiar, you’ll especially appreciate using utilities.

Once you get the hang of it, you can build an entire website by writing just a handful of custom classes that’s easy to maintain, not just by yourself but anyone who’s familiar with the framework. Like your teammates who can jump in and know exactly what to do.

Add Stock to your Webflow project

Adding Stock to new or existing projects is super easy. Start by cloning this project here https://webflow.com/website/stock-utilities-cloneable . That’s it, easy peasy.

The utility clonable project contains a single page with all the utilities neatly organized inside a single parent div. This makes it really easy to try out even if you have a free Webflow account that only gives you two pages to start with. Either clone the project and get started right away or copy and paste all or parts of Stock into an existing project.

Since the naming convention we use is pretty specific, it’s unlikely that you’ll run into any conflicts, if you do though, you’ll want to make sure you clean out the duplicates before you get started.

‍