This month, Netlify acquired Gatsby which adds to a growing list of similar acquisitions in recent times such as Vercel acquiring TurboRepo, and hiring Rich Harris (creator of Svelte). Vercel are also the creators of NextJS, one of the most prevelant web application development frameworks currently out there. It’s clear that a deep partnership between DevOps platforms and development frameworks is a win-win for the developer community, as it greatly lowers the barrier to entry for new developers, and allows experienced ones the luxury to focus on building a great product, and not worrying about all the nitty gritty details.
When attempting to draw a parallel with the design world, one obvious alliance stood out. Figma and Tailwind. Imagine a future in which you could design a website or app using Figma using its design system, auto-layout feature, components, varients, etc. and generate pixel perfect front-end code, components and all, styled with Tailwind.
This is just an opinion piece, but one that I’ve given a lot of thought. So if you’re interested in this thought experiment, read on.
Why the Tailwind team?
First and foremost, the team behind Tailwind are absolute rockstars. The founders, Adam Wathan and Steve Schoger literally wrote the book on how to design for development. The rest of the supporting cast like Jonathan, James, Robin and Jordan and are cut from the same cloth as the team embodies what it means to be obsessed with pixel perfect. They are extremely thoughtful in their approach and it shows in the products they put out in the world, whether it’s the constant stream of new features and updates they roll out, the beautiful templates on Tailwind UI, the pre-built components on Headless UI, or the incredible developer experience around the Tailwind documentation. It is clear that this high standard they’ve set permeates through the company and would be a fantastic fit with Figma who seem to be of the same ilk. I can think of no better sheppards for a massive undertaking like this than the good people at Tailwind Labs.
Is Tailwind even needed to make this happen?
In the conversation of using Tailwind as the styling framework versus just generating standard CSS to accomplish the same task, there are many benefits of going with Tailwind. Similar to what made Figma such a differentiator from the other competitors in the landscape, the core of what Tailwind believes in and focuses on is the design system. This is what set Figma apart from Photoshop which was heavily being used in web design back in the day.
Also, if you are generating pure CSS from Figma designs, you will run into the pesky problem of naming classes which would be difficult to infer from design files. This is one of the things that Tailwind takes pride in eliminating from your workflow as a frontend developer.
Then there is the challenge of different screen sizes, variants, hover states, focus states, and so much more. Tailwind has thought through all the different permutations and carefully crafted helpers to manage even the most complex designs and build pixel perfect frontends.
Similarities in workflows
When you design a component in Figma, or create the same component in React + Tailwind, the parallels in the workflows are uncanny. For example, if you are creating a Button component, in Figma, you will likely start with an auto-layout frame, define the padding from the top/bottom and left/right, specify how rounded you want it to be, select colors from your design system for the background and text, choose the font weight and size. This will get you the basic foundation of your button component (you can work on variants like hover and focus states later).
When coding this out, you will do exactly the same thing. Create a button tag and use classes like w-auto to define its width, px-4 to define horizontal padding, py-2 to define vertical padding, rounded-lg to define how rounded the button needs to be, bg-primary-600 to select the button color, text-secondary-400 to select the text color, font-semibold and text-sm to define the text weight and size. It almost feels as if these two tools were made for each other.
When we get into complex situations like responsive design, screen breakpoints, etc. it starts to get more intense, but nothing that can’t be managed. We do it every day here at Cygnis Media.
Conclusion
It’s easy to see why a partnership between Figma and Tailwind would be incredibly beneficial to both developers and designers alike. It would enable developers to quickly create beautiful and effective designs without having to worry about the nitty gritty details of coding, while designers can feel confident that their designs are rendered perfectly in the browser. Figma and Tailwind are two tools that are made for each other, and if Figma were to acquire Tailwind it could be the start of something revolutionary.
