Welcome back to the podcast everyone and thanks for sticking with us through our little hiatus! Today Michael is riding solo and talking about Tailwind CSS. You can expect to hear his thoughts on the pros and cons of using it, some comparisons, and delivering a verdict on whether he would continue to use it in the future. We also share some thoughts on BEM and offer suggestions on which developers Tailwind might best suit. So, if you want to learn more about this today, make sure to press play!
Key Points From This Episode:
{{addCallout()}}
Transcript for Episode 269. Tailwind CSS - Is It Worth Learning?
[INTRODUCTION]
[00:00:00] MN: Hey, there. Michael Nunez from The Rabbit Hole here. You might be wondering, a few months have passed. What's with all the replays? First off, if you truly have been wondering about this, then you're probably listening to this. If you're listening to this, I want to say, thank you. Thanks for listening, subscribing and enjoying the podcast. It's been a wild, crazy few months.
Both Dave and I were on demanding clients as of late. Dave is still producing high-quality stuff for his client. Me on the other hand, I might have some time dedicated to the podcast. For the next few weeks, I'll be beefing up our backlog to continue to deliver the content we have wanted to share since the inception of this podcast. Fair warning, this will be a solo act with some interviews here and there. Dave has given his blessing for me to try and wing this myself. Can you believe it? We'll see how that goes. Any feedback is appreciated. Feel free to hit me up, either @googlemike, or @radiofreerabbit on Twitter.
[EPISODE]
[00:00:51] MN: Hello, and welcome to The Rabbit Hole, the definitive developer's podcast, live in large in New York. I'm your host, Michael Nunez. Today, we're going to talk about Tailwind CSS. This is not your ordinary CSS framework. I had some time to dive into Tailwind recently on a new project that I was doing, and I have some opinions and I wanted to share with y'all. We're going to talk about what it is and the pros and cons, how did I compare to the two and would I continue using Tailwind CSS moving forward. Let's start with the beginning. What is Tailwind CSS?
According to the website, it's a utility-first CSS framework packed with classes, like Flex, PT-4, Tech Center and Rotate 90, that can be composed to build any design directly in your markup. The idea is that Tailwind has all these different names for CSS classes that you can append to a given div or component, if you will. That way, your CSS can be as snappy as possible, because it just reads through all the class names, and then compiles the CSS for you.
Tailwind CSS, according to the website again, works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It is fast, flexible, and reliable with zero runtime. Again, it just scans through your entire codebase and creates these styles depending on the names that you use within the class names.
I thought this is pretty clever. One of the things that CSS is always something that I'm continuing to work on, and I think, continuous improvement is very, very important. I think in the department of CSS, I will still continue to do that. Come along down and walk with me as we try to get better with the CSS. Using Tailwind CSS, there are some pros and cons. I'll start with the pros. First and foremost, compile CSS very fast. I was using a create react app, where I was just able to change the class name right on the div that I was working on, on save, with the hot reload on deck and it would just add the styles that I was actually adding in the class name, which was pretty cool.
Another benefit to using Tailwind is that it creates only the CSS classes that you want, because you have to write the names in them, it's only going to generate the CSS for that given div, or element, if you will, that has a class name that will then allow you to style your page and only use the styling of what you're asking of it. If you have any old CSS files that you're not actually referring to, that's not going to get compiled, because if you're not using it, then you wouldn't write it in your class name, which is pretty cool.
We'll talk about the cons of Tailwind, of the things that I ran into for it. One thing that I was not used to is how long the class name will be when you use Tailwind. I can give you an example. I won't go through all of them, like what each one of them does. I'll just do the names and Tailwind translates to CSS in a way that it makes sense for your browser to read it. Here's a class name that I have. The class name is flex, space, justify dash center, text-5XL, leading normal, font Heavitas.
The only one that is customized is the font that I had to use for this particular project that I was working on. All those different names that I mentioned, adds another CSS attribute to that particular div that I'm working on. It's very long. I have five, six words in here, nine words of where I'm adding hyphenations, if that's even a word. With the hyphenated words, it's nine. I imagine, if you have a styling of 140-character limit per line, you're going to run into this, and it's going to be extremely annoying for one to deal with. That's one of the cons that I saw on that.
As mentioned before, see, Tailwind CSS has a learning curve, very similar to other CSS frameworks. You just have to know the syntax for how to make your text bigger, or how to use display flex in a way that Tailwind CSS is going to translate it. I found that to be a little difficult. I just had my second monitor. Well, look at me, just like I'm – I use a laptop for my second monitor. I'm not that cool. My monitor laptop, I would just have the docs open the whole time, as I was looking to see, how do I make this a display and a flex rather? How do I make the text bigger? How would I apply fonts to the Tailwind CSS config file?
If you're not familiar with CSS, it could be really hard. It'd be even harder to learn the terms and how to use it in Tailwind, as well as how to do anything in CSS. I would say that if CSS is not your – if you're a new front-end developer learning and understanding CSS, I would shy away from this just a bit. I want to dive into it 100%, until you have an idea of what any of those terms I mentioned mean, such as flex, or justify center, stuff like that. How did I do this? What I did was I created one CSS class to do what I needed to do.
Just a heads up for those who need to know, I am a BEM enthusiast. BEM stands for block element modifier. It is a CSS. I think, it's a methodology, or a philosophy where any component that requires CSS is written in a way that the structure is less likely to override other CSS files. If I have a header component, the block for that particular component is the header block. The element within the header block, I would say, is title. Then I give that a different style. A different element within the header block, say we use subtitle, you would do header, underscore, underscore, sub dash title, and then you can style your subtitle however you want.
If you wanted to have a modification, I don't think this would be an example within a header, but let's say there's a validation error. You could do something like, calculator as the block. Say, we're using a calculator app, underscore, underscore, display result, dash, dash error. That will style something if there is an error to a particular component. That's called block element modifier. I'll say that again. That's block element modifier.
If you want more information, I'm sure you can google BEM CSS, and that will help you learn and understand more about that. I'm a BEM enthusiast. I know there are other individuals who use syntax. That's another different philosophy. I don't remember much about it. I use BEM. If you don't know BEM, definitely go and research that.
I took one CSS class, gave it a name, and I gave it all my styles. After I did all the styling for that, I went into looking up the documentation for Tailwind CSS, so that I would remove one item, or rather one property within the CSS class that I created, and then I'll try to implement that in Tailwind by giving it the Tailwind name.
For example, say I had display flex as one of the properties within that CSS object. I removed it, and then I use flex, which is the keyword for Tailwind to render and display flex for a particular component. Then I went down the line, just removing one, adding it in the style of Tailwind, removing one, adding in the style Tailwind, adding in the style Tailwind. For me, it definitely was one-to-one. The styles that I was able to create work just fine when I converted them over to Tailwind. I had to do some Googling, like I said before. I had to learn how to look through the documentation to get the thing that I was looking for, but all the documentation on the website was really good for me to build the app, how I would have wanted without having to use CSS that I created in a CSS file and whatnot.
Would I use this on my next project? Yeah, I think so. I think that I will continue to use it. Unlike Bootstrap, where Bootstrap comes and it's predefined and has all these different classes baked into it. Like, if when you render a Bootstrap app, it comes in and you can see that it is bootstrapped, Tailwind doesn't have any of those predefined configurations. It just makes it much easier for you to create CSS onto components that you want to style in a way where you don't have to rewrite any more CSS than you would need to, because you're more likely able to just find the Tailwind CSS keyword, apply to the class names for a given document, for a given div, and then be able to render the component in the style that you want using Tailwind. I think it's much easier and I think bootstrap comes in and it's pretty heavy and Tailwind is definitely a lot more lightweight. I will definitely try my best to use that moving forward.
Follow us now on Twitter @radiofreerabbit so we can keep the conversation going. Like what you hear? Give us a five-star review and help developers just like you find their way into The Rabbit Hole. Never miss an episode. Subscribe now however you listen to your favorite podcast. On behalf of our producer extraordinaire, William Jeffries, and my amazing co-host, Dave Anderson, and me your host, Michael Nunez, thanks for listening to The Rabbit Hole.
[END]
Links and Resources:
