Engineering

Catching the Tailwind: Our Journey to Reablocks v6

Stephanie Yang

3/21/2024

Hello everyone! We're thrilled to share something big: the launch of Reablocks v6. It's more than just an update; it's a revolution in how we think about design flexibility and customization, thanks to integrating Tailwind CSS into our component library. The philosophy around Reablocks remains the same - to provide a library that doesn’t have too many designs or opinions so that you can easily customize the components for your use case. There are plenty of libraries out there that come with a fully decked out beautiful design and if you just need to use it out of the box, it’s awesome. The downside to this approach is that your application looks like every other application.

With Reablocks v6, we provide the same components as before, but with the ability to easily tack on your own Tailwind classes to customize your blocks, or not - the best part is, plain CSS is still just fine, if that’s what you prefer.

You might ask, why did we wait so long to adopt Tailwind? There are a few reasons -

• First, we needed to make sure it was going to stick around. Developers flock to new technologies like moths to a flame and we didn’t want to get caught in that trap. We’ve done our due diligence and think it’s stable and worth bringing into our project.
• Community. There’s something to be said about community. If not offering Tailwind as an option prevents users from adopting our library, then it’s worth reconsidering.
• We were running into a challenge with our current token system - what we like to call “CSS variable hell.” Customizing our components with design tokens (CSS variables) started off great, but we saw that the tokens list was growing and wondered about a better way to handle this.
• Finally, the flexibility Tailwind offers will drastically improve our own ability to move quickly with our projects.

Tailwind is a utility first CSS library. Its kind of similar to what Boostrap was in the early days of the web, but focuses on being more utility first and less opinionated on styles. In late 2022, Tailwind’s weekly downloads exceeded Boostrap and continues to climb.

Aware of Tailwind's growing popularity and momentum, we were intrigued to explore what made it so compelling in the developer community.

When we were first discussing the idea of adding Tailwind, one of the first things we couldn’t get past was that it was horrendously ugly and it felt a little bit like going back to writing inline CSS - while the classes are curated to package up common use cases (like flexbox) and standardize sizes of “things” using a base value, it still felt too easy to could go rogue. Our design system is based on a smaller set of tokens which allow us to stay within boundaries and move fast.

Above is some Tailwind CSS output - technically, you can organize all of these classes on it’s own line making it more readable, but there’s still a lot of translation from Tailwind to CSS happening internally along with translating exactly what -2 might represent. To make things harder, it can be different depending on what attribute you’re looking at.

vs how it looks as regular CSS - way more readable as not everything is inline, the values defined are clear despite using some CSS variables

Now, less about personal preference and more about standards - CSS is a browser standard while Tailwind is not. Yes, it builds on the same standards, but what happens if we have another left-pad incident? Ok, maybe that’s a little extreme but if a new hotness comes along and everyone decides to abandon ship on Tailwind, things will get interesting. We can count on CSS to stick around at least for a very long time, if not forever.

Finally, similar to CSS being a browser standard - you can count on any front end developer to know CSS like the back of their hand. While it helps that Tailwind is popular, it’s still a learning curve that smaller organizations may not have the time to ramp someone up on. If your runway is a year, do you really want to spend any part of that time ramping up on something that you could do in a fraction of the time?

There are a few other more minor things we discussed as a team as well:

• It’s harder to debug. Looking through and seeing the same generic classes all over the place doesn’t help you figure out where in the DOM you are.
• It’s harder to use with some other technologies like Framer Motion since it’s all class based and not colors. Since we use Framer Motion for every project, we had to be careful here.
• It’s yet another tool to maintain - keeping things up to date is work, even if you automate it. Tailwind adds a variety of new build and runtime tools to your stack that now needs managing.

Standardizing is hard. As previously mentioned, we started seeing that our design token system was starting to break down. With every new project or customization, we added more and more tokens.

An example of the tokens used for just our Button component. Yes, I did use one of the more egregious examples to make a point, but this is where we were headed for each component that needed heavier customization.

The cracks were starting to show and we needed to look for a solution to this problem. We help companies build large scale applications, so we are always looking for ways to improve our processes.

Originally, we considered StyleX as an option, but realized that this would lock us into a styled components framework making the transition more difficult. Ultimately, we gave Tailwind a shot since it more closely resembled what we already had. We prototyped what things would look like with a few of our components. The end sentiment was “ok, it’s not as bad as we thought” but we think it will be a win in the long run, giving us more flexibility to customize styling for our components.

Lucky for us, right as we decided to start this migration, Tailwind 4.0 was announced which even more closely resembles what we’re striving for, merging our concepts such as trying to keep things feeling like native CSS, using CSS variables, composablility and of course, speed,Ï with the flexibility of Tailwind so we get the best of both worlds.

The launch of Reablocks v6 is just the beginning of what promises to be an exciting journey into the future of web design and development. We invite you to explore the new features and possibilities that Reablocks v6 offers. Visit our website for comprehensive documentation, interactive examples, and all the resources needed to get started. Should you encounter any challenges or wish to share your experiences, our team is ready to assist and engage.

If you are already using Reablocks (❤️ and thank you!), we wanted to make sure you can get all the latest features and fixes as easily as possible thats why we with this project and all our other projects ensure a smooth transition. To help with this for this major version, we came up with an adapter which makes migration straightforward! Check out our migration guide for more information.

Ready for an adventure where every step is easy and exciting? Visit us at www.goodcode.us. Here at Good Code, we’re not just about making things work; we’re about making them work beautifully and safely. Join us, and see how we’re changing the game by making sure nobody hits a dead end on our watch.