Adam Wathan - Tailwind CSS Best Practice Patterns

[@KlippiesNBiltong]

Tailwindcss opened the idea that you can actually do css yourself. You don't have to live inside the bootstrap box and now you are able to look outside. Adam is the man!

[@perfect.stealth]

You always could.

[@NortheastGamer]

Extract components, not classes: 4:29 No Sass? No problem: 9:55 Use SVG like it's going out of style: 13:55 Don't be afraid to extend the framework: 20:02 Prefer inline styles to weird custom classes: 25:27 Remove unused classes with Purgecss: 28:48

[@maxgeorgopoulos3516]

Tailwind is so powerful. I now do 90% of my design with tailwind (10% in Figma)

[@olivierbassin286]

Adam is such an upbeat dude, listening to him always helps me find motivation for anything.

[@brandon5058]

Olivier Bassin me too! After listening to this talk i finally survived no nut november

[@nicolaskeith8872]

"Beautiful blob, designed by my beautiful friend Steve." Oh, Adam, you keep me young

[@luismoriguerra669]

tailwind is an API for your design system, and only that makes it amazing 👏️

[@sivuyilemagutywa5286]

Ever since I started using Tailwind, I actually enjoy CSS, Easy to customize the framework

[@Andrey-il8rh]

The great talk I stumbled upon only now. It's really nice to see how much Tailwind evolved over these 2 years and some of the stuff such as long compilation times, "no animations", not able to apply arbitrary values per breakpoint, html duplications just for responsive reasons, all of this stuff is no longer the case in the new version of Tailwind and each day some new improvement is on the horizon. Great work, Gendalf Adam! 🧙🏻‍♂️

[@mischl1]

@AdamWathan Thanks for giving us a bit of insight into how you work! Awesome talk!

[@cyberloh]

this guy rocks! for the whole my life i hated css before finding tailwind

[@BibeshManandhar]

The second last trick is awesome. Actually the whole video is awesome 😍😍

[@DrewRoberts]

I'm allergic to CSS, but Tailwind CSS does not have those same side effects. Once you get over having hundreds of class names, you will love your new allergy free lifestyle. I highly recommend checking it out if you're on the fence with utility-first CSS frameworks.

[@insanecuckooman8342]

how id using hundreds of class names, better than just using css. tailwind is inline css with extra steps.

[@Andrey-il8rh]

@@insanecuckooman8342 you should really think about changing profession, they say that rolling burgers is still in high demand

[@tamrat_assefa]

That SVG trick was neat. ViewBox is the boss!

[@heyjordn]

This talk was so awesome!

[@thekwoka4707]

The second to last point about inline styles isn't an issue anymore with the JIT module for Tailwind. You can put arbitrary values on the normal class name with breakpoints and whatever however you want.

[@versastudio9198]

Excellent talk, super helpful.

[@himbary]

He is such a cool guy

[@tcindie]

What is the browser/tool in use next to the IDE with the breakpoints/etc built in? Is that a vscode plugin? Would love to find this is looks incredibly useful

[@drehimself]

sizzy.co

[@LenWoodward]

When we was alt-tabbing it looked to me like it called Sizzy. I defs paused to write it down. In some of his other screencasts he's used a chromium based browser named Polypane as well.

[@tcindie]

Thanks guys. :)

[@mikeyura]

What is that browser he's using?

[@sebastiangon11]

It's Sizzy

[@iamthekingofchoco]

@@sebastiangon11 arrrgh it’s paid

[@jantube358]

@@iamthekingofchoco woah $499 for a one-time purchase is a no

[@delulu6969]

The diagonal shape can be done with clip-path much easier and appropriate. I use Tailwind but for that kind of customization it's better to include plain CSS.

[@michaelwarren2100]

How do you ensure the blob goes behind the image and the text?

[@hellobye9049]

position: absolute and a low z-index if you need it. example using tailwind classes " "

[@jma42]

Does 11:12 solve the class naming problem like css modules does?

[@ashleyredman]

Generally I don't usually go to use purge css incase of removing styles that are on events or not active on a build, but I guess with tailwind is more or less everything is applied through a class or inline then it makes much more sense, will try this out! Thanks

[@Andrey-il8rh]

no need for it since v2 JIT

[@anstapol]

How you deal with code splitting? Or you just loading all of your style on all pages?

[@Andrey-il8rh]

since in most cases purged tailwindcss version is no more than 10kb gzipped there is no special reason to split it in chunks. You can just inline it in head and view it as critical css

[@mohammadpartovi1813]

Fantastic!

[@atomtopa]

I am finally sold.

[@RandomGuy1606]

I can actually get design feedback building the actual html/css with tailwind and hot reloading than I can building the design mocks in Figma or Sketch

[@maxgeorgopoulos3516]

Same here. Since using tailwind, I do 90% of my designing in HTML&CSS.

[@rolanddecasa4438]

yeah ur right man! love tailwind 27:15

[@ProgrammingwithPeter]

