Using TailwindCSS with #nobuild
I've been thinking for a long time about kind of the no build system of building. You know, I've stepped away from using Node and NPM and Yarn and all these for a long time now. And that's a big part of h t m x is, you know, you just include it as a c d n at the top. And that's how I'm trying to do almost everything, is kind of this sort of basically without having a build system. One of the tools that makes that has kind of made that a little hard that I I really love is tailwind.
Speaker 1:Tailwind is very, you know, you just put the attributes right there, you put the classes right into your HTML. Great locality of behavior, you can see it. Everybody knows how great tailwind is, you know, if you haven't used it just like try it out. That's the usual path is like people are like, oh, why would you put your stuff right in the, you know, right in the attributes, right in the classes, and doesn't it make it messy? Sometimes it does make it messy, but there's ways around that.
Speaker 1:But it's so easy to get what you want is my experience with this. So I love Tailwind. It's easy to change, it's easy to maintain. But to use it the way that they want you to it requires a build process. So, you know, I wanna have sort of no npm, no node, no package dot JSON file.
Speaker 1:There's a lot of reasons for that. I've had a lot of time spent a lot of wasted a lot of my time fighting with npm errors, package JSON issues, etcetera. That's all gone for me. And and I recognize this as a privilege. You know, this is a privilege of mine that I get to decide what tech stack I use for the projects I work on.
Speaker 1:That's not the case for everybody, so, you know, if you're whatever you're using, that's fine. But right now I get to decide my tech stack, which is which is really nice. That's how I got here with h tmx, and that's how I'm using, you know, Laravel and Livewire for everything. So how I got there is sort of an episode for another day, but it's a great place to be in. I'm moving everything over, working on my old projects.
Speaker 1:I want them to look great though, and I want them to work well on mobile. I want them to resize and be responsive, and that's one of the main reasons I use tailwind. It just has a whole bunch of really easy functions for the different sized screens, you know, for your phone, for your widescreen, etcetera. They have the break points, it's all built in, small, medium, large, extra large. However you kind of want to, you know, use those, It just is very easy in Tailwind.
Speaker 1:And and the way that it's done just matches with the way that I'm working on stuff. But I've always used the CDN for Tailwind, which, like, they even call it intentionally, you know, the play CDN. Like if you want to play with Tailwind. But you shouldn't bring this into production. Why is that?
Speaker 1:Because tailwind has, at this point, I don't even know what the count is, but 1,000 and 1,000, and we may be up until, like, I don't know, tens of thousands of classes. I don't never really checked how big the file is, the CDN. I'm sure it's huge. They warn you. They even like you go you do inspect elements, and it'll tell you like this should not be used in production.
Speaker 1:There's nothing wrong with the CDN, it's just way too big. You know, it's not minified, it is has every single variation of every single class regardless of whether you use that in your project or not. You know, it's supposed to just have this like here's how you can see how all the classes work in an easy way just by pasting it in. What do I want? I want the easy way just pasting it in, and I want to get access to all the classes.
Speaker 1:And I don't want it to be huge so that it's, you know, actually slowing down my system with all these unused classes. So, you know, that's the first issue. The other issue is if you're using a CDN, and, you know, I use CDNs for stuff all the time, but let's say you get it from unpackage. That's just one of the things. A couple months ago, unpackage just went down.
Speaker 1:And if unpackage goes down, and you're relying on it, like your site is just not gonna load. And if it does load, you're not gonna get your styles. And that's true of, like, HTMLX or whatever else you bring in. So a lot of times, once I want something stable the way it is, I will download the JavaScript file from the CDN and just put it into my project as well. So it doesn't have to be a CDN.
Speaker 1:There's benefits of CDNs and there's downsides. So you can kind of decide, like, what's what do you want to risk? You know, are you are you willing to risk that unpackage might go down and your site will go down too? Maybe, but maybe you want to have a backup option, and you just download that file, keep it on your server. If you need to, you can switch to it, something like that.
Speaker 1:So I want to be able to do that, you know, with Tailwind. CDNs are great when you're getting started, maybe they're great forever, but, you know, they have all these bundlers in the node world, and that makes sense to some you know, you they want to take all your javascript that you need, and it's mostly javascript, but, you know, CSS too. And compress it, and mix it together, and, you know, minify it. And more than minify, like filter it. So, you know, Tailwind has a very complex process of going through your project.
Speaker 1:You tell it what folders to look at. It figures out which classes it should include in its build if you use the build process. Right? So you get this really tiny minified version of Tailwind has just what you need. So that's the nice thing, but then you have to tap into this node, and, and, you know, you have to tap you have to use the build process.
Speaker 1:And there's some downsides of the build process too. Let's say your build process has, I don't know, 50 files in it. Some of these can have like 10,000 files, you know, so whatever your build process is. You make a change and it and it compresses it all, and it turns it into this one perfect JavaScript file that they just download once and it has everything. Okay.
Speaker 1:You make a change to one of those. That breaks the cache for the whole file. So if you have CDNs, a bunch of separate CDNs, your browser can cache all of those, even if they change. Okay. That one little thing gets updated.
Speaker 1:Instead, when you have a build process, you're sending out this giant JavaScript file every time. You're breaking everyone's cache on every single little change you make to one of your 3,000 files, whatever it is. So that's just an example of kind of there is downsides. I think people get this idea, like, well the build process is the good way to do it. The only way to do it.
Speaker 1:Like, that's absolutely not true. There's big trade offs. I've been listening to d h h on this stuff recently. I didn't really I haven't really followed him on much stuff before, but, you know, he's written some books on programming, and and he's It didn't really have some interesting things to say. But right now he's on a big no build, train, and I love that because that's kind of where I've been at for a while.
Speaker 1:So I get why node and npm exists, you know, I just don't think they're the best system necessarily for the stuff that I'm trying to do. The the trade offs are not worth it for me. So what are some alternatives to CDNs? Well, you can just download the minified version and put it on your site. In general, you can go to the CDN link, copy and paste, put it in your public folder, call it directly locally.
Speaker 1:Do you think that's a good option to have available, especially for when unpackage goes down, you know, you just want to have that kind of backup. But for packages like Tailwind, the CDN and the CSS are huge because they cover every possibility. So I tried a few other static Tailwind tools that are smaller, and they also require no build. Those were pretty good. I love the idea.
Speaker 1:I really want that to be the way I do it. But, you know, they're they're built by other people. They tap into most of tailwind, but you're just you're losing some classes, and they're still pretty big. So especially when there's new stuff in tailwind, you want to be able to use it. So luckily, tailwind now has a standalone tool that builds you a nice little CSS file with just the classes you use.
Speaker 1:And is this kind of a cheat, like, is this kind of just basically a build process? You know, like no build disguised or build disguised as no build? Maybe. Sure. Do you think you could easily say it like that?
Speaker 1:But you don't have to tap into all the other stuff of Node. You don't have to have Node on your computer. You don't have to have NPM. It's just a standalone tool. It builds a nice little CSS file with just the classes you use.
Speaker 1:So it has no dependencies, and you get the full power of doing the tailwind customization. So I wouldn't necessarily do this unless I was going to make a site that I expected to get kind of hit a lot, where that size of that CDN for Tailwind matters. I do a lot of stuff where that doesn't matter, honestly. You can download a pretty big CDN. The browsers cache it.
Speaker 1:It's really not that big a deal, for most of the stuff I work on because it's, you know, niche industries. It's not we're not dealing with thousands or hundreds of thousands of users. I'm dealing with hundreds of users on a business app, you know. And it's fine for them to download a CDN thing and and But if you're going for If you really want to get that tight, you know, small file really fast, all the customizations you need, you can download this standalone CLI tool, from Tailwind. I'll include a link to it in the show notes.
Speaker 1:So, you know, what's the purpose of this, just big picture? You know, we don't always necessarily want to fight every aspect of the web. The build process is a big part of, you know, there's a lot of stuff that that you can do with that. And I'd hate to lose tailwind just because, you know, I don't wanna be part of this the build process and what that adds to your project, your gigs of node modules and all this kind of stuff of all this JavaScript code that you're never gonna use. Do I really need to add that to my project just to have Tailwind?
Speaker 1:So, you know, I think of HTMX as kind of the tailwind of your front end AJAX. They both favor this locality of behavior, even if Tailwind has really embraced the build process. The core of what they do, is this kind of, you know, right in your HTML, similar to HTML, this locality behavior. I just see them as simpatico. I see them as working together really nicely.
Speaker 1:That's been my experience. So I want to kind of have that power, and this stand alone tool gives me the best of both worlds, gives me this kind of executable file. You know, it does work just like a build process. You put the executable file into your project, you run it, it checks similar files, and and then it you give it tell it which folders to do. It creates a tiny CSS file, but you have the full Tailwind power, no NPM, no dependencies.
Speaker 1:Just follow the install instructions, set where your HTML templates are, set the input output CSS locations, and then you add the output to your app header as a regular CSS file. So, you know, tailwind output dot CSS. That'll be up in your, in your actual HTML. So this is an in between. You know, if you don't if you want to use tailwind.
Speaker 1:If you just want to do the CDN, fine. If you don't want to have the you know, if you want to use the build process, great. You're already covered. Tailwind has, like, a very nice easy way to do that, if you're already kind of planning to do that. But if you want something in between where you get that blazingly fast thing, you got the no build, you have the special executable file, and it's, kind of an awesome choice.
Speaker 1:So I that's what I'll most likely be using for projects, like, I, you know, I have one upcoming that I'm hoping to kinda talk about actually on the show a little bit, but I'll be using this to get that little bit of optimization, with tailwind.
