Design System with
Tailwind CSS
User inteface is the face of Aera
- All the hard work of BE and ML engineers hinges on the user experience
- An angry user can be consoled by a pleasant UI
- Consistency in the UI subconsciously builds trust
- For consistency, we need collaboration across teams
- For collaboration, we need better tools
- Better tooling will lead to better DX
- Better DX = Happy developers
- Happy developers = Happy users
What do DESIGNERS
really want?
- Margins and paddings
- Fonts and colors
- Shadows
- Border radius
- States - Eg. Active/Disabled or Hover/Focus
- Line height and font weight
and the list goes on...
PIXEL-PERFECT UI
AND CONSISTENCY
What do DEVELOPERS
really want?
- Fast iteration on the UI
- Match UI with designs
- More focus on the BL
- Less worries about CSS
- Realize what designers and product owners envisioned 🙂
RAPID AND NO-FUSS
DEVELOPMENT
Challenges faced by devs
- Distributed teams, multiple repositories and varied timezones
- Lack of standards and base stylesheet
- Lack of cross-tech consistency Eg. colors in JS/CSS/SCSS
- Updating base styles is painful
- Use of non-standard colors, fonts and measurements
- Duplicate CSS littered all over the codebase
- Bare strings of colors littered everywhere that are hard to verify in code reviews
Enter Tailwind CSS
What's it all about?
- Utility-first CSS framework with robust defaults
- Really fast UI development (once you get the hang of it)
- Easily extended configuration file --> Base stylesheet
- Responsive styling made wayyyy easy
- Intellisense and warnings for all classes for rapid development
/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) { }
/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) { }
/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) { }
/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) { }
<div class="flex items-center p-1 sm:p-2 lg:p-4 xl:p-6">
<p class="text-gray-500 text-base sm:text-lg lg:text-base xl:text-lg">
"Tailwind CSS is cool!"
</p>
</div>Before Tailwind CSS
After Tailwind CSS
37 lines ---> 3 lines
Huge reduction in
custom CSS
Standardize everything!
- Fonts, colors, element states, line heights, margins, paddings, border radius, shadows etc.
- Single configuration file that rules them all!
- Share the same base styles in JS, CSS, SCSS
- UX can actively maintain and approve base styles
Translate EXISTING Figma Design System into actual code to create a binding contract
Walkthrough
Q&A
Tailwind CSS
By Mihir Karandikar
