Installing Tailwind CSS - CSS教程

- [Instructor] Tailwind CSS isn't for beginners. It does require some tools in order to work with your projects. First, you're going to need something called npm, the Node Package Manager. That's going to be bundled when you install node JS. You can find a link to node JS right here. Node helps you create a project and install modules, which are like plugins in web development projects. Now, one more tool that you get when using node is npx, which is a package runner. That's going to let you run modules without having to install them. Since this project requires bill tools, I suggest that you also get and install a copy of Git, and that you're familiar with it before taking this course. If you're on a PC, you may want to install the Git bash terminal so that you can run the Linux commands I'll be using. Otherwise, you can use PowerShell, Hyper, or some other terminal app. Now we're also going to need some additional tooling. Tailwind CSS has its own CLI, which is a command line interface. Now, the main thing it does is something called just in time compiling, which means that it will process your files and only give you the CSS you need for your project. There's another way that you can use Tailwind CSS, and that's by using a CDN, or content delivery network. And we'll be using that in this course when I want to give you some quick examples to try. So you'd insert this link right here and put that in your HTML file, usually in the head section of your code. Unfortunately, this version of Tailwind isn't as customizable as the just-in-time version. It's fine for learning and playing, but not really for working on a final project. Now you can use third party plugins with this version, so it makes tailwind CSS harder to extend. Some tools can work to remove parts of the CSS in Tailwind that you're not going to need. Now that's called tree shaking or just-in-time compiling, and a CDN link can't do that. And that means that all the benefits that you would get from the just-in-time compiler are not going to work with the CDN link, but we'll be using this a little bit on this course. There's also a few visual studio code extensions that you might consider installing. First, this one, that should be pretty obvious, and that's IntelliSense for VScode. That's so that you get recommendations as you type in visual studio code. Now, the second is a quick way to get to the documentation. You can find these in the studio code marketplace or directly under the extensions individual to your code. There's also links to them in this slide show. It's time for a little practice, and here's what we're going to do. We're going to start by creating a folder for your project. Then we're going to add an HTML file with some basic code linked to a CSS file. Then we're going to run the NPX command to create our CSS file. Finally, we'll add the files necessary to run this as a project. There's also a link to a GitHub repository with the finished version of this code, right here on this button. So to get started, I've added some basic HTML right here, and it already has some classes. Don't worry if you don't understand what all those are quite yet, but I'm going to copy this file. And I'm going to go into my desktop, make a new folder here, and I'll call it tailwind. Then I'm going to open this up in visual studio code and I'll make a file called index.html. And I'll paste this in there. Let's go ahead and save this. And you can see that we're already linking to this style.CSS file. This file will be created by the NPX command that we're going to run right now. So to use that command, we're going to copy it from this slide right here. And this essentially will use the NPX that is in nodeJS to temporarily install a copy of the Tailwind CSS CLI. And then we'll ask it to output a file into this directory right here. And that's what we're calling with the link command in our HTML. And we're asking for the JIT option, which means that it will only output the CSS that it needs to build what is on that page. And then we're also asking it to purge or to look for files that have a .html extension anywhere in that folder, and only look for classes and build the CSS with the classes that are in these files. Finally, I have a watch option so that if I make any changes to this HTML, when I save, it's going to automatically rerun this command and give me a new CSS file. So I'm going to go ahead and copy this and I'll switch over to visual studio code. And I'm going to open up a new terminal here. I'm going to go ahead and paste that command. And when you do that, you should see this CSS folder appear with the styles.CSS here. You may see some warnings. This is a preview JIT engine. I think this is definitely the way that Tailwind is going to work in the future. So you may as well get used to it. Now, if you look at the style.CSS file, it's still kind of big, but it's really only what you need because it has a lot of resets and other stuff in order to work with the code that you have in this index file right here. So if we go ahead and change something, so let's say we'll change the background color. So I'll say class here, and then we'll do BG and we'll say yellow 200. And I'm going to save, but take a look down here. So when I save this, it's going to rebuild the file and it's done in 12 milliseconds. So if we open this up in a browser, let's go ahead and take the index.html file, and just going to double click on it. When you pull this up, it should look something like this. And let's go ahead and delete this class so you can see that when I save this, it's going to rebuild the CSS file. And I should be able to refresh this and that background color should be gone. That's with the just-in-time compiler, notice how extremely fast it is. It's done in 12 milliseconds. So it's a great way to compile and build your CSS file with Tailwind CSS.