Installing Tailwind CSS

[00:00:00]
>> So I'm going to need you to install. Npm install -D tailwind-css@ 3.1.8 postcss@8.4.18 and autoprefixer@10.4.12. You can also just copy this directly from my notes, so you don't have to type it word for word. So, tailwind is exactly what it's described to you. It's the compiler that will actually make you that minimum viable stylesheet.

[00:00:54]
Postcss is basically like Babel for CSS, where it like takes one set of CSS and transforms it into a different kind of CSS. It is just a transpiler for CSS. And then autoprefixer is exactly what it sounds like, it basically trans-piles, modern CSS to CSS that works in all browsers.

[00:01:14]
That's what autoprefixer does. They make you version those independently because that way postcss and autoprefixer can release new things, and you don't have to update necessarily tailwind, and they don't have to track that as a dependency either. It allows you to maintain control of your app regardless of how often tailwind updates, okay?

[00:01:39]
So now, we have this. Now we need to start a tailwind project, so I'm going to say here down in my terminal MPX. What is it? Tailwindcss, Init -p. Okay, you'll see that this generates two files for us, postcss and tailwind. You can pretty well just ignore this.

[00:02:14]
Like this is just saying this is a Tailwind project. This is an autoprefixer project. We will not touch this again. But if you have any additional configurations that you want for postcss, that would go here, and that's what the -P did. The -P also made it so that it generated the postcss for us in addition to the tailwind config for us as well.

[00:02:34]
>> How does Tailwind differ from libraries like Bootstrap or Chakra UI?
>> Yeah. So I am less familiar with Chakra, but I can talk to at least speak to bootstrap it's different than Bootstrap. Bootstrap is a full design system, right? If you build something with Bootstrap it looks like a Bootstrap website which is totally valid, right?

[00:02:54]
Like if you're building like internal web apps where you don't really care that how it looks as long as it looks usable and nice. Something like bootstrap or material would be another good one. Those like pre-made design systems work amazingly for that. Tailwind is not that. Tailwind, it's not a design system.

[00:03:12]
It's a methodology for writing CSS. So Tailwind's not gonna define how your website looks, it's gonna define how you write your CSS. So you can build design systems on top of Tailwind CSS, but it has no opinions of how your app is necessarily going to look. So instead of writing CSS, you're writing Tailwind, whereas with like something like Bootstrap, you're just putting CSS classes on things, and it comes with like a premade CSS bundle for you to use.

[00:03:42]
It's a CSS framework in that capacity. That make sense? Cool. I imagine chakras the same, similar anyway, but I again.
>> Component library?
>> Like material or something like that okay, so Chakra would be the same thing cool. Okay, so we end up with this for our tailwind config.

[00:04:12]
This little comment here is nice, actually gives us the type so that if we start typing something in here, it'll actually give you like the autocomplete. That's what this special comment up here is for, it's for VS Code to be able to autocomplete things for us. Okay, so go to your style.css here in source.

[00:04:40]
Take all this very hard-earned CSS that I wrote for you. 350 lines of it. Wow, that's more than I thought. Delete it. Just delete all of it. Fine, I'll be okay, just kidding, it's not good CSS, that's fine. We're gonna write tailwind @tailwind components and add tailwind utilities.

[00:05:12]
This is all of the CSS that we're going to have in our projects. Everything else is going to be written directly into the DOM. Some of you might be annoyed that VS Code is complaining about this. If you want to get rid of this, open your settings and let's see.

[00:05:36]
Actually do open user settings, this one here in JSON. And then what you're looking for is you just wanna put a rule in here for. What is it? Css.lint.unknownAtRules, and you can just put that to ignore. So again, I'd Shift+Command+P or Control+Shift+P Do preferences, open user, User Settings JSON, this one here, that'll open this file and just put a line in here for this.

[00:06:17]
And then, you will no longer have this complaining at you about that. I don't really care. So what, however you want to do, this is just, like underlining a noisy. Okay, the other thing I'm going to invite you to do if you're using VS Code, there is an extension for Tailwind CSS IntelliSense.

[00:06:42]
This, go ahead and install that. It's just very useful for when you are doing a tailwind because it will start auto completing things for you. Okay, that should be, we should be ready to go now any questions so far about setting up tailwind? If we run our project now, it's going to look very ugly because there's gonna be no CSS.

[00:07:13]
Yea, see it's just pictures of Luna and text, but there's no style on anything. So let's start writing some talent. So let's go to App.jsx. And, This first div right here. Yeah, this one right here give it a class name equal to P-0 and m-0. And then, we're gonna give it a style of equal to background.

[00:08:16]
And we'll give it a URL of http://pets-images.dev-apis.com/pets/wallpaper. You can do A, B or C all of those will work. So you should end up with something like that, and okay, so far so good. So, a couple of things here. What are these class names? Well, again, Tailwind is atomic CSS.

[00:09:01]
We're putting just the bare minimum amount of CSS, and we're going to be using just classes to represent the CSS that we would want to write. So if you actually mouse over this inner using that IntelliSense VS Code extension that I told you to install, you'll see that p0 represents padding p00 pixels.

[00:09:22]
You can probably guess what m.0 is gonna be then margin 0, right? So this is saying I want on my body of my application here I want no padding and no margin. This welcome to Tailwind CSS, that's what this is, it's just putting in utility classes for all the CSS that you wanna write.

[00:09:48]
I'm sure right now you're either thinking this is great or this is awful. There's really, very rarely much in between. So let me just say that on one hand, this is so fast to write, I don't have to switch between CSS files. I can just put stuff on the go as I'm going.

[00:10:06]
It's very fast to like prototype stuff really quickly. So I use tailwind all the time. When I just need to like get something done and out the door as fast as I can, Tailwind is great for just being really fast. You can imagine some of these class names get long and gross, right?

[00:10:21]
You'll start having like 30 class names on one component. It's a little weird, right? You're gonna have to decide what you think about that. I'm gonna invite you to try it. I'm gonna say if you're really grossed out right now, it's probably better than you think it is.

[00:10:36]
So just stick with me. Questions so far before we get more in depth on this? Yeah.
>> Do you recommend the Tailwind prettier plugin also? I've never used it, but that sounds like a lovely thing, that seems like a great idea so like it'll sort your classes for you automatically.

[00:11:10]
Yeah, that's awesome, all right? Let's see what happens, I have no idea what happens if we install this directly. So Tailwind or npm install -D. We already have prettier on this project. Let's do prettier plugin, tailwindcss. Okay. So rather than you'd have, it looks like you have to replace your prettier RC with.

[00:11:42]
JS file, I want you to call that JS file prettier config.js All right, try that now. That works. Okay. So to sum up, do npm install dash capital D prettier dash plugin, tailwindcss like that? I am currently on version 1013. If that's something's not working for you, try installing specifically that version.

[00:12:31]
Have a dot prettier RC file, you'll have to delete that dot prettier RC file and replace it with a prettier dot config.js because it's going to require you to import something. And then just put this in there, module dot exports equals plugins require prettier plugin, tailwindcss. Once you've done that.

[00:12:52]
Now for example if I do m.0 here P0 because it has a certain order that expects things to come in. Notice as soon as I click save it reorganizes though into some sort of ascending or like some sort of predictable order, right? So thank you to friendly user online that told me to do that.