Great talk, i'm thinking of using Tailwind on my youtube series .

[@ekmanhsieh]

Nice vidoe！Has anyone can tell me, right side of screen software or extension is？

[@script7085]

sizzy

[@gitarthakashyap8519]

Apply 5:37

[@tanzimibthesam5861]

So no more Bootstrap?

[@КонстантинС-ж1ы]

I think bootstrap is a great choice when you need to build something fast and don't care about custom design. But when your project requires unique design, tailwind will better imho.

[@Booyamakashi]

@@КонстантинС-ж1ы Yep. Exactly.

[@med5032]

@@КонстантинС-ж1ы Not really. fast = tailwind.

[@JohnSmith-zl8rz]

Bootstrap always was shit!

[@Andrey-il8rh]

Bootstrap can't be compared to TW it's like bananas and marshmallow

[@anticom1337]

Does anyone know what this browser preview thing is on the right side of his screen?

[@luthfitriatmaja3709]

That's Sizzy

[@anticom1337]

@@luthfitriatmaja3709 Thanks!

[@ahmadkhudai]

@@luthfitriatmaja3709 thank you! I was going to ask the same thing

[@kevinnacario359]

the best

[@ramazanaktas3699]

Which editor is he using?

[@dwainetrain]

Looks like VS Code. For the screen on the right, I think he's using Sizzy. sizzy.co/

[@ramazanaktas3699]

@@dwainetrain Thanks for your comment, and I checked out Sizzy. It really looks useful but I found prices expensive. I just wondered that live preview, and found an extension called Browser Preview and will preview mobile just through a Chromium-based browser. Thanks again. Edit: Somehow, it doesn't work, maybe I got something wrong.

[@699088g]

@@ramazanaktas3699 its just a split view mode in macOs

[@MrAtomUniverse]

5:40 isn't this like CSS

[@Rendxn]

Yes, but you are using the @apply directive to apply tailwind classes inside your btn class

[@designdust]

@@Rendxn well then just use raw CSS or SASS instead of bombarding your markup with @apply directive.

[@gustavovasquezveliz7046]

@@designdust @apply may be the awful thing of tailwind, but using it does not mean you will need to remove tailwind and go for raw css

[@andresfrr100]

It´s a BEM murder.

[@rajeevdsamuel]

If you want a front-end developer job you are still going to have to learn css

[@trkishh]

You have to learn CSS first before you can even use Tailwind. You have to know CSS before you can utilize or know what any of the classes do.

[@uxcoda8806]

Awesome talk but duplicating an SVG instead of creating a custom class to handle media queries. That's sacrilege!

[@Booyamakashi]

Sara Soudain, SVG guru, tweeted recently that she is inlining 99% of the times.

[@ClintonGreen77]

@@Booyamakashi yeah I'm totally for inlining SVGs. I just can't get behind duplicating an SVG to look different on different breakpoints. That goes against responsive design.

[@med5032]

gzip, my friend. duplication there is sound and sensible.

[@ClintonGreen77]

@@med5032 Yeah gzip is the shizz. Good idea.

[@IfanIqbal]

I think Adam just want to show us that specific use case when we could only inlining styles. Tailwind CSS itself has responsive utility for size and position. Maybe, he decided not to demonstrate it for a reason.

[@PrinjuVaidyan]

I think this is making html very vague

[@madsouris]

it feels like writing XAML in a way, but it's class instead of attribute.. Bad idea for static HTML and CSS writing, but best idea imo when we start using component and don't repeat ourselves.

[@noobslayer9291]

bruh its just bootstrap and no brainer

[@Andrey-il8rh]

kzbin.info/www/bejne/nHOnmpmLn7OtmLM

[@perfect.stealth]

I don't understand what the hype is about. It really doesn't solve any problem

[@scriptkeeper8243]

faster and smarter, CSS is probably the most illogical way of doing anything TW seems to help move it into being more organized.

[@klarnorbert]

@@32fw34dgasdfg Sass and Less already solved those problems. You don't need a single CSS framework these days.

[@xucongzhan9151]

@@klarnorbert Not really. With SASS and Less, you still have to intentionally build out your utilities manually. It's much much more work. It's essentially building your own CSS framework. And more often than not, people just get lazy and fall back to those semantic CSS class names like confirmation-modal-body/reset-password-modal-body, etc. and define margins/paddings/font-sizes manually in those classes. 24px here and 20px there. Those are hardly any better than using plain CSS. Maybe nesting? I've worked on projects with SASS and Less, and no they are not as convenient, at all.

[@klarnorbert]

@@xucongzhan9151 Sure, you're right. But those css prepocessors solved the issues with scalability and maintainablity. Sure, you need to wrote your own "framework", but it's really easy to do these days with grid and flexbox. Bootstrap solved issues when there was no grid and flexbox. Btw who still using pixels? lmao Also there's BEM, that you can use to name your classes.

[@Andrey-il8rh]

@@klarnorbert what if I tell you that all of these fancy tools are not needed when you have TW?