Building Tailwind with PostCSS
Playing
01. Building Tailwind with PostCSS

Episodes

0%
Your progress
  • Total: 10m
  • Played: 0m
  • Remaining: 10m
Join or sign in to track your progress

Transcript

00:00
In this snippet I'm going to show you how to get Tailwind properly pulled into your project
00:04
if it doesn't easily integrate with one of these options just here. So we're actually going to follow the post-CSS installation steps and this is great if you're working with maybe a framework like Slim, not like Laravel that already has support for this,
00:21
and you want to get this properly pulled into your project and really importantly built for production as well, so you reduce the size of your Tailwind style sheet by purging any styles that you're not using. So we're going to follow this through completely from scratch.
00:37
I've created a folder over here which at the moment has absolutely nothing in it and the first thing that we want to do is create a package.json file with npm. Now if you're very new and you don't have npm pulled into your machine already, really all you need to do is just go ahead and download node.js
00:52
and that will give you the npm command line to work with. So let's go ahead and get started. Let's do an npm init inside of this empty project. Now I'm not going to bother filling any of this in,
01:03
so we're just going to run down all of these and then we're just going to say that we're happy with that. So if we head over to our text editor, that's created a pretty empty package.json file. Of course you can fill this stuff in depending on your project.
01:16
The really important point of this is the script section, so we're going to have a command that we can run to build our CSS. So let's get started then on going ahead and pulling down Tailwind for PostCSS. So let's go just underneath here and hit the Installing Tailwind CSS as a PostCSS plug-in
01:35
and we're just going to go ahead and copy the installation command for Tailwind, PostCSS and Autoprefixer. Now we can read more up about PostCSS. Essentially this is going to allow us to take our input,
01:47
which will be our Tailwind style sheet, and pipe it out to our production style sheet or the style sheet that we can actually pull into our project. So let's get this pulled in first of all
01:57
and now that we have our package.json file, all of the dependencies will be pulled into our project. And of course what I'm doing here is doing this in an empty directory, but if you already have some projects set up,
02:09
you can just go ahead and add this in and still follow along with this snippet. Okay, so we've got this pulled in. Let's just think about the kind of structure of our project first of all. We're probably going to have some kind of public directory in here with an index file
02:22
or if you're using a framework, of course, you can just pull these into whichever templating engine that you're using. Let's just scaffold this out really quickly. I guess the goal here is to get this styled up, this page styled up.
02:34
So we want a style sheet in here that we can eventually link through to. Now that we have our dependencies pulled in, we want to create a PostCSS configuration file in the root of our project. So to do this, we just create a PostCSS.config.js file
02:51
and we're going to fill this in with the plugins that we need, which are AutoPrefixer, which we've pulled in. That will automatically prefix the styles for you so they work on different browsers depending on their implementation.
03:06
So let's go ahead and fill this in. We just do a module exports and you can copy and paste this from the Tailwind documentation if you need to. And we're just going to define the two plugins out in here.
03:16
That is Tailwind CSS and we aren't going to provide any options and AutoPrefixer as well. And again, we're not going to provide any options to these, although you can do. Okay, so that is our PostCSS config file with Tailwind pulled in.
03:30
What we now need is a base style sheet that we can transform into our output and that output is going to be inside of public. So what you'll probably have within your project is some kind of resources directory or styles directory outside of your public directory,
03:46
which will be where you write all of your styles. And I'm just going to call this app.css. Now into this, we want to put in the standard Tailwind stuff that we would expect, which is importing the base, the components, and the utilities.
03:59
And of course, from here, what you can do is start to write out any of the CSS that you need. And you can use Apply here to apply Tailwind styles if you need to. But of course, you can go ahead and read up on that a little bit later if you want to. Okay, so we've got our kind of structure with our index file.
04:16
We've got our base app.css file, which is what we want to transform into our public CSS file. And we have our PostCSS config. Now what we want to do is run the PostCSS command
04:28
to actually generate our CSS file for use in our document. So to do this, we want to pull in the PostCSS command line interface. Let's go ahead and do that now. And then we'll make this process a little bit easier for ourselves
04:43
by creating a script inside of package.json. So we're going to do an npm install on PostCSS CLI. So let's pull that into our project. You could pull this in globally, but I like to pull this in on a per project level.
04:56
So now this is actually attached to our project, which is great. And now that we've done that, we can actually just start to use the PostCSS command. Now we can't run it directly from here. So let's go ahead and just create that script out in here.
05:09
And it really doesn't matter what you call this. I'm going to go ahead and call this dev. So we're going to run npm run dev to build our style sheet. So let's go ahead and say PostCSS.
05:20
We want to pipe the location or use the location of our style sheet here with our Tailwind stuff pulled in. And we want to output that using the output flag to a location in our project. So in this case, we're going to say public and app.css.
05:37
So if we head over and run npm run dev, that's going to go and take that, pipe it into here. And once that process is finished, we end up with a style sheet that we can start to use in our document.
05:49
Now this is absolutely huge, but that's kind of the point of Tailwind. We've got all of them utility classes now. And if we pull this into here, it's going to work, but we end up with a massive style sheet.
06:02
Let's test this out first of all. And then, of course, let's reduce this when we push to production because we don't want a huge style sheet in here for production if we're not using the majority of these styles.
06:13
So let's come over and open this up. And sure enough, this is now a Tailwind styled project. We can do pretty much anything we want here. Let's just demo this out really quickly by just creating a header in here.
06:25
And let's say home. And let's say text 3xl font semi bold. And I think that'll just about do to show that we've got this working. Great.
06:34
So that's Tailwind pulled into our project. But what happens when we want to go live? Well, just before that, we at some point will want to customize Tailwind. So we want to generate out a Tailwind configuration file.
06:47
We do this with mpx, Tailwind CSS, and then init. And that will create for us a Tailwind config file. We don't need to point to this anywhere because our post CSS config will pick this up. If you need a different location to this, you can specify it inside of this options.
07:04
But usually, it's just best left in the root of your directory. So with this, we can start to customize it. We can extend anything in here. We can add variants.
07:13
We can install plugins. And we're going to be looking at this purge option just now. So what we really want is another command. We've already run npm run dev to build our style sheet for development.
07:26
What we now want to do is build one for production. So let's come over to package.json. And let's take this and copy it down. And let's call this prod.
07:35
And what we want to do here is pretty much the same. But we want to set our node EMV to production. What will happen then is Tailwind will pick up on this. And it will build this for production, e.g. it will start to purge things.
07:51
So the best way to do this for cross environment is actually pull in the cross environment npm package. And that's just cross EMV. So let's pull this in.
08:02
It's pretty straightforward to use. All we do is we use cross EMV. And then in here, we can set the node environment to production before we run this command. That just means it's a little bit easier to do, again, across different environments.
08:18
So now that we've got that, let's run npm run prod. And let's check the difference. So already, we're seeing a warning here that Tailwind is not purging unused styles because no template paths have been provided.
08:31
So what we actually end up with is exactly the same thing. We end up with a huge style sheet in here with all of the utility classes, the majority of which we're not going to be using. But that actually now tells us that Tailwind is looking,
08:46
now that our node EMV is set to production, for this purge option. And again, just to kind of drill this in, if we run npm run dev, that's not going to give us this warning because, of course, we're just building this for development purposes.
09:00
So under the purge option, what we do here is just provide paths to the templates that we have that we want to purge from. Now, of course, this is going to vary between different environments or different projects.
09:12
So I'm just going to add this as any HTML files within the public directory. But if you're working with a small framework and you maybe had twig templating or anything like that, you just want to point to that particular path.
09:25
So inside of purge, which is an array, so you can provide multiple paths here, we're going to go ahead and say, well, I want to purge from or look into all HTML files from this public directory. And I only want styles that exist or that I have used within this file.
09:43
So at the moment, we have a huge style sheet. It's obviously over well over 13, 14, 15,000 lines long. Let's go and run npm run prod again. And we shouldn't see this warning now because we do have paths in there to purge from.
09:59
So now that I have done that, of course, that has now dramatically reduced the size of the Tailwind output, which is great. So it's still quite long. But pretty much all of this is required by Tailwind by default.
10:13
And if we head over and give that a refresh, of course, it works in exactly the same way. We just have a much reduced style sheet for production. So depending on how you're working, how you're deploying your projects, what you'll need to do is when you do deploy this to production,
10:28
just make sure you run the production command during development. You can just run the development command. And of course, this is just a very simple starting point. You can add to this later depending on what else you are compiling with your scripts.

Episode summary

In this episode, we walk through how to set up Tailwind CSS in your project using PostCSS from scratch. This approach is great if your framework doesn't natively support Tailwind, or you're working with something less common than, say, Laravel.

We'll start with an empty folder, initialize a package.json using npm, and install Tailwind along with PostCSS and Autoprefixer. After explaining a bit about what PostCSS does, we get everything set up so we can write styles in an app.css file, then process it with PostCSS to output our final CSS file into a public directory.

You'll see how to create the necessary config files—postcss.config.js for your plugins, and later a tailwind.config.js for customizing Tailwind. We'll wire up npm scripts for an easy development workflow, then actually build our CSS and check that Tailwind utility classes are working.

Next, we discuss optimizing for production. Since Tailwind generates a big CSS file by default (with all those utility classes), we use Tailwind's purge option to strip out anything we're not using. By providing the right template paths in the purge configuration, our production build produces a much smaller style sheet.

By the end of the episode, you'll have a flexible setup for using Tailwind CSS via PostCSS, ready for both development and efficient production builds. Plus, you'll know how to tweak it as your project grows!

Episode discussion

No comments, yet. Be the first!