The Tailwind Utility-First Workflow

Adam Wathan
InstructorAdam Wathan

Share this video with your friends

Send Tweet

Learn how to style HTML elements with Tailwinds utility classes.

We'll adjust size and positioning with padding, margin, and height as well as style text elements color, weight, and spacing through more utility classes

~ a year ago

What is the side preview pane that you use?

Matthias
Matthias
~ a year ago

I still don't get the advantage of tailwind.

To design your button you have added like nine separate classes to get the design you wanted. Now, on a normal page that will not be your only button. You will have buttons all over the place and you will want them to look consistent.

When your boss comes and tells you "Focus tests have shown that our indigo buttons do not entice enough people to click them. Make them dark red instead!", you would have to go through all your html changing "bg-indigo-500" to "bg-red-900" (or whatever), where in classic CSS you would just change you "cta-button" class once and would be done with it?!

It just seems like design with extra steps...

Edit: well, never mind, I should have watched the rest of the videos beforehand... :D

Zac Jones
Zac Jones
~ a year ago

What is the side preview pane that you use?

Adam is using Sizzy app!

Stephen James
Stephen James
~ a year ago

I am using VS Code - how are you getting the auto complete for the tailwind classes

Adam Wathan
Adam Wathaninstructor
~ a year ago

Hey! This plugin:

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss