Building Intercom's Inbox UI with Tailwind CSS

[@rubengroot]

This video is what taught me TailwindCSS 2 years ago, so glad I did, it made me go from backend developer with a little HTML knowledge to fullstack developer

[@BlakeJohnson1]

I’m about the furthest thing possible from a front end dev, but I found this very accessible both as an introduction to tailwind and just to an overall workflow for developing a page layout. Thanks for sharing!

[@blackcirclewalker]

> I’m about the furthest thing possible from a front end dev you're a sniper? 😲

[@DevTeacher]

Ohh the throwback about rounded corners with graphic and tables was epic. I remember cutting images and writing entire layouts with tables and framesets. Good old ‘90

[@nicolaskeith8872]

I remember the rounded corners in Photoshop. Those were NOT the days, however, if you DID do it, you really set yourself apart. Nobody else was doing it.

[@tusharshukla4362]

This is beyond awesome. Your thinking process is inspirational.

[@raghavsharma5541]

Dude you deserve a hell lot more of subs! Great content, please create a detailed series of tailwind tutorial "Beginner to Expert" sort of a thing.

[@chizuru1999]

bruh tutorial on tailwind? I guess I will take for the postconfig and all that shit they offer but not for the actual css. For that you need to constantly search their website. Annoying at first but once you get it, its easy.

[@davinci2977]

This video is goated, the simplicity and his thought process is amazing.. It really helped me think better as a developer, thanks to the creators, you guys rock!

[@indigo0086]

This is great, I've been following it as I'm a developer who is terrible at understanding design for my own projects. Following this step by step is advisable and its' giving me a lot of insight in the thought process of designers. I'm glad tailwind makes it easy to both understand the utilities and css and design all in one go.

[@devneo8272]

amazing video. I just started with tailwind css today and I learned so many things alone from this video. Just Amazing

[@lukas.webdev]

If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) 😉

[@nostrorom]

Glorious content ! Impressive on-the-fly knowledge of what to look for to achieve the desired results, and a great display of different stuff that TW can do. I'd watch a similar video on responsiveness, with things that display or don't, or switch from row to col depending on breakpoints etc.

[@barts5040]

Now I feel old, when I think about those rounded corners with tables and photoshopped images :). Brilliant demo/build btw!

[@youssefvideotube]

This is the best tailwindcss video on yt ! Thank you so much for your help ! I feel like Neo on matrix when he learned kung-fu !

[@liveworsei5681]

Such a legend! Your mind is processing so fast which is fascinating. Much appreciation Gavin & Peter !

[@ifindev]

This is so cool!!! It's really amazing to see what can be build from just tailwind classes. Thanks for making this video. So pumped to use tailwind now 😁

[@mukut5ul]

Great hands on exercise with explanation fixing, aligning, etc.

[@truth-is-only-one]

It is very good way to explain tailwindcss, thank you so much. Btw you deserve a lot subscribers on your channel.

[@tluanga-ruatpuii-pa]

please create more content..this is the best tailwind course i have seen sofar

[@lukas.webdev]

If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) 😉

[@decordelights_]

what a gem this channel is

[@joshgordon7299]

love that you're using vim

[@mirsella6204]

nvim*

[@hakizuri]

I once bootstrap user, when i found out about tailwindcss, give it try and never comeback to bootstrap. literally i can build my own design, responsive, and fast build. totally love it. now they have apply function where i can set group of class into one class. super gg

[@heybrother4698]

You're so cool, thanks a lot. I knew the theory of tailwind but I don't know how to use it in a real project and put it all together. The problems like grouping the vertical rounded options on the top and bottom and using multiple flex containers to achieve the base layout was very helpful. I'm gonna practice this tomorrow to make sure I get it. Thanks a lot!

[@anggafebrian2279]

I think He is Master of Tailwind, I wanna be your student.. regards from indonesia.

[@theaveragecoder6182]

My man slaying down front end with logic .

[@puchesjr07]

Great work by you and the team! Love that you're using ember too!!! A good series might be to take these things and break them down for people to see how to make a reusable component

[@gavinjoyce]

Thanks. Nice idea, we'll try that in the next video

[@ltenzil6558]

Awesome video, great explanation. kudos. looking for more...

[@aadams99]

Wish you would have did a demo that would show the message pane sliding over the Inbox window too. Anyhow, thanks for this cool overview.

[@fakabbiramin6272]

One of the most useful video on front-end, loved it.

[@MrKT778]

Excellent content. Looking forward to using Tailwind in my next project.

[@KuroSamaMG]

Very well explained, even if it's close to 2hrs time flew by. Def gonna test tailwindcss now

[@rob_m]

A fun run through. The 'Add conversation title' focus and hover input class code I used - class="text-sm border-b border-dashed border-transparent hover:border-gray-200 focus:border-gray-200 placeholder-gray-400 outline-none"/>

[@Grazh0per]

wow - this was super cool to watch!

[@davidsonzed]

I haven't finished half of this, but I am really liking this stuff. this is excellent :)

[@hamzazafar3487]

Ohh man ! you're amazing, I just started tailwind and it helped alot... Thanks for this kind of content.

[@karimabouzeid395]

great stuff. also +1 for using vim & tmux!

[@danielpaszek9071]

Great video. Not only I learnt tailwind but also everything I wasn't sure about css is clear now (like diffrence between justify-items and align-items). Thx

[@GintsPolis]

So many thanks for making this. Wonderful!

[@msalkhawarizmi]

this is what i'm looking for. thanks bro! great video!!

[@miguelfernandes657]

Amazing walkthrough! Learned a lot, thanks!

[@FrancoMunizAR]

This video is gold!

[@UBLAunripped]

WOW so cool - what a great tutorial - thank you - we gained a lot

[@ermalgashimramori]

Great Content.

[@lukas.webdev]

If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) 😉

[@ahmedidris305]

Perfect tutorial, Thanks a million Sir.

[@braulioantonio4375]

Awesome, awesome material !

[@estyaquezann9544]

This was really helpful...thank you very much bro..

[@kelvinsmith4894]

Was this responsive at the end? btw awesome job and I'm thinking of switching from bulma

[@amitmandaviya]

Greate tutorial @Gavin. well done.

[@xbmcme9768]

Great content! Learned a lot!

[@gloryths]

Nice video man. Well done.

[@JohnWeland]

well now I have a new css library I need to tinker with.

[@KennethFromSkarpt]

Interesting Stuff!

[@domsbuhendwa924]

Moi

[@christianangelomsulit3759]

Great explanation!

[@creativedaz]

If this content go from "Beginner to Expert" topic, I'm gonna spend my time for Tailwind CSS!

[@hackerlife3614]

Excellent video!

[@ryantheghost2185]

Great work!

[@rudeadyet1992]

Great stuff! Thanks mate.

[@RobertoOrtis]

keep them coming!!!

[@BrasilEmFatos]

you catch me up! tks a lot man!

[@WAITWHUT-wl2uj]

I learn much more quicker with this walkthrough video tutorial

[@SuperWiseacre]

Wow, what a legend

[@GintsPolis]

Got hover effect working for Subject with border-opacity-0 hover:border-opacity-100

[@ghostinplainsight4803]

It's cool and better than bootstrap as there is less defaults to override, but I prefer semantic classes with atomic mixins to separate the structure from the style, because there is nothing I like less than reading verbose html.

[@SwapnilSoni]

extremely great

[@ricardotech]

i loved it!

[@riunge]

Hey, I'm saving this to my "watch later" I think it'd be great if you could start with a little more detail about tailwind... why you'd use it, how it helps the project etc. Just to make sure I understand the basics before I invest the time to watch the whole vid.

[@gavinjoyce]

The docs are a good primer: tailwindcss.com/. There are also many "what is tailwind" videos on youtube which you might find useful

[@indeecjo]

Awesome

[@jandurcak8500]

good content, thank you 👌👌

[@cahkangkung3267]

Is polluting the html with many css classes like that is a good idea? or does customizing your own css and use semantic class naming always better?

[@gavinjoyce]

Adam's original blog post answers this well, my experience building intercom with tailwind is that it's a very good idea: adamwathan.me/css-utility-classes-and-separation-of-concerns/

[@chillstate9633]

What text editor are you using?🤔

[@gavinjoyce]

I believe that Peter is using Vim and Tmux

[@aadams99]

How did you get handlebars set up this way? I see no code at the top of this file that specifies this is a handlebars template for example. Also, I don't see you transpiling any code, just saving?

[@gavinjoyce]

We're using ember.js, this is the default behaviour

[@Pmarmagne]

This is like watching Bob Ross

[@sohelmia1999]

This content more helpful

[@xxxxdddddss]

Okay, thats great, but how you make it responsive?

[@gavinjoyce]

We didn't have time in this video to make it responsive. Here are the docs on how to do it: tailwindcss.com/docs/responsive-design

[@Iammrunkown]

this is **king simple

[@loursk]

I'm new to tailwind and really like it, because it's really easy to build fast with formated css. At one moment Peter is styling the wrong block and i guess this is one of the problematic that can occur pretty often with tailwind... That much classes inline on a html file, makes it hard to come back on the code and see easily how to correct it. Is there a way to makes it more simple ? Or maybe i have to get used to it ? The advantage with the normal css, is that you have one or some classes, and it's easier to see on the css file the differents properties. So, tailwind => good to build fast, harder to debug vanilla css => slow to build, easier to debug. If someone could read that and tell me how to improve that ? ty

[@gavinjoyce]

Breaking up the HTML into reusable components makes this much more manageable.

[@bobweiram6321]

Tailwind requires you already understand the details of flexbox in order to be productive. The ideal framework would hide them from you. Loading your style attribute with all those classes makes working with the markup a bit too unwieldy.

[@jamesmoorcroft8967]

What's the logic going on in the purple curly braces?

[@gavinjoyce]

We're using Ember.js in the video: guides.emberjs.com/release/components/ guides.emberjs.com/release/components/conditional-content/ We're also using ember-composable-helpers which adds a bunch of useful helper functions: github.com/DockYard/ember-composable-helpers

[@mtzrmzia]

Cool. is the code in GitHub? :D thanks

[@gavinjoyce]

Here's the result: play.tailwindcss.com/O2Uz6b4uLs?layout=horizontal

[@iKyroja]

tailwind is nice but at the same time i hate it ! the HTML gets so messed up...

[@sahylamyr]

whats name of this template engine ?

[@gavinjoyce]

emberjs.com/

[@Dima1415]

Why not use grid here

[@GintsPolis]

I try to make design a bit responsive. But struggle with putting toolbar at bottom for small screen sizes. I cannot adjust height of message list, so it overflow works correctly. May be you have some suggestion github.com/gintsgints/wirc

[@GintsPolis]

I managed to fix it myself.

[@xphstos_]

I can get behind the concept and how fast can be but the whole HTML markup becomes pretty much unreadable. I believe a mix of methodologies like BEM and some utility classes is the best way to strike a balance.

[@gavinjoyce]

This seems to be a pretty common initial complaint against Tailwind, in practice I've found that this isn't the case in Intercom though. We're transitioning away from BEM to tailwind and there is much less overhead and cleanliness with Tailwind. If you haven't already, I'd encourage you to try Tailwind on a project. If you have already tried it and prefer BEM, fair enough :-)

[@xphstos_]

​@@gavinjoyce I haven't actually started by my own a new project with Tailwind but I happened to jump in one! When I opened the page and saw the markup I was like what? It's fairly easy to remember the classnames but I find it hard to maintain. Another thing that I found a bit of a hassle was the responsive. I usually make things fluid and sometimes I end up with many component specific breakpoints. I had to add all those specific breakpoints in my config.. too much back and forth.

[@biigsmokee]

If that's your problem with it you are not using reusable components. However you can solve your solution by using the @apply keyword in the CSS file in your own custom classes

[@xphstos_]

@@biigsmokee I just read about them the other day and yes that kinda solves my issue but then again another one came up. Since most of my code is based on reusable components.. then whats the point of using tailwind? Another thing is the breakpoints. Since I have many components I usually have many breakpoints specific to each of my components... That gives me nice fluid layouts. I don't see how tailwind would make my life easier on that part, in fact I believe that would have be a hindrance! Anyway I'm watching closely the project and if an opportunity arises I'll try out tailwind and see how can I tackle this issues... I don't believe that all the hype is for nothing.

[@biigsmokee]

@@xphstos_ They answer your question in the docs. Basically with inline styles you can't use hover or focus or any pseudo elements, as well as a few other limitations.

[@angladephil]

This results in an absolute mess in the HTML (or whatever rendering framework). Imagine the struggle to re-style this 6 months later ...Or a new manager saying : "guys, tomorrow we flip to Bootstrap !"

[@gavinjoyce]

In our experience building Intercom, this isn't the case. In case you haven't seen it, adamwathan.me/css-utility-classes-and-separation-of-concerns/ is a good read.

[@nepalcodetv6298]

Best to use in react, vue will absolutely not use in plain html look at it bloated by classes

[@gavinjoyce]

For sure, Tailwind is best when mixed with reusable components.

[@Allyourneedsmet]

He created all this in an hour. Mehn, i need to become better.

[@robertto1ify]

Tailwind 2?

[@gavinjoyce]

No, this video was published a few days before Tailwind 2 was released. I think everything that we used/discussed is applicable to Tailwind 2 though

[@hirschheisstdermann]

26:15 :)

[@ThePazuzu]

Thank you so much for showing us, but not all of us use vim and it looks like crap. Unless you're in an SSH environment, please use something like VSCode for video tutorials. It's 2020 and people still insist on using a command line editor in a graphical DE.

[@GGGStalker]

Looking very nice!!!