‫So, as always, let's start the section
‫by understanding the technology that we're gonna be using.
‫So, in this case, that's tailwind CSS.
‫So, what is tailwind CSS, or "tailwind" for short?
‫Well, I think there is no better way
‫of defining tailwind then the description
‫that they have on their own website,
‫which says that "tailwind is a utility-first
‫CSS framework packed with utility classes
‫like flex, text-center, and rotate-90,
‫among many many other classes,
‫that can be composed to build any design
‫directly in your markup."
‫So, right in your HTML or JSX.
‫Now, okay, so that sounds nice.
‫But what actually is this utility-first CSS approach?
‫Well, basically when we write utility-first CSS,
‫we write lots and lots of tiny classes
‫where each class has one single purpose,
‫and we then combine these classes
‫to build entire components and layouts.
‫So, that's the idea behind utility-first CSS,
‫or Atomic CSS, which is the same thing.
‫Now, tailwind did not invent this approach
‫but they were the ones who made it really popular
‫by building this super high quality framework
‫that's also super easy to use.
‫So, basically in tailwind, all these tiny classes
‫that we just talked about are already written for us,
‫ready to be used.
‫So, when we use tailwind for, or styling,
‫we're not gonna write any new CSS at all.
‫Instead, we will leverage some of tailwind's hundreds
‫of classes to design and build
‫anything that we can imagine.
‫So, it's really that powerful.
‫But, instead of me listing
‫all the great features here of tailwind,
‫let's do this as a list of pros and cons,
‫because of course there are also some problems
‫with an approach like this.
‫But first, let's actually start with the good parts.
‫So, one of the main advantages of using tailwind
‫is that you don't have to worry about naming classes
‫ever again, which means
‫that you can focus on writing your styles
‫instead of coming up with class names.
‫Another huge benefit of tailwind
‫is the fact that you don't have to jump between files
‫all the time,
‫so, as you write markup and styles.
‫You do it all at the same time
‫and all in one place, which is incredibly convenient
‫once you get used to this workflow.
‫And a great side effect of this
‫is that you will immediately understand the styling
‫in any project that uses tailwind,
‫which will not only make it easy
‫to collaborate with other people,
‫but also to come back to your own projects
‫after many month or even years.
‫So, in my opinion, these first two advantages alone
‫are enough reason to give tailwind a try.
‫Not thinking about classes
‫and not having to jump between files all the time
‫is really a game-changer,
‫but there are even more advantages.
‫For example, tailwind can really be seen
‫as a design system with very good predefined colors,
‫font sizes, spacing, and more.
‫So, the framework itself
‫has already taken many good design decisions for you,
‫which empowers developers to build beautiful
‫and consistent UIs a lot easier than before.
‫So, all of this will of course save you a lot of time,
‫not only because you will write a lot less CSS,
‫but also because things like responsive design
‫are extremely easy and fast to implement as well.
‫And, I could really go on and on here,
‫but just one more thing that I will say
‫is that tailwind's documentation is world class.
‫And the same is true for the integration into VS Code,
‫which gives you auto completion for all tailwind classes.
‫Okay, but enough praising,
‫let's go to the bad parts
‫that everyone likes to point out immediately.
‫And the biggest thing that people seem to hate
‫about tailwind is that the markup, so the HTML or JSX,
‫will look extremely ugly,
‫and sometimes straight-out unreadable,
‫because, in order to style one element,
‫you sometimes need 10 or 20 classes,
‫which will quickly make your markup look very cluttered.
‫This however, is not really a huge deal,
‫as you get used to it pretty quickly,
‫like, after a day or two using tailwind,
‫it's not gonna be a huge problem anymore.
‫What could be a small problem
‫is that you will have to learn
‫all the tailwind classes that they provide,
‫or at least the ones that you need the most.
‫And so, that's surely some extra effort there.
‫But luckily for us,
‫these classes are really well-named and quite intuitive.
‫And so, again, after a day or two,
‫you'll have automatically memorized
‫the most important class names that you use all the time.
‫Another downside of tailwind
‫is that you need to install and set up tailwind
‫on each new project,
‫which will always take, like, five or 10 minutes.
‫Now, the biggest issue, at least for me personally,
‫was the feeling that I was kind of giving up
‫on "vanilla CSS." So, as I'm recording this,
‫I wrote my first line of CSS almost 20 years ago.
‫So, that's a lot of investment in one technology.
‫I also was always against all kinds of CSS frameworks,
‫for example, like Bootstrap,
‫or even against React component libraries,
‫simply because I wanted to write my own styles.
‫However, with tailwinds,
‫I do actually feel like I'm still
‫writing my own CSS, just in a different way.
‫Tailwind is such a thin layer of abstraction
‫that it doesn't make you feel completely removed from CSS.
‫So, in my opinion,
‫the benefits clearly outweigh the bad parts here,
‫at least enough to give tailwind an honest try.
‫So, trust me, I was really hard to convince
‫for all the reasons that I just talked about.
‫And so, if even I can like tailwind a lot,
‫then everyone can, and I'm saying this
‫because for some reason many people
‫like to hate on tailwind for no apparent reason,
‫so, without even having tried it.
‫So, please don't be that kind of person.
‫This is indeed a controversial technology,
‫so, just give it a try before forming an opinion about it.
‫And in fact, this section of the course
‫gives you exactly that opportunity.
‫So, over the next few lectures,
‫we will style the entire project
‫that we're building right now using 100% tailwind.
‫And so, this is guaranteed to show you
‫if you like tailwind or if you're never gonna use it again.
‫So, let's go find out.