CSS Calc() Function with Theme Values
Adding the calc Function
Let's declare our math calculation in a ,calc, function instead of using the hardcoded 384 pixels.
Side note: you can use calc functions with Tailwind inside an arbitrary value, but note that you have to use underscores instead of spaces!
We'll be very expressive
Transcript
0:00 Let's declare our math calculation we've done before in a calc function instead of this pixel value of 384 pixels. That's pretty cool that you can use calc functions inside an arbitrary value.
0:12 Just make sure you don't have any spaces in your expression, that would break things, but if you need a space, you can replace it with an underscore like so.
0:19 In our calc function, we'll be very expressive about what we're calculating, just like we did before in the previous lesson. We started with the width of the whole card, with max width 2XL, so in our calc let's add theme and reach for the max width scale, and drill down to the 2XL value.
0:36 If I save this, this is going to be way too big and break our design, but that's a good sign that it works. Next, we subtracted the side panel width, which is width 56, so we'll go minus and another theme function that goes and gets the width, that 56 value.
0:53 We should be a bit closer now. Yep, and you can see that the remaining space that we need to calculate is that padding around the card. That comes from this PX-8 class, so let's go minus one more time and reach for the theme, and this time the padding level 8.
1:09 This is not going to work, you'll see we still have half the padding left, because padding level 8 is applied on the left and on the right, so we need to subtract it two times. You'd think, "Well let's use padding 16 instead," which would work, but that makes the assumption that padding 16 is the double of padding 8.
1:28 It is in the default config, but the user may have changed that, so instead let's go back to padding 8, and here we'll wrap this in parentheses and we will multiply that by 2.
1:38 All right, so let's save. Yep, it still works. This arguably makes this class harder to read because it's longer, but at least we are explicit about how we landed on that third value.
1:49 We take the max width of 2XL, and then subtract the width of 56 and the padding 8x2. Our class is getting sort of crazy, and we're absolutely not done yet. The next thing we'll tackle is how to make things work properly when we get below a certain width between there and the initial breakpoint.