Transitioning Rounded Corners using the JIT Compiler
Tailwind CSS v2.1 introduces a new just-in-time compiler for Tailwind that generates your styles on-demand as you author your templates, instead of generating everything in advance at initial build time. In this lesson, we'll review how to transition rounded courses using the JIT Compiler.
The code for this lesson is divided into two sections, with this you can see the progress on the code.
Instructor: [0:00] Now let's work on the border radius. We can see that in Discord it goes from this circle to this nice rounded rectangle. Right now, we're using rounded full for the circle. Tailwind comes with a bunch of default rounded classes here.
[0:19] This one's a little bit too small so let's take a look at what we have. We can go up to medium or large. This looks a little bit closer. Still, too small. Extra large and 2XL. 2XL looks spot-on. We actually want this to only apply on Hover.
[0:42] We want to start with a circle and then apply that 2XL rounding on Hover. Let's go back to rounded full and then we'll say Hover will use rounded 2XL. Doesn't seem to be taking effect. Now this is happening because this Hover prefix, by default, only applies to certain modules inside a Tailwind.
[1:07] We could fix this by going over to the config and configuring the Hover variant to work with our border radius module or we could actually just enable the just-in-time mode that comes with Tailwind in versions 2.1 or later.
[1:23] We can do that by defining a new mode key here and just typing in JIT. Once Tailwind recompiles, we actually see that border radius taking into effect on the Hover interaction.
[1:40] The JIT mode is a really nice addition to Tailwind and it saves us from having to configure a bunch of stuff that we used to have to do on our own. Now there's one more problem here. We see that the color is transitioning smoothly, but the border radius actually isn't.
[1:55] That's because this default transition class only applies to this limited set of properties by default. Fortunately, there's another convenient class called transition-all, which transitions all properties, which we can see just by hovering this right here.
[2:12] This should actually apply our transition to the border radius, but something still seems off here. Let's pop open our inspector. Let's come and take a look at the animations tab.
[2:29] If we go ahead and hover over our button, slow this down to 10 percent, and then click on this animation, we can actually grab this handle and take a closer look. It's clear that our colors are transitioning smoothly, and it looks like the border radius is doing something here.
[2:50] Then as we get towards the end, we can actually see it working, but it's definitely not doing what we expect. Now the reason for this is that our rounded full class, the way this is implemented, is actually by setting the border radius to 9,999 pixels.
[3:09] This is just so that when applied, this utility would make any element a perfect circle. Transitioning from this super high value just down to 16 pixels, which is what rounded 2XL gives us, is not going to work right for our transitions.
[3:24] What we really want to do is transition just enough to make this a perfect circle so that our animations lineup. If we take away the rounded full, we'll go back to this square.
[3:38] What we need to do is figure out exactly how many pixels we need to make this a perfect circle. Well, we know that the width and height of this is 48 pixels because we're setting it right here using these two utility classes. Half of 48 is 24. 24 pixels should do the trick.
[3:56] Let's take a look at the included rounded utilities here. Lo and behold, rounded 3XL corresponds to 24 pixels. If we apply rounded 3XL and save this, we're back to a perfect circle.
[4:12] Now when I hover, this we get that nice smooth transition, which actually looks pretty dang close to what is in Discord. This is pretty neat that we were able to recreate this just using the Tailwind utilities that are included out of the box.