1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
---
layout: ../../layouts/BlogLayout.astro
---
# Tell your designer that you use Tailwind :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` and `rotate-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: Barter](https://barter-eco.com). 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 :nail_care: at hand, so our team just went to learn and create a UI design themselves. In about 2 weeks, the result was done :tada: - 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](https://tailwindcss.com) website?
## How Tailwind :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` or `5px`?
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* with `shadow-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: Barter here: https://barter-eco.com
## Bonus - Tailwind cheatsheet
https://nerdcave.com/tailwind-cheat-sheet
|
