Projects
Design Systems & UI Framework Integration

Layers

background
title1
brief
subtitle1
why-tailwind
part1
part2
how-tailwind
part2-s1
arrow
part2-s2
part2-s3
arrow2
part2-s4
part2-s5
arrow3
part2-s6
part2-summary
part2-curl-arrow
part2-summary-text
ui-design-tokens
title2
content1
color-palette
font-weights
font-sizes
radius-title
shadow-title
tailwind-config
tailwind-config-title
typography
title3
tw-content
tw-code-colors
tw-code-fonts
tw-code-radius
tw-code-text
tw-code-shadow
tailwind-lecture
title5
convertor-description
video-1
video-description
video-2
video-description2
sticker
problems
title6
description6
video
lecture-video-1
description7
lecture-video-2
description8
description9
description10
tailwind-meme

Properties

Double click to select a layer

Background
This part is about how I use tailwind to build consistent and scalable design systems.
Why Tailwind?
There are thousands of files in the project. And it's consuming a lot of time to create a new scss file for each new component.
🕺 With Tailwind
1<div className="flex gap-2 items-center">
2  {text}
3</div>
🤷‍♂️ Without Tailwind
1/* use scss */
2<div className="center">
3  {text}
4</div>
.center {
  display: flex;
  justify-content: center;
}
New File 😈
How Tailwind Helps?
UI Design Tokens
arrow
Tailwind Config
Tailwind Tokens
Design Draft
arrow
Done Tailwind Convertor
Tailwind CSS
Frontend Engineer
arrow
Tailwind Lecture
Design Engineer
arrow
Well Designed Product !!!
UI Design Tokens
This is the design system of our product. (Example)
Color Palette
Font Weights
Light300
Regular400
Medium500
Semibold600
Bold700
Font Sizes (Line Height)
10px(18px)
12px(20px)
14px(22px)
16px(24px)
18px(26px)
20px(28px)
24px(32px)
28px(36px)
32px(40px)
Border Radius
0px
2px
4px
6px
8px
12px
Shadows
rise
popup
Tailwind Tokens
Generated Tailwind CSS tokens. (Example)
bg-brand
bg-brand-border
bg-brand-background
bg-error
bg-error-border
bg-error-background
bg-warning
bg-warning-border
bg-warning-background
bg-success
bg-success-border
bg-success-background
bg-waiting
bg-waiting-border
bg-waiting-background
bg-invalid
bg-invalid-border
bg-invalid-background
text-brand
text-brand-border
text-brand-background
text-error
text-error-border
text-error-background
text-warning
text-warning-border
text-warning-background
text-success
text-success-border
text-success-background
text-waiting
text-waiting-border
text-waiting-background
text-invalid
text-invalid-border
text-invalid-background

font-light
font-normal
font-medium
font-semi
font-bold

radius-none
radius-sm
radius-md
radius-lg
radius-xl
radius-2xl
radius-3xl
text-xs
text-sm
text-md
text-base
text-lg
text-xl
text-2xl
text-3xl
text-4xl

shadow-none
shadow-rise
shadow-popup
Done Tailwind Convertor
It's a tool that converts visual draft (like Figma) to tailwind code.
As you can see, it turn the blue button to `bg-brand rounded-lg`, and the text to `font-medium text-md text-black`.
And it also can convert css code to tailwind code based on Design System.
which means there's no need to memorize the tailwind class names.
Don't need care about the Style.
Double click and Apply.
Tailwind Lecture
Yes, In order to help my team, I made a lecture about Tailwind.
Hover over to explore the interactive preview ✨
Instead of boringly explaining the concepts of Tailwind, I made a lot of playgrounds to help them understand the concepts and practice at the same time.
And also show them how to use the Chrome extension to convert css code into Tailwind classes.
Through this lecture, my colleagues learned the basics of Tailwind CSS, as well as how to use the tools I developed to efficiently convert design drafts into actual web pages.
Now, everyone on the team has fully
switched from SCSS to Tailwind.
Tailwind Meme