Favorite New Tailwind Extension

- Speaker A introduces the clamp function in modern CSS but it can't be used if writing in Tailwind. A new plugin called Fluid Tailwind allows users to transition values in a smooth manner. - Chris introduces a new plugin called Clamp to his audience. It allows them to use the clamp function and it also has Tailwind merge support. They also need to replace the default screens with their own from Fluid Tailwind. - It uses the starting and ending values of the smallest and biggest screen. In real life, it will start at the small screen size and expand until it hits the large breakpoint. - Speaker A talks about the limitations of the clamp function in terms of its use cases and how to make it work in the current project.

One of the coolest new features in modern CSS is the clamp function. It allows you to go from a smallest allowed value to a biggest allowed value in a nice, smooth manner. The only trouble is you can't use this if you're writing in Tailwind, not without rewriting a lot of the default styling. Well, that's where this new plugin comes in, called Fluid Tailwind. It allows you to transition values like gaps or paddings or margins in a nice smooth manner using this clamp function. And they've done this in a really intelligent way that allows you to use other plugins like Tailwind Merge. Now, there are actually a few tricky parts with the setup, and I want to show you that now and then show you how to integrate it in a real environment. You ready? Let's jump in. Hey, what's up? My name is Chris, and welcome to coding in public. All right, so let's look at this nice plugin that allows you to go for things like padding and margin and text, anything value based, and use this clamp function. If you're not familiar with Clamp, it takes from a minimum to a maximum, and it tries to be this thing right in the middle. This is all just using the native CSS clamp function. But now you can write tailbone classes and get rid of all of this for simply this. So it makes your classes a lot shorter. It kind of keeps these styles together as well, which is really nice. Now, it does have full intellisense, which is really nice. It also has Tailwind merge support, which I think you should always use if you're writing in Tailwind. And a couple other features I'll let you check out. But for now, let's go ahead and install this. I'm going to open this up and install it. I've just installed a default Next JS app with Tailwind, so that's all we got going. Now we do need to add a couple of things to the config. And I'm going to pull this up over here. Tailwind config right here and jump up top. First of all, we need to go ahead and remove this array and replace the content here with an object where we have, first of all, files, which is an array. That's another way you can write this config. And then we're going to use the extract function. Finally, I need to actually pass in the plugin down this way. Now, there's another bit of this installation that I think they should have included right here because it's needed to actually use the plugin, unless I'm misunderstanding something, and that is if I come down this way, you'll notice that Tailwind version three, which has been the default for some time, now uses pixel values for the screens. Now, because we're going to be setting this up using rems, we have to actually replace the default screens with our own from Fluid Tailwind. Now, the way this config file works, if you're not familiar with it, anything inside of Extend just merely adds on to Tailwind. Whereas if you put it at top level of theme right here, it's going to replace the screens function or all the screen values in Tailwind. So I'm going to do the same thing here for font size as well. And you'll see that this also is going to, in version 4, need to be replaced. So I'm going to go ahead and do it now, which uses now Fluid Tailwinds screens and font sizes instead of the ones that come default in Tailwind. So let's come up top here. Make sure we add these. And now we should be set to go. All right, so now we're actually configured. Let's actually use this thing. So I'm going to come over here to my page, and if you scroll back up, let's see. The basic usage here is instead of using like padding x4 for a small screen size, and then for your biggest screen size, go to like padding x8. You can just do it in one little declaration just like this. So this is for things like padding and margin and text, anything that's like values based. Now, one thing to note here is that by default, it's going to use the starting and ending values of your smallest and biggest screen. So to see this actually work in real life, let's come over here. We've got a text small. Let's say we want to go up to something like 2 XL, all right, which would obviously be a lot. I just have to add to Excel and then this little tilde in front of it. Now, if I come over here and hover, I get full intellisense. That tells me that my font size and my line height are both using this clamp function. Now, notice that it's going from a small value on the smallest screen size all the way to the biggest value, which is 1.5 rem on the biggest screen size. So let's actually see this in real life. If I come back over here, as I get smaller, it gets smaller, and as I get bigger, it'll get bigger, right? It's going to start at the small screen size, which is like 375 or something like that. I forget what it is. All the way up to the biggest screen size to Excel or something like that. Okay. So it's going to fluidly move between those instead of those weird jumping break points. What's better for me is I don't have to write a bunch more classes. Just this little tilde forward slash N, like that. Now let's say you want to scope it to a very particular screen size. Let me come back over here. And we can see that there's some nice scoping options you can set in front of it. So this is what we've written so far, right? We can actually set in front of it the starting screen we want it to start at, and the biggest screen we wanted to cap out to end at. So all I have to do is come over here right in front of this. We'll just add something exactly like that. So let's say from my medium to my large, that's where I want this to take place. Then I'll do a colon, and then this is the declaration I want to apply just inside of this little zone. So if I come back over here, you'll notice that if I go down to the small screen size, it's just my standard default text size, whatever that is my app. And as soon as I hit Medium, it starts to expand until it hits that large break point and then it caps it out right there. Notice at this point it is now to Excel, even though obviously I've got a lot more of the screen to move. So it gives you a lot of flexibility to have starting and ending points. Now you don't have to have both. You can just have a starting point that would be like this. It starts at medium, and then notice it'll just keep getting bigger and bigger until it hits the biggest screen size. Or you can do the opposite where you end it at medium. So we could do something like that. And now you'll notice that at the small screen size, it's as small as it gets, and it gets all the way to medium and then caps out right there. And then as I get bigger, it does not get any bigger. So it's going to apply whatever is here based on this starting and ending by default. Once again, if I remove all of this, it's just going to start with this small screen size and go to the biggest screen size available. So I really like the way they thought through this. Now you might say, hey, what about Arbitrary breakpoints. Can I just do, like, this syntax right here? Well, as you can see, you can't. All right, what you need to do is add in min and then some kind of arbitrary value. I don't use a ton of arbitrary values myself, but if you do, that's something you need to know about. You say, well, what about negative values? Well, all you have to do is do this little negative sign for something like margin top container queries. They actually have support for this plugin. So if you use that plugin, it's an official plugin, you'll see that this syntax is very familiar, just the AT sign. And you'd use that along with this plugin. Just two more things I want to mention real briefly here, and that is, number one, you can combine it with media queries. So this gets really complex, but basically what they're saying is, at an ending of the screen size medium, I want you to go from small to 4 XL. Then once I hit a large break point, I want you to go in the opposite direction. So from 4 XL down to the small size. So you can see here, it'll get small as I get bigger and bigger. Whoa, gets huge. And then it goes back down to getting small again. So you kind of have this, like bell curve thing going on. Now, if you use something like TW for a prefix or if you're using a separator, you can actually include this in the extract function as well. So that's one more note. And then finally, like I said up front, this tailwind merge, which I think I would never write tailwind without, you can use this directly with fluid Tailwind. All you have to do is pass it in as a plugin with fluid right here. So install tailwind merge. Install this right here. And then just use with fluid. Finally, let's take a look at one use case. So let's jump over here. This is this content section. I just want to talk about a few of the limitations we might have. Let's see. Actually, I'm guessing it copied this, but just to make sure, let's do that. So I'm going to come over here and let's get rid of everything inside the main. And now I'm going to paste that all in. All right, we pasted that in. Let's jump back over to our app. There it is. It's pulled in. And then I just want to find this section right here that kind of wraps all of this. Now, there are some things here we're going to want to change and make more Fluid, some of which fluid tail one can help with and some of which it cannot help with. For instance, let's say we want to take the margin auto and we want to change it to be margin zero. Now, can clamp change something from auto to zero? No, it can't. Right. So I can't come in here and say something like this. I can't say starting at the smallest screen size, I can't come in here and say something like this. I want to stop at the large screen size and I want to transition between margin x auto and margin x0. It can't do that. Right. So if I close this down, that's not how clamp works. So if I come over here and I try to hover over this, it's not actually pulling up IntelliSense here because you can't transition from auto to zero using clamp. So that would be one use case. Basically what you have to ask is, can I use clamp on this? If you can, then you can transition it. Now, the same thing is here for like these grid calls. You might say, hey, I want to change from one column to two column. And I want this to be like a slow transition between the two. Well, you can't do that between one and two using clamp normally. So that also means you can't do that here. In other words, I can't do it like this. Large grid calls 1, 2 grid calls 2. And once again, if I hover over this, I won't get any intellisense because that's not how this thing works. So where are the places I can actually use this? Well, let's come back at the top here. You'll notice I've got padding around this whole thing. I've got PX6. And then when I get to larger screen sizes, I want to go down to zero. Well, this is one of those use cases, right? You can clamp things from six to zero, kind of going the opposite way you might expect. So let's come over here. We're going to just say it needs to cap out at large. And what I want is to go to six, from six all the way down to zero. And then I'm going to go ahead and kill this right here, right now. As I start with smaller screen sizes, I should have padding of six all around. As I come all the way out here, it should go down to padding of zero. And you'll notice that if I come back over here and I hover over this, I'll now get IntelliSense telling me that it's actually doing what I expect. So the key question to ask is can I transition this in a clamp function? So like I couldn't take a background color and move it from white to black because that's not how the clamp function works. But anywhere like fonts or paddings or margins, anywhere gaps as well. Anything where you have a value. You can use this fluid tailwind plugin to transition using the nice smooth clamp function. If you're anything like me, this revolutionizes the way you write tailwind. Not only do you have to not write as many classes, but it's also a better UX as you get this nice smooth transition between one value and another. Now, I've done a video before like this on using dark and light mode, and you actually don't have to write dark colon everywhere either. You can use CSS variables to smartly transition between light and dark mode. If you're interested in that. I'll remember to add a video card and you can check it out. Thanks so much for watching. I'll catch you in the next one. Happy coding.