Set up Tailwind and PostCSS

Adam Wathan: [00:00] Hey, everyone. Welcome to designing with Tailwind CSS. I'm Adam Wathan, the creator of Tailwind.

[00:04] In this course, I'm going to teach you everything you need to know to build beautiful custom designs from scratch. I've split this course in two parts.

[00:11] First, I'm going to teach you about telling the framework. You're going to learn everything you need to know to get it set up and installed in your project, what the utility first workflow looks like, and how to use Tailwinds various features to do things like responsive design, or extract component classes.

[00:24] In the second much bigger section of the course, we're going to build a real-world application UI from scratch. I'll teach you when, where, and why to use Tailwind's different utility classes to achieve professional-looking results even if you're not much of a designer.

[00:37] You'll learn how to design and implement a ton of commonly-used component patterns, like how to build a responsive navbar, styling cards and forms, or even building a fully-responsive sidebar layout.

[00:46] First things first, though, let's talk about how to set up your very first Tailwind project. The most important thing to understand is that Tailwind is a PostCSS plugin. This might sound intimidating, or like some new piece of technology that you have to learn at first, but if you're already using autoprefixer, you're using PostCSS and you might not even know it.

[01:03] Depending on your text act of choice, PostCSS support might already be built in to the environment that you used to working in. For example, Laravel, Next JS, Vue CLI. All these tools support using PostCSS directly out of the box.

[01:16] For the sake of keeping things as neutral as possible though, let's walk through setting up Tailwind in a completely vanilla, plain, empty HTML project so you can see just how simple it really is. Starting with this brand new, completely empty project, let's install Tailwind.

[01:31] Since Tailwind is a package available on NPM, the first thing we need to do is create a package.json file. I'm going to run npm init-y to create a basic empty package.json file. Next, let's use npm install Tailwind CSS to actually install Tailwind.

[01:48] We also need something to actually process our CSS through our chain of PostCSS plugins. I'm going to install PostCSS CLI as well, which is an incredibly lightweight way to introduce PostCSS into your project.

[02:01] Finally, Tailwind doesn't include any vendor prefixes like -webkit or -ms in any of this CSS it generates. Let's also install autoprefixer, which is a PostCSS plugin for automatically adding vendor prefixes to your CSS. Great.

[02:16] Now that our dependencies are installed, let's configure Tailwind in PostCSS. The first thing I'm going to do is run npx tailwind init. What this is going to do is create an empty tailwind.config.js file in our project root.

[02:30] We're talking about this file in more detail later in the course. For now, all you really need to know is that this is where you would go if you ever wanted to customize Tailwind in any way for your project.

[02:39] Next we need to create a PostCSS config files. I'm going to create a new file called postcss.config.js in the root of our project. Inside this file is where we specify what PostCSS plugins we want to use.

[02:52] All we need to do is export an object here that contains a key called plugins, which is an array of plugins that should be used to process our CSS.

[03:01] First, I'm going to require Tailwind CSS since of course we want to use Tailwind. Secondly, I'm going to require autoprefixer, so we can automatically add vendor prefixes to our CSS.

[03:11] Next, let's actually create a CSS file that we can run through these plugins. I'm going to create a new file in a CSS directory called tailwind.css. You can put this file wherever you want. You can name it whatever you want. This will work perfectly fine for our use case.

[03:25] This is where things start to get a little bit more interesting. The way Tailwind works is by looking through your CSS for these custom markers and replacing them with Tailwind's generated code. I'll show you what I mean.

[03:36] First, let's add an @tailwind directive here with a parameter of base. When we compile our CSS through PostCSS, Tailwind is going to find this @tailwind base marker and replace it with all of Tailwind's generated base styles.

[03:50] We can also add Tailwind components and Tailwind utilities. Similarly, these two markers are going to be replaced with all of Tailwind's component classes and all of Tailwind's utility classes, which is what actually makes up the bulk of the framework.

[04:04] Now that we've created this CSS file, let's write a simple script to actually process this CSS through our list of PostCSS plugins. I'm going to head over to our package.json file. Here where we have this test script, let's replace it with a build script.

[04:19] The way this is going to work is it's going to use the PostCSS CLI tool that we installed, which we can reference as just PostCSS. Then we just need to provide an input file, which is going to be our css/tailwind.css file.

[04:30] Then we need to specify that we want to write this to an output file, maybe something like public/build/tailwind.css. If we run npm run build in our terminal, this should generate a new CSS file for us that's been processed through PostCSS.

[04:46] Let's open up the public folder and take a look. Here you can see we've got public, build, tailwind.css. If we scroll up to the top of this file, you can see it starts with normalized.css.

[04:57] You might have used normalized on a project before, it's just a set of simple resets that try to make all browsers behave the same way by default. This is what Tailwind uses as it's base global reset styles. The reason these styles appeared in the top of our file here is because Tailwind found @tailwind base in our source file and replaced it with all these global reset styles.

[05:19] Next, if we look at for our class called container, which appears after this global reset styles, this is Tailwind's lone component class that was injected into our CSS wherever we added Tailwind components.

[05:31] Finally, after the container class, you can see a bunch of classes like appearance none, BG fixed, BG local, just these really simple single-property utility classes. These are all the classes that Tailwind inserted into our CSS wherever it found the @tailwind utilities directive.

[05:46] One other thing to note is that you can see in this appearance none class, there's this WebKit appearance property and this mose appearance property. These are the vendor prefixed properties that were added when we ran our CSS through autoprefixer.

[06:00] Now that we've built our CSS, let's create a very simple HTML file so we can experiment with Tailwind and get a feel for what it's like to work with. I'm going to create a new file under public called index.html. I'm going to scaffold out a basic HTML template here.

[06:15] Now I'm going to import Tailwind just using a regular old link tag like you would with any CSS file on any project. I'm just going to pull in our CSS from build tailwind.css. It's going to add maybe an H1 tag here. We can say hello world.

[06:29] To preview this in the browser, I'm going to use this tool I really like called the Live Server, which you can easily install globally using MPM just something like mpminstall-gliveserver.

[06:40] Live Server is basically a really lightweight browser sync alternative. You can point it out a folder, it'll create a little server, spin it up in the browser, and it'll automatically refresh anytime any of the files that it's watching changes.

[06:53] We can start up a live server by just running live server public since we want it to run from the public folder. Now you can see here's our Hello World H1 completely unstyled by default. Let's head back to our HTML and add some styles to this element using tailwinds utility classes.

[07:09] Let's head over to this H1. Maybe we can add a class attribute. Maybe we can make the text bigger using something like text 4XL to make the text four extra-large. Maybe you can make the font bold with font bold. Maybe we can center the text with the text center utility, and maybe color the text using a utility like text blue 500.

[07:28] If we head back to the browser, you can see we have this big blue hello world headline.

[07:33] Just a quick recap of what we did here. First, we installed a few dependencies. In our case, we installed autoprefixer PostCSS CLI, and Tailwind CSS. Next, we scaffolded out an nttailwind.config.js file. Then we created a post css.config.js file and specified Tailwind CSS and autoprefixer as the post CSS plugins that we wanted to use.

[07:54] We created this file in our CSS directory called tailwind.css where we dropped in tailwinds three markers, @tailwind directives to tell Tailwind where to include its generated CSS.

[08:06] Finally, we wrote a very simple build script using PostCSS CLI to take our tailwind.css input file and compile that into the public directory. Then we created this very basic index study HTML file where we pulled in our CSS using a link tag and styled this heading with Tailwind's utility classes.

[08:24] Over the next few lessons, we'll be talking about Tailwind's utility first workflow and how you can actually use the framework to implement beautiful custom designs.