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
Intellisense and warnings
/* 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

Made with Slides.com