Tailwind UI is the IKEA of CSS Frameworks
Design systems are akin to IKEA furniture
I often use the analogy that design systems are akin to IKEA furniture. There are an array of generic components in a warehouse that can be picked and assembled in numerous configurations, using instruction manuals.
It's a similar situation with a component library made from HTML, CSS, JS and accompanying documentation.
The common thread here is that the key to the puzzle of how to build something is that someone has been through the process of constructing, deconstructing, and documenting how to do it.
It's not expensive
IKEA furniture isn't expensive. It’s practical, looks good, and pretty sturdy. Putting it together following instructions is time-consuming and laborious, you become the middle-man.
At the end of the process you produce a functional piece of furniture that will last a long time, fairly quickly. It will look good, and anyone who's built IKEA furniture or has the faintest idea what it is, knows it’s from IKEA when they squint their eyes and gaze upon it.
How does this relate to Tailwind UI?
I had the realisation that the experience of using Tailwind UI to build with was all too familiar. It seemed like I was ticking off boxes from a list of steps in an instruction manual. Tailwind UI don't give step-by-step instructions, these were just in my head. I suppose that's testament to how good their documentation is, especially the code samples.
I was annoyed too. I know how to recall CSS better than I can recall the utility classes that are prescribed by Tailwind, and really wasn't happy going back-and-forth to the Tailwind CSS docs just to find out how to write a line of CSS! The only thing worse than that would be having to write the CSS in the HTML and... yep, they insist you do that too 🤦.
Like some flat-pack furniture, initial reservations didn't hold up
Giving in to IKEA once in a while to get the job done makes sense, likewise the same applies with Tailwind UI, however, if you're new to it that may require getting over personal reservations about Tailwind, e.g. in my case:
- Writing CSS using HTML — it feels like standing in custard
- Admitting to myself using it could be quicker than writing my own framework from scratch for a project
- Being a bit of a CSS snob
A cunning plan
Headless UI (another Tailwind product) is comprised of a suite of generic components that are accessible, tested, built to a high standard and take very little understanding to get off the ground with, especially when augmented with Tailwind UI (it's almost like they planned it).
When combined with design hand-off in the form of Figma designs (created using a Tailwind compatible library), Tailwind's documentation, code samples, IDE autocompletion, and an ability to write code daily means you can be really productive.
Clearly, assembling the constituent parts together like this was a well-thought-out concept, the way the modules are abstracted so they can be treated individually, or re-assembled in various configurations, just like IKEA furniture... very smart, almost Scandinavian.
What impressed me most
I've created design systems from scratch, right from the defining principles, and then written code that adheres to that system. I've worked on design systems conceived by others, I know what's involved. I know how long they can take, the amount of thought and research that can go into them (or not), depending upon time and budget, and up until recently if someone asked me to use Tailwind on a project I would have told them that I would rather create my own system, and rejected the idea.
So what changed?
On a recent project I worked on, the budget was limited, there was a very small team and the company wanted to get a product released quickly. They didn't see any value in creating a design system and framework from scratch, nor was it needed. This was a good opportunity to use a framework, and that's what happened.
I don't want to go through life looking from the same perspective all the time. Recently I've been very open to trying new things, Tailwind is one of them.
What's impressed me most is how productive I can be using Tailwind UI with my existing understanding of design systems, and understanding of how to write components that are part of a system.
Written by Morgan Feeney
I’ve been designing and developing for almost 2 decades.
Read about me, and my work.
For juicy tips and exclusive content, subscribe to my FREE newsletter.
