Tell your designer that you use Tailwind
Preferably before they start working on the project. Seriously.
What’s Tailwind?
A utility-first CSS framework packed with classes like
flex
,pt-4
,text-center
androtate-90
that can be composed to build any design, directly in your markup.
Check out more info at Tailwind website: https://tailwindcss.com/
Do not repeat our mistakes
For the last couple of months I’ve been working on a web-marketplace startup called Barter. When we were planning the application, we didn’t think of user interfaces at all - we only outlined the big pieces of logic, gradually refining them afterwards. So I built some kind of prototype - going with the easiest and fastest-to-write solutions in UI problem space, thanks to Tailwind and its amazing design choices.
This prototype later served as a skeleton for the future UI. We did not have an experienced designer 💅 at hand, so our team just went to learn and create a UI design themselves. In about 2 weeks, the result was done 🎉 - very pleasant to look at, but really unpleasant to implement. The paddings and margins seemed kind of random, the colors were guessed, there was no common ground for UI components to share - total disaster when you want to write a good product fast.
The guys shared their experience about creating this Figma UI - and who could’ve guessed - they hated this guess-game with the paddings, shadows, colors and many similar things. They had to come up with their own ideas without intimate UI/UX knowledge. And then it clicked - why don’t I just send them a link to a Tailwind website?
How Tailwind integrates into design system
Tailwind team has solved a whole bunch of problems for you, my friend, so that you and your team don’t have to. The fact that Tailwind comes with a finite amount of predefined classes is a very useful restriction - you get less options to choose from, and these options are more likely to be good!
How do I choose a precise number for border radius? Should it be
3px
or5px
?
You don’t - just use rounded-md
! Tailwind liberates your from thinking about specifics and allows you to think on a higher level, while simultaneously keeping things consistent.
This
shadow-lg
is not large enough for my component? - Whatever, I’ll make it extra large withshadow-xl
.
Imagine how having this restrictions actually helps designers do their job! If I was to show Tailwind to the team before they started working on a design, they would’ve finished it ~2x times faster and enjoyed it a lot more. Luckily it wasn’t too bad for us yet, so we went to rewrite some design parts to respect the Tailwind choices.
The development process is always much better and enjoyable if the design system was built with Tailwind in mind. If you are interested to see what we ended up with, check out Barter here: https://barter-eco.com