blog: tell your designed that you use tailwind

4 files changed, 40 insertions, 0 deletions

diff --git a/src/blog/2022-10-16.md b/src/blog/2022-10-16.md
new file mode 100644
index 0000000..8c13314
--- /dev/null
+++ b/src/blog/2022-10-16.md
@@ -0,0 +1,32 @@
+# 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
+
diff --git a/src/blog/index.md b/src/blog/index.md
index ebfb9e3..c486fe7 100644
--- a/src/blog/index.md
+++ b/src/blog/index.md
@@ -2,6 +2,10 @@
 
 ## 2022
 
+### October
+
+- [Tell your designer that you use Tailwind :tailwind:](2022-10-16.md)
+
 ### September
 
 - [Plaintext accounting :hledger: is cool](2022-09-30.md)
diff --git a/src/public/emoji/barter.svg b/src/public/emoji/barter.svg
new file mode 100644
index 0000000..86a2a3d
--- /dev/null
+++ b/src/public/emoji/barter.svg
@@ -0,0 +1,3 @@
+<svg width="39" height="42" viewBox="0 0 39 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.8663 35.1732L33.9204 14.3512C33.6946 13.3858 33.1922 12.506 32.4739 11.8182C31.7555 11.1305 30.852 10.6643 29.8727 10.4761H29.7703C29.5015 10.4492 29.2513 10.3272 29.0655 10.1322C28.8797 9.93722 28.7707 9.68233 28.7584 9.41409C28.5424 4.49953 24.5288 0.533989 19.5601 0.500095C17.1561 0.489255 14.8415 1.40493 13.1028 3.05463C11.3641 4.70433 10.3368 6.95958 10.2367 9.3463V9.3802C10.2326 9.65137 10.1284 9.9116 9.944 10.1115C9.75957 10.3114 9.50771 10.4371 9.23619 10.4648L9.08838 10.4874C8.11786 10.6833 7.22411 11.1513 6.51285 11.836C5.80158 12.5207 5.30255 13.3936 5.07479 14.3512L0.140224 35.1732C-0.0399322 35.9254 -0.0465793 36.7085 0.12078 37.4636C0.288139 38.2188 0.625172 38.9266 1.10667 39.5341C1.6054 40.1505 2.23747 40.6473 2.95593 40.9876C3.67439 41.3279 4.46079 41.5031 5.2567 41.5H33.818C34.5987 41.4979 35.3689 41.321 36.0714 40.9824C36.7738 40.6439 37.3905 40.1525 37.8755 39.5446C38.3606 38.9367 38.7015 38.228 38.873 37.4712C39.0446 36.7144 39.0423 35.929 38.8663 35.1732ZM13.7273 9.70784C13.7288 8.94691 13.8822 8.19383 14.1786 7.49223C14.4751 6.79064 14.9088 6.1545 15.4545 5.62066C16.0002 5.08682 16.6471 4.6659 17.3577 4.38231C18.0683 4.09871 18.8285 3.95807 19.5942 3.96853C22.7664 4.02502 25.2792 6.64612 25.2792 9.79822C25.2792 9.95403 25.2169 10.1035 25.106 10.2136C24.9952 10.3238 24.8448 10.3857 24.688 10.3857H14.3186C14.1618 10.3857 14.0114 10.3238 13.9005 10.2136C13.7896 10.1035 13.7273 9.95403 13.7273 9.79822V9.70784ZM3.89231 37.444C3.72312 37.2408 3.60332 37.0016 3.54219 36.7449C3.48107 36.4882 3.48026 36.221 3.53984 35.964L8.4744 15.1534C8.56156 14.7839 8.77184 14.4544 9.07111 14.2186C9.37038 13.9828 9.74108 13.8543 10.123 13.8541H18.4572C18.7347 13.8541 19.0007 13.9637 19.1969 14.1586C19.3931 14.3535 19.5033 14.6179 19.5033 14.8935V21.3559C19.5033 21.6316 19.3931 21.896 19.1969 22.0909C19.0007 22.2858 18.7347 22.3953 18.4572 22.3953H15.7057V21.1074C15.7044 20.9256 15.655 20.7473 15.5627 20.5903C15.4703 20.4334 15.3382 20.3032 15.1794 20.2129C15.0206 20.1226 14.8407 20.0752 14.6578 20.0756C14.4748 20.0759 14.2951 20.1239 14.1366 20.2148L8.88372 23.2201C8.72296 23.3108 8.58926 23.4422 8.49625 23.601C8.40324 23.7597 8.35424 23.9402 8.35424 24.1239C8.35424 24.3076 8.40324 24.488 8.49625 24.6468C8.58926 24.8056 8.72296 24.937 8.88372 25.0277L14.1366 28.0329C14.2951 28.1238 14.4748 28.1719 14.6578 28.1722C14.8407 28.1725 15.0206 28.1252 15.1794 28.0349C15.3382 27.9445 15.4703 27.8144 15.5627 27.6574C15.655 27.5005 15.7044 27.3222 15.7057 27.1404V25.8637H23.3008V24.7453C23.3022 24.5635 23.3515 24.3852 23.4438 24.2282C23.5362 24.0713 23.6684 23.9411 23.8271 23.8508C23.9859 23.7605 24.1658 23.7131 24.3488 23.7135C24.5317 23.7138 24.7114 23.7618 24.8699 23.8527L30.1228 26.858C30.2807 26.951 30.4115 27.0832 30.5024 27.2417C30.5932 27.4002 30.641 27.5794 30.641 27.7618C30.641 27.9442 30.5932 28.1234 30.5024 28.2819C30.4115 28.4404 30.2807 28.5726 30.1228 28.6656L24.8699 31.6708C24.7114 31.7617 24.5317 31.8098 24.3488 31.8101C24.1658 31.8104 23.9859 31.7631 23.8271 31.6728C23.6684 31.5824 23.5362 31.4523 23.4438 31.2953C23.3515 31.1384 23.3022 30.9601 23.3008 30.7783V29.3322H20.5493C20.2738 29.3322 20.0095 29.4401 19.8136 29.6326C19.6178 29.8251 19.5063 30.0866 19.5033 30.3603V36.9921C19.5033 37.2678 19.3931 37.5322 19.1969 37.7271C19.0007 37.922 18.7347 38.0315 18.4572 38.0315H5.22259C4.97143 38.0341 4.72263 37.983 4.4931 37.8817C4.26356 37.7803 4.05866 37.631 3.89231 37.444Z" fill="#2F80ED"/>
+</svg>
diff --git a/src/public/emoji/tailwind.svg b/src/public/emoji/tailwind.svg
new file mode 100644
index 0000000..6a9ab49
--- /dev/null
+++ b/src/public/emoji/tailwind.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33"><g clip-path="url(#prefix__clip0)"><path fill="#38bdf8" fill-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" clip-rule="evenodd"/></g><defs><clipPath id="prefix__clip0"><path fill="#fff" d="M0 0h54v32.4H0z"/></clipPath></defs></svg>
\ No newline at end of file